WPF: шаблон кнопки w/cornerRadius и Bevel выглядит неправильно

Question

Я изменил ControrTemplate кнопки, дал ей границу с CornerRadius и BevelBitmpaEffect. Выглядит достаточно прилично для минимальных усилий. Поместите его на цветной фон, а затем проблема станет очевидной.

Угол, из которого вытекает светлый свет, есть белый снип с прямоугольным углом. Возможно, исходя из светового эффекта, но очень очевидного с cornerRadius. Я не думаю, что я мог бы что-нибудь с этим сделать (кроме очевидного, как не использовать cornerRadius)?

EDIT:

Этот код должен генерировать ту же проблему для вас

<Style x:Key="TabButtons" TargetType="Button"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Border CornerRadius="8" 
         SnapsToDevicePixels="True" 
         Name="BtnBorder" 
         Width="80" 
         Height="35" 
         BorderThickness="1" 
         BorderBrush="DarkBlue"> 
        <Border.Background> 

         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
          <GradientStop Color="LightBlue" Offset="0" /> 
          <GradientStop Color="DarkBlue" Offset="1" /> 
         </LinearGradientBrush> 

        </Border.Background> 
        <Border.BitmapEffect> 
         <BevelBitmapEffect BevelWidth="5" 
              EdgeProfile="CurvedOut" 
              LightAngle="135" 
              Relief="0.1" 
              Smoothness="1" /> 
        </Border.BitmapEffect> 
        <ContentPresenter Name="BtnContent" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Content" /> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Используйте эту кнопку на фоне LightBlue, например

<Border Background="LightBlue" > 
    <Button Style={StaticResource TabButtons} >Test</Button> 
</Border> 

Answer 1

Я не могу себе представить, что проблема точно выглядит, но вот одно предложение - попробуйте установить SnapsToDevicePixels в true для затронутой кнопки или, возможно, всего окна. Проблема может возникнуть из-за того, что WPF по умолчанию хочет выполнять независимую от устройства рендеринг. Который заставляет кромки управления слегка «отбирать» соседние пиксели из-за ширины/высоты, а DPI/пиксели точно не выравниваются. Установка SnapsToDevicePixels в true, заставит WPF точно отображать пиксели устройства, а эффект «кровотечения» исчезнет ...

EDIT: Я попробовал код, который вы предоставили, и я полагаю, что «белый снип» - это белые (иш) пиксели вокруг углов? Ну, проблема здесь связана с сглаживанием, что также облегчает пиксели внутри углов. Поскольку вы используете темный тон, эти более светлые пиксели выделяются, и кнопка выглядит не так красиво.

Я не уверен, что это можно считать ошибкой. Вы могли бы подумать, что антилечение сделает магию на пикселях, составляющих угол и за углом, но каждый пиксель внутри угла должен быть окрашен в цвет фона. Затем снова это может быть дизайн, что сглаживающий должен связываться с пикселями внутри угла, а в противном случае вы не получите желаемого эффекта ...

Во всяком случае есть два пути:

1) Дайте границе следующее свойство RenderOptions.EdgeMode = "Aliased". Это отключит сглаживание (0% белых (иш) пикселей), но элемент управления будет выглядеть очень неровно.

2) Используйте две границы. Внешняя граница будет определяться так же, как вы определили текущую границу, установите для свойства Background только DarkBlue. Затем для этой внешней границы создайте другую границу как дочерний элемент. Для этого внутреннего пограничного набора CornerRadius = 7 RenderOptions.EdgeMode = "Aliased" и определите Background с LinearGradientBrush. Внутренняя граница будет содержать ContentPresenter. Код будет выглядеть следующим образом:

<Border CornerRadius=8 Background=DarkBlue> 
    <Border CornerRadius=7 RenderOptions.EdgeMode="Aliased"> 
     <Border.Background> 
      ... 
     </Border.Background> 

     <ContentPresenter /> 
    </Border> 
</Border> 

Это не позволит избавиться от белых пикселей 100%, но это лучший компромисс, я думаю. Невооруженным глазом я не мог видеть белых пикселей, но когда я увеличил масштаб с помощью инструмента лупы, я подсчитал всего 2 пикселя на угол и только в нижних углах. Раньше это было что-то вроде 8 пикселей за угол. По крайней мере внешняя граница все еще сглажена, и контроль не выглядит неровным.

BevelBitmapEffect не имеет никакого отношения к внешнему виду элемента управления, поэтому я просто пропустил его.