Border Raggio Fill Atrocity

Question

ho una frontiera definita in questo modo:

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

Non riempire correttamente quando gli angoli hanno un raggio, però. Ecco un'immagine della nell'angolo in basso a sinistra:

si può vedere chiaramente lo sfondo luminoso che splende attraverso il primo piano più scuro. C'è un modo per alleviare questo?

EDIT: foto aggiuntive, dimostrando che è lo sfondo che splende attraverso:

In questo caso, solo la metà bianca dello sfondo si vede, mentre la metà nera (ma anche di ottenere attraverso) non è davvero rilevabile.

Answer 1

In questo caso, di solito annido due bordi l'uno dentro l'altro. Funziona solo se il colore di riempimento interno è opaco, ma il tuo è già così dovrebbe andare bene.

Così, invece di, per esempio (utilizzando colori solidi invece di gradienti per rendere l'esempio più facile da seguire):

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

si potrebbe invece utilizzare:

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

Così gli usi bordo esterno il colore "bordo" come Background, quindi il bordo interno imposta il suo Margin sulla "larghezza del bordo" e quindi utilizza il colore reale "sfondo" per il suo Background. L'effetto è lo stesso, ma la cucitura semitrasparente è sparita.

Per farlo sembrare corretto, è necessario modificare il bordo interno CornerRadius - è all'interno del bordo, quindi è un raggio leggermente più piccolo rispetto all'angolo esterno. Se il bordo era largo 1 pixel, allora il tuo CornerRadius deve essere più piccolo di 1 pixel; ma dal momento che hai un bordo irregolare, probabilmente vorrai solo guardarlo per vedere cosa sembra giusto.

Answer 2

È dovuto al BorderThickness e al BorderBrush impostato. Prova in questo modo:

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

Il Border.BorderBrush isint lo stesso del Border.Background così sembra come si vede sullo sfondo luminoso che splende attraverso il primo piano più scuro, ma credo che il suo solo la tua Border.BorderBrush.

Answer 3

Un'altra opzione: Ho scritto una sottoclasse di Border che corregge il gap antialiasing. Ultimo codice here. Usa comunque come desideri.