WPF: шаблон кнопки с углом и радиусом выглядит неправильно - PullRequest
Новая
       23

WPF: шаблон кнопки с углом и радиусом выглядит неправильно

2 голосов
/ 29 июля 2010

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

Угол, из которого исходит световой угол, - это белый осколок с прямым углом. Возможно, из-за светового эффекта, но это очень очевидно с помощью углового радиуса. Я не думаю, что я мог бы что-то с этим поделать (кроме очевидного, как не использовать 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>

1 Ответ

3 голосов
/ 31 июля 2010

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

РЕДАКТИРОВАТЬ: я опробовал предоставленный вами код, и я предполагаю, что «белый фрагмент»белые (иш) пиксели по углам?Что ж, проблема здесь связана с сглаживанием, которое также осветляет пиксели внутри углов.Поскольку вы используете темный тон, эти светлые пиксели выделяются, а кнопка выглядит не очень хорошо.

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

В любом случае есть два обходных пути:

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

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

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

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

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

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

...