填充“角落”边界

Question

希望我的问题很简单:)我有BORDER作为主要容器，有一些角半径。里面有一个GRID，如果我想将一些背景颜色设置为网格 - 角落外面有一个丑陋的填充部分......

那么，我怎样才能将BORDER设置为全局容器，内部的所有东西都留在里面？

谢谢！

Answer 1

请参阅以下问题：How to make the contents of a round-cornered border be also round-cornered?

来自答案的{p> 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>

Answer 2

如果希望背景颜色填充圆角，则需要在边框本身设置背景属性，而不是其中的网格。现在，如果您只想让网格完全位于边框内，请在网格中设置一个边距，以补偿圆角半径：

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

    </Grid>
</Border>