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

Question

我有两个彼此重叠的边界。一个有BorderThickness但没有背景，另一个没有边框厚度，但有背景。两个边界都有一个3的CornerRadius。问题是其中一个边界的背景角落从另一个边界的角落后面突出。

这是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>

对Border对象的背景和边框有不同影响的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的宽度和高度比每边的BorderThickness / 2小于OuterBorder所以你应该用这种方式计算corder半径：

'内边界的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>