Fill "corner radiuced" border

Question

Hope that my question is easy enough :) I have BORDER as main container with some corner radius. There is a GRID inside of it and if I'd like to set some background color to grid - there is an ugly fill parts outside of corners become...

So, how can I set my BORDER like a global container and everything inside stays inside?

Thank you!

score 6 · Accepted Answer · edited May 23 '17 at 12:13

6

See the following question: How to make the contents of a round-cornered border be also round-cornered?

ClippingBorder from the answer does a very good job at this. Here is a comparison between the regular Border and ClippingBorder.

enter image description here

<StackPanel Orientation="Horizontal">
    <Border CornerRadius="20,20,20,20"
            BorderThickness="4"
            BorderBrush="Black"
            Width="50"
            Height="50">
        <Grid Background="Red"/>
    </Border>
    <controls:ClippingBorder CornerRadius="20,20,20,20"
                             BorderThickness="4"
                             BorderBrush="Black"
                             Width="50"
                             Height="50"
                             Margin="20,0,0,0">
        <Grid Background="Red"/>
    </controls:ClippingBorder>
</StackPanel>

edited May 23 '17 at 12:13

Community

1
1

answered Nov 09 '11 at 00:33

Fredrik Hedblad

83,499
23
264
266

I have question regarding this approach: why going through all this trouble if you can get the same result by setting the Border.Background property to Red? Is there any other case, not related to background color that this approach solves? – Murven Nov 09 '11 at 00:39
@Murven: This was just an example of course. The problem it solves is that the content of the `Border` can't extend beyond the `Border`. For instance, you want to display a map or photo with rounded corners and a border – Fredrik Hedblad Nov 09 '11 at 00:43
I see what you mean, +1 from me for that one! – Murven Nov 09 '11 at 00:45
Really awesome! Thank you :) So, the only think I'm afraid of - is comment at the beginning that ClippingBorder will surpress any databinding or animation of its childs.... Hope, I can solve it :) – Artem Makarov Nov 09 '11 at 00:56
@ArtemMakarov: It's only for the childs `Clip` property so that shouldn't be any problems :) – Fredrik Hedblad Nov 09 '11 at 01:07

score 0 · Answer 2 · answered Nov 09 '11 at 00:30

If you want the background color to fill the rounded corners you will need to set the background property on the border itself, not the grid inside it. Now if you just want the grid to be inside the border completely, set a margin in the grid which compensates for the rounded corner radius:

<Border CornerRadius="10" 
        BorderBrush="Black" 
        BorderThickness="5" 
        Background="Green">
    <Grid Background="Red" 
          Margin="2.5">

    </Grid>
</Border>

I don't think that this is the only solution :) It must be independent of corner radius and fill whole area, not only rectangle.. — Artem Makarov, Nov 09 '11 at 00:33

Fill "corner radiuced" border

2 Answers2