Rounded Corners in UserControl not showing

问题

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

This is my markup:

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

and this is what it looks like:

回答1:

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>

EDIT: 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.

回答2:

You must have something else going on. I pasted your code into a new project with UserControl and it renders fine.

Can you provide more detail if a new project does not work the same for you, and compare differences to help troubleshoot?

来源：https://stackoverflow.com/questions/34402710/rounded-corners-in-usercontrol-not-showing

标签

wpf

user-controls

rounded-corners