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

Question

我有一个 WPF 应用程序。

它有一个填满整个页面的网格，并且有 3 行。

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

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

它有效，但我得到了内部矩形边框以及圆形外部边框。

这是我的用户控件中的标记：

<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>

它给了我这样的外观：

Answer 1

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

编辑：看起来在设置边框背景后您仍然有两条边框线。只需删除 BorderThickness 和 BorderBrush（这与将它们设置为默认值相同）并稍微增加填充。另外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>

Answer 2

我更改了边框位置，并将边距设置为 -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>

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

Rounded Corners in UserControl showing inner square border

wpf

user-controls

rounded-corners