How to make the border trim the child elements?

Question

I have a Border with CornerRadius property set to 10. Inside that Border, there's a StackPanel. The panel contains two Borders with blue and red backgrounds, respectively.

The upper left and upper right corners of the blue border and the lower left and lower right corners of the red border are sticking out of the curved edges of the first border. I wish to make the blue and red borders trim to the parent border. Is that possible?

By the way, I do know that if I set the same value for CornerRadius property of the blue and red borders, it will follow the curve of the first one. I don't want that - I want trimming. Thanks!

<Border 
    Width="200" 
    Height="200" 
    BorderThickness="1" 
    BorderBrush="Black"
    CornerRadius="10">
    <StackPanel>
        <Border Height="100" Background="Blue" />
        <Border Height="100" Background="Red" />
    </StackPanel>
</Border>

Answer 1

You may write a converter for the Clip property. Converter should implement IMultiValueConverter and bound to actual size and corner radius, for example.

public class BorderClipConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length == 3 && values[0] is double && values[1] is double && values[2] is CornerRadius)
        {
            var width = (double)values[0];
            var height = (double)values[1];

            if (width < Double.Epsilon || height < Double.Epsilon)
            {
                return Geometry.Empty;
            }

            var radius = (CornerRadius)values[2];

            // Actually we need more complex geometry, when CornerRadius has different values.
            // But let me not to take this into account, and simplify example for a common value.
            var clip = new RectangleGeometry(new Rect(0, 0, width, height), radius.TopLeft, radius.TopLeft);
            clip.Freeze();

            return clip;
        }

        return DependencyProperty.UnsetValue;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

Usage:

<Border CornerRadius="10">
    <Border.Clip>
        <MultiBinding Converter="{StaticResource BorderClipConverter}">
            <Binding Path="ActualWidth"
                        RelativeSource="{RelativeSource Self}"/>
            <Binding Path="ActualHeight"
                        RelativeSource="{RelativeSource Self}"/>
            <Binding Path="CornerRadius"
                        RelativeSource="{RelativeSource Self}"/>
        </MultiBinding>
    </Border.Clip>
</Border>

Answer 2

ClipToBounds is the property that might help in this case.

Edit: After some testing i noticed that ClipToBounds only cares about the actual bounds (i.e. the rectangular area the control uses), so content still sticks out at the corners...

This seems to suggest that simple clipping to the border is not possible. You could set the Clip property to a rounded rectangle, this is not very convenient though because its size cannot be bound i think.

Your options seem to be using an OpacityMask together with a VisualBrush or recreating a clipping whenever relevant properties change by using a MultiBinding & MultiValueConverter...

Answer 3

There's also a XAML-only solution to your problem by using the OpacityMask property. The trick is to create a Grid inside the outer Border and set the Grid's OpacityMask to another element that acts as a clipping mask.

<Border Width="200" Height="200"
        BorderThickness="1" BorderBrush="Black"
        CornerRadius="10">
    <Grid>
        <Grid.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=clipMask}" Stretch="None" />
        </Grid.OpacityMask>
        <Border x:Name="clipMask" Background="White" CornerRadius="10" />
        <StackPanel Background="White">
            <Border Height="100" Background="Blue" />
            <Border Height="100" Background="Red" />
        </StackPanel>
    </Grid>
</Border>

In the snippet above I used a Border as clipping mask, but it can also be another element as long as its fill color is non-transparent. Note also that the clipMask Border also has the same CornerRadius.

Inspired by: http://www.codeproject.com/Articles/225076/Creating-Inner-Shadows-for-WPF-and-Silverlight