与边框背景CornerRadius不同的WPF边框对象边框CornerRadius

Question

我有两个相互重叠的边界。一个有BorderThickness但没有背景，另一个没有边框粗细，但有背景。两个边框的CornerRadius都为3。问题是其中一个边框的背景角从另一个边框的后面伸出。

​

​

下面是XAML，其中第一个边框元素具有背景，名为FocusVisual的边框具有BorderThickness。

<Grid x:Name="grid">
    <Border Background="{TemplateBinding Background}"  
            CornerRadius="3">
        <Grid>
            <Border x:Name="MouseOverVisual" 
                Opacity="0"
                Background="{StaticResource NuiFieldHoverBrush}"
                CornerRadius="3" />
            <Border>
                <Grid>
                    <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    <ContentPresenter x:Name="PART_WatermarkHost" 
                          Content="{TemplateBinding Watermark}"
                          ContentTemplate="{TemplateBinding WatermarkTemplate}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          IsHitTestVisible="False"
                          Margin="{TemplateBinding Padding}"
                          Visibility="Collapsed"/>
                </Grid>
            </Border>
        </Grid>
    </Border>
    <Border x:Name="FocusVisual" 
            Opacity="0" 
            BorderThickness="{TemplateBinding BorderThickness}"
            BorderBrush="{StaticResource NuiFocusBrush}" 
            CornerRadius="3" />
</Grid>

CornerRadius在边框对象的背景和边框上有不同的效果，这似乎是WPF中的一个错误。

我可以向带有背景的边框添加一个BorderThickness，并将BorderBrush设置为背景颜色，但这会导致该边框的子元素被BorderThickness推入。我可能可以通过重新排列元素来解决这个问题，但这是一种痛苦，所以我想看看是否有人有更好的解决方法。

Answer 1

您应该重新计算内边框的CornerRadius。

假设有这样一个更简单的例子：

<Border x:Name="OuterBorder" Width="50" Height="25" Background="Gray" CornerRadius="5">
    <Border x:Name="InnerBorder" BorderBrush="red" BorderThickness="4" CornerRadius="5"/>
</Border>

InnerBorder的宽度和高度每边都小于OuterBorder的边框厚度/2，因此应按以下方式计算阶梯半径：

‘内边界的CornerRadius’=‘外边界的CornerRadius’-‘内边界的BorderThickness’/2。

在本例中，内边框的CornerRadius应为3。

编辑：我认为this SO更好地回答了你的问题。

Answer 2

在深灰色边框上添加一个透明边框，它将与蓝色边框对齐。确保它们具有相同的边框厚度。

<Grid Width="50" Height="40">
    <Border Background="Red" CornerRadius="3" BorderBrush="Transparent" BorderThickness="1">
        <TextBlock Text="Hello" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Border>
    <Border BorderBrush="Blue" CornerRadius="3" BorderThickness="1" Background="Transparent"/>       
</Grid>