Border Corner Radius Điền sự tàn ác

Question

Tôi có một biên giới được xác định như sau:

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

Nó không điền chính xác khi các góc có bán kính, mặc dù. Dưới đây là hình ảnh của góc dưới bên trái:

Bạn có thể thấy rõ nền sáng chiếu xuyên qua tiền cảnh tối hơn. Có cách nào để giảm bớt điều này không?

EDIT: hình ảnh bổ sung, cho thấy rằng nó là nền sáng qua:

Trong trường hợp này, chỉ có một nửa màu trắng của nền được xem, trong khi một nửa màu đen (đồng thời cũng nhận được thông qua) không thực sự phát hiện được.

Answer 1

Trong trường hợp này, tôi thường lồng hai Borders vào nhau. Điều này chỉ hoạt động nếu màu tô bên trong sẽ mờ đục, nhưng bạn đã làm như vậy thì điều này sẽ ổn thôi.

Vì vậy, thay vì, ví dụ (sử dụng màu sắc rắn thay vì gradient để làm ví dụ dễ dàng hơn để làm theo):

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

bạn thay vì có thể sử dụng:

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

Vì vậy, việc sử dụng biên ngoài màu "biên giới" là Background và sau đó viền bên trong đặt Margin thành "chiều rộng đường viền" và sau đó sử dụng màu "nền" thực cho Background của nó. Hiệu ứng là như nhau, nhưng đường may bán trong suốt đã biến mất.

Để làm cho nó trông đúng, bạn cần phải chỉnh đường viền bên trong CornerRadius - nó nằm trong biên giới, do đó, nó là bán kính hơi nhỏ hơn góc ngoài. Nếu đường viền rộng 1 pixel, thì bạn muốn số CornerRadius của mình nhỏ hơn 1 pixel; nhưng kể từ khi bạn có một biên giới không đồng đều, có thể bạn sẽ chỉ muốn nhãn cầu nó để xem những gì có vẻ đúng.

Answer 2

Đó là vì BorderThickness ans BorderBrush mà bạn đã đặt. Hãy thử nó như thế này:

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

Các Border.BorderBrush isint giống như Border.Background nên nó có vẻ như bạn nhìn thấy nền sáng chiếu xuyên qua tiền cảnh tối hơn nhưng tôi nghĩ rằng nó chỉ Border.BorderBrush của bạn.

Answer 3

Một tùy chọn khác: Tôi đã viết một lớp con của Border để sửa lỗi khoảng cách chống răng cưa. Mã mới nhất here. Sử dụng tuy nhiên bạn muốn.