边角半径填补暴行

Question

我的边框定义如下：

<Border x:Name="BaseBar" BorderThickness="1,1,1,2" Height="29" CornerRadius="0,0,16,16" Grid.Row="2">
<Border.BorderBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF6E6E6E" Offset="0.004"/>
        <GradientStop Color="#FF1A1A1A" Offset="0.043"/>
    </LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF313131" Offset="0"/>
        <GradientStop Color="#FF232323" Offset="1"/>
    </LinearGradientBrush>
</Border.Background>

但是当角落有半径时，它没有正确填充。这是左下角的图像：

你可以清楚地看到更明亮的背景在更暗的前景中闪耀。有没有办法减轻这种情况？

编辑：附加图片，显示它是背景照亮：

在这种情况下，只能看到背景的白色一半，而黑色的一半（同时也通过）是不可检测的。

Answer 1

在这种情况下，我通常将两个边框嵌套在一起。这只有在内部填充颜色不透明的情况下才有效，但是你的颜色已经是这样了，这应该没问题。

因此，而不是（例如使用纯色而不是渐变来使示例更容易理解）：

<Border BorderThickness="1,1,1,2" CornerRadius="0,0,16,16"
        BorderBrush="Blue" Background="Gray">
  ...
</Border>

你可以改用：

<Border CornerRadius="0,0,16,16" Background="Blue">
  <Border CornerRadius="0,0,15,15" Background="Gray" Margin="1,1,1,2">
    ...
  </Border>
</Border>

因此外边框使用“边框”颜色作为其Background，然后内边框将其Margin设置为“边框宽度”，然后使用真正的“背景”颜色Background。效果是一样的，但半透明的缝隙消失了。

为了使它看起来正确，你需要调整内边框的CornerRadius - 它在边框内，所以它的半径比外边角略小。如果边框宽度为1像素，那么您希望CornerRadius小1像素;但是由于你的边框不平整，你可能只是想看看它看起来是正确的。

Answer 2

因为你设置了BorderThickness和BorderBrush。 试试这样：

    <Border x:Name="BaseBar" BorderThickness="0" Height="29" CornerRadius="0,0,16,16">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF313131" Offset="0"/>
                <GradientStop Color="#FF232323" Offset="1"/>
            </LinearGradientBrush>
        </Border.Background>
    </Border>

Border.BorderBrush与Border.Background相同，所以看起来你看到更明亮的背景在更暗的前景中闪耀，但我认为它只是你的Border.BorderBrush。

Answer 3

还有一个选项：我写了一个Border的子类来修复抗锯齿差距。最新代码here。但是你可以随意使用。