填充"圆角半径"边框

Question

希望我的问题足够简单 :) 我有一个带有一些圆角的BORDER作为主容器。里面有一个GRID，如果我想给GRID设置一些背景颜色 - 边角外面出现了丑陋的填充部分...

所以，我该如何设置BORDER作为全局容器，使得里面的所有内容都保持在内部?

谢谢！

- Artem Makarov

Answer 1

请看下面的问题：如何使圆角边框内部内容也成为圆角？ 答案中的ClippingBorder可以很好地解决这个问题。下面是常规Border和ClippingBorder之间的比较。

<StackPanel Orientation="Horizontal">
    <Border CornerRadius="20,20,20,20"
            BorderThickness="4"
            BorderBrush="Black"
            Width="50"
            Height="50">
        <Grid Background="Red"/>
    </Border>
    <controls:ClippingBorder CornerRadius="20,20,20,20"
                             BorderThickness="4"
                             BorderBrush="Black"
                             Width="50"
                             Height="50"
                             Margin="20,0,0,0">
        <Grid Background="Red"/>
    </controls:ClippingBorder>
</StackPanel>

- Fredrik Hedblad

---

我有关于这种方法的问题：如果你可以通过将Border.Background属性设置为红色来获得相同的结果，那为什么要费这么大劲呢？除了背景颜色之外，这种方法还解决了其他什么问题吗？ - Murven

@Murven：这只是一个例子。它解决的问题是Border的内容不能超出Border。例如，您想显示一个带有圆角和边框的地图或照片。 - Fredrik Hedblad

我明白你的意思，我给那个点赞！ - Murven

真的很棒！谢谢 :) 所以，我唯一担心的是在开头的注释中提到ClippingBorder会抑制其子元素的任何数据绑定或动画....希望我能解决它 :) - Artem Makarov

@ArtemMakarov：这仅适用于子级的“Clip”属性，因此不应该有任何问题 :) - Fredrik Hedblad

Answer 2

如果你想要背景颜色填充圆角，你需要在边框本身上设置背景属性，而不是内部的网格。现在，如果你只想让网格完全在边框内部，可以在网格中设置一个与圆角半径相对应的外边距：

<Border CornerRadius="10" 
        BorderBrush="Black" 
        BorderThickness="5" 
        Background="Green">
    <Grid Background="Red" 
          Margin="2.5">

    </Grid>
</Border>

- Murven

---

我不认为这是唯一的解决方案 :) 它必须独立于圆角并填充整个区域，而不仅仅是矩形。 - Artem Makarov