Non-partisan software developer

Wednesday, December 06, 2006

WPF CornerRadius


In WPF there is the Border type which simply puts a border around any UIElement. I find myself using this alot to create cool rounded corners. The blue rounded rectangle to the right is what we'd like to see...

Well it doesn't work so well if the thing inside your Border element doesn't have rounded corners, it's edges simply bleed over the rounded corner.

And this is what you get (I lowered the opacity so you could see how it bleeds over):


<Border CornerRadius="15" Height="50" Width="50" BorderThickness="1"
BorderBrush="Black">
<Rectangle Fill="Blue" Height="50" Width="50"/>
</Border>

Okay you've seen the "ClipToBounds" property which MSDN says: "Gets or sets a value indicating whether to clip the content of this element (or content coming from the child elements of this element) to fit into the size of the containing element."

Sounds like that will work great!

<Border CornerRadius="15" Height="50" Width="50" BorderThickness="1"
BorderBrush="Black">
<Rectangle Fill="Blue" Height="50" Width="50" ClipToBounds="True"/>
</Border>


Unfortunately it does nothing :) I am not sure why ClipToBounds even exists because if I restrict the Border element to 25,25 the rectangle cannot be larger than 25,25...at least
from what xaml I've been able to crank out.

So the trick to get this to work is not to use an element inside rather a brush on the background, if you have a visual you could create a VisualBrush. Pretty simple:

<Border CornerRadius="15" Height="50" Width="50" BorderThickness="1"
BorderBrush="Black" Background="Blue" >
</Border>


The other solution isn't as nice but setting the clip property on the containing element works as well.

4 comments:

Anonymous said...

Very helpful, thanks!

msujaws said...

Thanks a lot. This helped me and was easy to follow.

Ken Blackstein said...

I googled for: "how to make rounded corner label wpf" and found your note. Exactly what I needed. Thank you for taking the time to post it.

Anonymous said...

If you set ClipToBounds on the Border, it will clip all its children (including any Rectangles inside it) and you won't have any bleeding off of the Border.