2

我有两个彼此重叠的边框。一个有 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 推入。我可能可以通过重新排列元素来解决这个问题，但这有点痛苦，所以我想我会看看是否有人有更好的解决方法。

4

2 回答 2

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 小，因此您应该以这种方式计算圆弧半径：

'内边框的角半径' = '外边框的角半径' - '内边框的边框厚度'/2。

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

编辑：我认为这个 SO可以更好地回答你的问题。

于 2011-08-10T21:07:42.877 回答
0

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

<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>
于 2011-08-10T21:18:44.603 回答