C# WPF - Rounded background color-CodePudding

How can i make the red corner rounded ? I want to set the CornerRadius only of MainBorder and not for the first and last InnerBorder

If I set the background of textBlocks (instead of InnerBorders) the behavior is the same

<Border Name="MainBorder" Background="Transparent" Width="250" Height="250"  BorderBrush="Black" BorderThickness="3" CornerRadius="20" Margin="500,500,0,0">
            <Grid>                                                
                <Grid.RowDefinitions>                               
                    <RowDefinition Height="1*"/>                 
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <Border Name="brdInner1" Grid.Row="0" BorderBrush="Black" BorderThickness="0,0,0,0" Background="Transparent">
                    <TextBlock />
                </Border>
                    <Border Name="brdInner2" Grid.Row="1" BorderBrush="Black" BorderThickness="0,3,0,0" Background="Red">
                    <TextBlock />
                </Border>
                    <Border Name="brdInner3" Grid.Row="2" BorderBrush="Black" BorderThickness="0,3,0,0" Background="Red">
                    <TextBlock />
                </Border>
            </Grid>
            </Border>

CodePudding user response：

Use the ClippingBorder class from here and just change the type of your main border:

<local:ClippingBorder x:Name="MainBorder" ...>

CodePudding user response：

The reason why this is happening is because while your main Border has it's CornerRadius property set but the child Borders are still set to be square, I have added CornerRadius to your last Border control.

<Border Name="MainBorder" Background="Transparent" Width="250" Height="250"  BorderBrush="Black" BorderThickness="3" CornerRadius="20" Margin="500,500,0,0">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
            <Border Name="brdInner1" Grid.Row="0" BorderBrush="Black" BorderThickness="0,0,0,0" Background="Transparent">
                <TextBlock />
            </Border>
            <Border Name="brdInner2" Grid.Row="1" BorderBrush="Black" BorderThickness="0,3,0,0" Background="Red">
                <TextBlock />
            </Border>
            <Border Name="brdInner3" Grid.Row="2" BorderBrush="Black" BorderThickness="0,3,0,0" Background="Red" CornerRadius="0,0,20,20">
                <TextBlock />
            </Border>
        </Grid>
    </Border>