UserControl 中的圆角未显示 [英] Rounded Corners in UserControl not showing

问题描述

我试图让我的 UserControl 显示圆角.

I am trying to get my UserControl to display rounded corners.

这是我的标记:

<Border CornerRadius="10" Padding="5" HorizontalAlignment="Center" VerticalAlignment="Center" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="20" />
            <RowDefinition Height="25" />
            <RowDefinition Height="25" />
            <RowDefinition Height="25" />
            <RowDefinition Height="25" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10" />
            <ColumnDefinition Width="220" />
            <ColumnDefinition Width="10" />
        </Grid.ColumnDefinitions>
        <Grid.Background>
            <ImageBrush ImageSource="{StaticResource NavyBlueGround}" />
        </Grid.Background>
        <Label Grid.Column="1" Grid.Row="0"  Style="{StaticResource GelTitle}"   Content="Customer Search" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
        <Label Grid.Row="1" Grid.Column="1" Style="{StaticResource GelCaption}"  Content="Enter Customer First Name" VerticalAlignment="Bottom" />
        <TextBox  Grid.Row="2" Grid.Column="1" Name="txtForeName"  Background="White" VerticalContentAlignment="Center"/>
        <Label Grid.Row="3" Grid.Column="1" Style="{StaticResource GelCaption}"  Content="Enter Customer Last Name" VerticalAlignment="Bottom" />
        <TextBox Name="txtSurname" Grid.Column="1" Grid.Row="4"  FontSize="14" Text="hello" VerticalContentAlignment="Center" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" />
        <Button Name="btnCustomerSearch" Grid.Column="1" Grid.Row="5" Style="{StaticResource GelButton}" Content="Search" Click="btnCustomerSearch_Click" VerticalAlignment="Center" />
    </Grid>
</Border>

这是它的样子:

推荐答案

不要使用网格的背景，而是使用它的边框.

Instead of using the background for your Grid, use it for your border.

<Border CornerRadius="10" Padding="5" HorizontalAlignment="Center" VerticalAlignment="Center" >
    <Border.Background>
        <ImageBrush ImageSource="{StaticResource NavyBlueGround}" />
    </Border.Background>

此问题的原因是边框(当 padding=5 时)将其子级的边距设置为 5 像素.同时定义 CornerRadius 将网格的边距设置得更远.

The reason for this problem is that a border (when padding=5) sets the margins of its child 5 pixels in. also defining CornerRadius sets the margins of grid in even further.

所以网格(及其背景)的边界不是圆角出现的地方.

So the bounds of Grid (and its background) are not where the rounded corners occur.

这篇关于UserControl 中的圆角未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！