边界重叠的问题

Question

我有这个带有边框的网格:

<Border Padding="0" BorderBrush="Orange" BorderThickness="2" CornerRadius="5">
    <Grid >                       
        <Label Grid.Row="0" Grid.Column="0" BorderBrush="Black"/>
        <Label Grid.Row="1" Grid.Column="0" BorderBrush="Black"/>
        <Label Grid.Row="0" Grid.Column="1" BorderBrush="Black"/>
        <Label Grid.Row="1" Grid.Column="1" BorderBrush="Black"/>
    </Grid>
</Border>

问题是,标签边框与网格角落中的橙色边框重叠.这可能是因为z-index.如何解决这个问题呢？

Answer 1

请参阅以下问题:如何使圆角边框的内容也是圆角的？

它会给你一个类似的结果

像它一样使用它

<local:ClippingBorder Padding="0" BorderBrush="Orange" BorderThickness="2" CornerRadius="5">
    <Grid >
        <!--...-->
    </Grid>
</local:ClippingBorder>

Answer 2

您可以将标签设置为不在每一侧都有边框，如下所示

<Label Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Label Grid.Row="1" Grid.Column="0" BorderBrush="Black" BorderThickness="0,1,1,0"/>
<Label Grid.Row="0" Grid.Column="1" BorderBrush="Black" BorderThickness="1,0,0,1"/>
<Label Grid.Row="1" Grid.Column="1" BorderBrush="Black" BorderThickness="1,1,0,0"/>