Clipping of child elements

On the forums I saw this interesting problem where there was a need to round the corners of a stackpanel inside a border with cornerradius set…

The top is what you get and the bottom image is what you want. The simplest thing to do here is to set the padding on the border so that the stackpanel doesnt bleed around the corners.

But when that doesnt meet your requirements you will need to set the clip property on the child in the OnRender function so that you get the correct clipping. The code for the above is attached.(thanks to Ifeanyi)


Share this post

Comments (4)

  1. You’ve been kicked (a good thing) – Trackback from

  2. The problem I’ve found is that clip geometry needs absolute positions, whereas the container you want to clip to might not.  An example would be if you wanted a resizable layout with elements taking no more space than they needed; that’s pretty hard to achieve in pure XAML if you also need to clip the content to a rounded border.

    The idea of using padding is great, but not if you need some kind of image as the background (perhaps a banner that you’d like clipped to its rounded border).

    In any case, so far I’ve found enough workarounds & compromises :o)  It’s still a billion times better / easier than HTML & CSS :o)

  3. An alternate that I’ve found is to set the background of the border itself to a color (or image) and it won’t bleed over the border. Then you can add padding to an inner component and if it’s background is the same as the border’s background, it looks seamless. and requires no extra code.

  4. Dmitrij Zaharov says:

    Seems that the better solution will be to override GetLayoutClip method and return the geometry, used to clip the content.

    That could solve some potentioal problems with transformations, and also it will elliminate the problems with the Clip property itself (you wrote that you could not be animated in this case).