Border Radio de esquina Rellena Atrocidad

Question

He una frontera definida de esta manera:

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

No llenar correctamente cuando las esquinas tienen un radio, sin embargo. Aquí está una imagen de la esquina inferior izquierda:

se puede ver claramente el fondo más brillante que brilla a través del primer plano oscuro. ¿Hay alguna forma de aliviar esto?

EDIT: Foto adicional, demostrando que es el fondo que brilla a través:

En este caso, sólo la mitad blanca del fondo se ve, mientras que la mitad negro (mientras que también consigue a través) no es realmente detectable.

Answer 1

En este caso, suelo anidar dos bordes uno dentro del otro. Esto solo funciona si el color de relleno interno será opaco, pero el tuyo ya lo está, así que esto debería estar bien.

Así que en lugar de, por ejemplo (usando colores sólidos en lugar de gradientes para hacer el ejemplo más fácil de seguir):

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

se podría utilizar en su lugar:

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

Así que los usos borde externo el color "de borde" como Background, y luego el borde interior establece Margin en "ancho de borde" y luego utiliza el color de "fondo" real para su Background. El efecto es el mismo, pero la costura semitransparente se ha ido.

Para que se vea bien, necesita ajustar el borde interior CornerRadius - está dentro del borde, por lo que es un radio ligeramente más pequeño que la esquina exterior. Si el borde tenía 1 píxel de ancho, querría que su CornerRadius fuera 1 píxel más pequeño; pero como tienes un borde irregular, probablemente solo quieras mirarlo para ver qué se ve bien.

Answer 2

Es debido a la BorderThickness ans BorderBrush que ha establecido. Inténtelo así:

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

El Border.BorderBrush isint el mismo que el Border.Background por lo que parece que se ve el fondo más brillante que brilla a través del primer plano oscuro pero creo que es sólo su Border.BorderBrush.

Answer 3

Una opción más: Escribí una subclase de Border que corrige la brecha antialiasing. El último código here. Use como lo desee.