C# WPF - Rounded background color

Question

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>

Something like this? https://wpf.2000things.com/2012/05/11/556-clipping-to-a-border-using-an-opacity-mask/ — Klamsi, Sep 15 '21 at 12:49
Yes, something like that but i tried that solution and i can't make it works — Vez, Sep 15 '21 at 14:20
try to be as close as possible to this example. You need a border, inside this border a grid, inside this grid your opacity mask border with a name (and also a radius) AND your grid defining the opacity mask. Don't try to shorten something — Klamsi, Sep 15 '21 at 14:23

score 0 · Accepted Answer · answered Sep 15 '21 at 16:31

0

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

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

answered Sep 15 '21 at 16:31

mm8

163,881
10
57
88

score 0 · Answer 2 · answered Sep 15 '21 at 17:48

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>

C# WPF - Rounded background color

2 Answers2