How to make the contents of a round-cornered border be also round-cornered?

Question

I have a border element with rounded corners containing a 3x3 grid. The corners of the grid are sticking out of the border. How can I fix that? I tried using ClipToBounds bu

Answer 1

So I just came across this solution, then followed into msdn forum link that Jobi provided and spent 20 minutes writing my own ClippingBorder control.

Then I realized that CornerRadius property type is not a double, but System.Windows.CornerRaduis which accepts 4 doubles, one for each corner.

So I'm going to list another alternative solution now, which will most likely satisfy the requirements of most people who will stumble upon this post in the future...

Let's say you have XAML which looks like this:

    
        ... your UI ...
    

And the problem is that the background for the Grid element bleeds through and shows past the rounded corners. Make sure your has transparent background instead of assigning the same brush to "Background" property of the element. No more bleeding past the corners and no need for a whole bunch of CustomControl code.

It's true that in theory, client area still have the potential of drawing past the edge of the corner, but you control that content so you as developer should be able to either have enough padding, or make sure the shape of the control next to the edge is appropriate (in my case, my buttons are round, so fit very nicely in the corner without any problems).