如何让边框修剪子元素? [英] How to make the border trim the child elements?

问题描述

我有一个 Border，CornerRadius 属性设置为 10.在那个 Border 里面，有一个 StackPanel.该面板包含两个分别具有蓝色和红色背景的 Border.

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?

顺便说一句，我知道如果我为蓝色和红色边框的 CornerRadius 属性设置相同的值，它将遵循第一个的曲线.我不想要那个 - 我想要修剪.谢谢！

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>

推荐答案

您可以为 Clip 属性编写转换器.例如，转换器应实现 IMultiValueConverter 并绑定到实际大小和角半径.

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();
    }
}

用法:

<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>

这篇关于如何让边框修剪子元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！