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

Posted 2023-02-19

【中文标题】WPF 边框对象边框 CornerRadius 与边框背景 CornerRadius 不同

【英文标题】：WPF Border Object Border CornerRadius different from Border Background CornerRadius

【发布时间】：2011-10-24 08:55:18

【问题描述】：

我有两个彼此重叠的边框。一个有 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 对 Border 对象的 Background 和 Border 具有不同的效果，这似乎是 WPF 中的一个错误。

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

【问题讨论】：

您是否尝试删除包含在第一个 Border 中的 Grid 元素，看看是否有什么不同？

尝试使用 Peter Blois 在 snoopwpf.codeplex.com 的窥探来检查每个边框是否具有相同的 ActualWidth 和 ActualHeight，是否没有隐式边距或填充弄乱等等。

【参考方案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 每边的 BorderThickness/2 小，所以你应该这样计算圆弧半径：

'内边框的CornerRadius' = '外边框的CornerRadius' - '内边框的BorderThickness'/2。

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

编辑：我认为this SO 更适合您的问题。

【参考方案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>