Wpf UserControl中的圆角显示内部方形边框_Wpf_User Controls_Rounded Corners

Wpf UserControl中的圆角显示内部方形边框

wpf

Wpf UserControl中的圆角显示内部方形边框,wpf,user-controls,rounded-corners,Wpf,User Controls,Rounded Corners,我有一个WPF应用程序它有一个填充整个页面的网格，共有3行在中间一行，我根据用户选择的菜单按钮显示usercontrol 我想在每个用户控件周围创建一个圆形边框，在谷歌搜索之后，我找到了一个示例并实现了它它可以工作，但我得到了内部矩形边界以及圆形的外部边界这是my UserControl中的标记： <Border BorderThickness="3" BorderBrush="White" CornerRadius="10" Padding="2" HorizontalA

我有一个WPF应用程序

它有一个填充整个页面的网格，共有3行

在中间一行，我根据用户选择的菜单按钮显示usercontrol

我想在每个用户控件周围创建一个圆形边框，在谷歌搜索之后，我找到了一个示例并实现了它

它可以工作，但我得到了内部矩形边界以及圆形的外部边界

这是my UserControl中的标记：

<Border BorderThickness="3" BorderBrush="White" CornerRadius="10" Padding="2"
    HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid>
        <Grid Background="White" >
            <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="25" />
            <RowDefinition Height="25" />
            <RowDefinition Height="25" />
            <RowDefinition Height="25" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="220" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
            <Label Grid.Row="0" Grid.Column="1" Content="Search for Customer" />
            <Label Grid.Row="1" Grid.Column="1" Content="Enter Customer First Name"/>
            <Label Grid.Row="3" Grid.Column="1" Content="Enter Customer Last Name" />
            <TextBox Name="txtForeName" Grid.Column="1" Grid.Row="2" />
            <TextBox Name="txtSurname" Grid.Column="1" Grid.Row="4" />
            <Button Name="btnCustomerSearch" Grid.Column="1" Grid.Row="5" />
        </Grid>
    </Grid>
</Border>

它给了我这样的印象：

内部矩形边框根本不是边框。边框（白色）和网格（白色）都在里面。网格适合您的边界，但它们之间的区域没有任何颜色，因此它是透明的，因此您可以看到它是蓝色的。如果希望整个区域为白色，请将边框的背景设置为白色。此外，在代码中，一个嵌套网格看起来是多余的

编辑：看起来在设置边框的背景后，仍然有两条边框线。只需删除BorderThickness和BorderBrush（与将其设置为默认值相同），并稍微增加填充。此外，您不需要单独设置网格的背景，它从边界开始已经是白色的

这就是我的想象：

<Border CornerRadius="10" Padding="5" Background="White"
HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid>
        <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="25" />
        <RowDefinition Height="25" />
        <RowDefinition Height="25" />
        <RowDefinition Height="25" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="220" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Grid.Column="1" Content="Search for Customer" />
        <Label Grid.Row="1" Grid.Column="1" Content="Enter Customer First Name"/>
        <Label Grid.Row="3" Grid.Column="1" Content="Enter Customer Last Name" />
        <TextBox Name="txtForeName" Grid.Column="1" Grid.Row="2" />
        <TextBox Name="txtSurname" Grid.Column="1" Grid.Row="4" />
        <Button Name="btnCustomerSearch" Grid.Column="1" Grid.Row="5" />
    </Grid>
</Border>

这就是我的想象：

<Border CornerRadius="10" Padding="5" Background="White"
HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid>
        <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="25" />
        <RowDefinition Height="25" />
        <RowDefinition Height="25" />
        <RowDefinition Height="25" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="220" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Grid.Column="1" Content="Search for Customer" />
        <Label Grid.Row="1" Grid.Column="1" Content="Enter Customer First Name"/>
        <Label Grid.Row="3" Grid.Column="1" Content="Enter Customer Last Name" />
        <TextBox Name="txtForeName" Grid.Column="1" Grid.Row="2" />
        <TextBox Name="txtSurname" Grid.Column="1" Grid.Row="4" />
        <Button Name="btnCustomerSearch" Grid.Column="1" Grid.Row="5" />
    </Grid>
</Border>

我已经更改了边框的位置，并将其边距设置为-3

将边框背景设置为白色仍将保持栅格的4个角保持可见

看看这是否适合你

     <Grid Canvas.Left="40" Canvas.Top="103">
            <Grid Background="White">
                <Grid Margin="5">
                    <Grid Background="White">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="220" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Row="0" Grid.Column="1" Content="Search for Customer" />
                        <Label Grid.Row="1" Grid.Column="1" Content="Enter Customer First Name"/>
                        <Label Grid.Row="3" Grid.Column="1" Content="Enter Customer Last Name" />
                        <TextBox Name="txtForeName" Grid.Column="1" Grid.Row="2" />
                        <TextBox Name="txtSurname" Grid.Column="1" Grid.Row="4" />
                        <Button Name="btnCustomerSearch" Grid.Column="1" Grid.Row="5" Content="Press" />
                    </Grid>
                </Grid>
            </Grid>
            <Border BorderThickness="3" BorderBrush="White" CornerRadius="10" Padding="2" Margin="-3"/>
        </Grid>

我已经更改了边框的位置，并将其边距设置为-3

将边框背景设置为白色仍将保持栅格的4个角保持可见

看看这是否适合你

     <Grid Canvas.Left="40" Canvas.Top="103">
            <Grid Background="White">
                <Grid Margin="5">
                    <Grid Background="White">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="220" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Row="0" Grid.Column="1" Content="Search for Customer" />
                        <Label Grid.Row="1" Grid.Column="1" Content="Enter Customer First Name"/>
                        <Label Grid.Row="3" Grid.Column="1" Content="Enter Customer Last Name" />
                        <TextBox Name="txtForeName" Grid.Column="1" Grid.Row="2" />
                        <TextBox Name="txtSurname" Grid.Column="1" Grid.Row="4" />
                        <Button Name="btnCustomerSearch" Grid.Column="1" Grid.Row="5" Content="Press" />
                    </Grid>
                </Grid>
            </Grid>
            <Border BorderThickness="3" BorderBrush="White" CornerRadius="10" Padding="2" Margin="-3"/>
        </Grid>

我相信这个问题可以帮助你：@OrenHizkiya谢谢你的链接。我看了一下并实现了双重边界，但没有什么区别：（我相信这个问题可以帮助你：@OrenHizkiya谢谢你的链接。我看了看并实现了双重边界，但没有什么区别：（您好，谢谢您的回答。我会在收到回复后尽快检查。对不起，我的回复太晚了。虽然您的回答对我很有意义，但我已经实施了您的建议，但没有实施work@AndrewSimpson我修正并扩展了我的答案，这次我自己检查了，所以你可以试试。嗨，这不起作用。我要删除这个您好，谢谢您的回答。我回来后会尽快检查。对不起，我的回答太晚了。虽然您的回答对我很有意义，但我已经实施了您的建议，但没有实施work@AndrewSimpson我修正并扩展了我的答案，这次我自己检查了，所以你可以试试。嗨，这不起作用。我是g我将删除此问题并重新措辞。谢谢。我一回来，我就会看到哪个答案对mehi最有效，哪个不起作用。此网格位于用户控件中，该控件位于父页面的网格内。这是我认为它不起作用的唯一原因。谢谢。我一回来，我就会看到哪个答案对mehi最有效，那个不起作用。此网格位于userControl中，该控件位于父页面的网格内。这是我认为它不起作用的唯一原因？