带有圆角的多个嵌套边框。如何？

【问题标题】：Multiple nested borders with rounded corners. How to?带有圆角的多个嵌套边框。如何？
【发布时间】：2013-12-12 23:00:25
【问题描述】：

我想显示由多个不同颜色的边框和圆角包围的内容。我尝试了角半径，但永远无法在嵌套边框上获得完美的角（即与父边框的角相邻）。在这种情况下，推荐的做法是什么（如果有的话）？以下是我尝试过的：

<Border Grid.Row="1"  Grid.Column="1" CornerRadius="3" BorderThickness="3" BorderBrush="#FAFAFA"Background="#FAFAFA" Margin="40,40,40,40" Padding="0">
        <Border.Effect>
            <DropShadowEffect Color="#1f40618c" />
        </Border.Effect>
        <StackPanel>
            <Border CornerRadius="3" BorderThickness="3" BorderBrush="#696B6D" Background="#696B6D"  Margin="0" Padding="0" >
                <Border CornerRadius="2.3" BorderThickness="3" BorderBrush="Black" Margin="0" Padding="32,32,32,16" Background="#102F8C">
                    <Grid />
                </Border>
            </Border>
        </StackPanel>
    </Border>

谢谢。

【问题讨论】：

标签： wpf xaml

【解决方案1】：

您必须考虑到BorderThickness 会增加边框控件的总宽度或高度。您可以将其想象为边界线的一半位于控件内部，而一半位于控件外部。另一方面，CornerRadius 是相对于边界线的中心给出的。

因此，内半径和外半径之间的差值应等于两个 BorderThicknesses 的一半之和（可能加上外部 Padding 和内部 Margin）。

您的嵌套边框的 BorderThickness 每个为 3，外部 CornerRadius 也为 3，这将导致内部 CornerRadius 为 0。

您可以简单地将内部 CornerRadius 设置为某个合理的值，然后将外部值加 3：

<Border BorderBrush="Blue" BorderThickness="3" CornerRadius="6">
    <Border BorderBrush="Red" BorderThickness="3" CornerRadius="3">

    </Border>
</Border>

【讨论】：