Border Corner Radius Fill Atrocity

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> 

Он не заполняет правильно, когда углы имеют радиус, хотя. Вот изображение в нижнем левом углу:

Вы можете ясно видеть яркий фон сияющий через темный передний план. Есть ли способ облегчить это?

EDIT: дополнительная картинка, показывая, что это фон просвечивает:

В этом случае, только белая половина фоне видно, в то время как черная половина (а также получать через) на самом деле не обнаруживается.

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> 

So внешние использования 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 IsInt такой же, как Border.Background, так что кажется, что вы видите яркий фон сияющий через темный передний план, но я думаю, что его просто ваш Border.BorderBrush.

Answer 3

Еще одна опция: Я написал подкласс границы, который фиксирует сглаживание. Последний код here. Используйте, как хотите.