Как сделать button в виде треугольника в WPF?

#c_sharp #wpf

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


    

Ответы

Ответ 1

Чтобы кнопка была действительно треугольной, необходимо переопределить ее шаблон.

Чтобы не писать шаблон с нуля полностью, я возьму за основу стандартный, для этого
в Visual Studio в дизайнере щелкаем правой по кнопке и выбираем Edit Template-Edit
a Copy... и вводим желаемое название шаблона и выбираем место его расположения (можно
просто нажать OK и переместить/переименовать позже вручную).

Студия добавит стандартный шаблон кнопки, редактируем его: ищем 
у меня там такой шаблон:


    



В другой ОС он может отличаться, правим его:




Кнопка будет простая и не будет уметь содержать контент, поэтому одного Path достаточно.

Смотрим теперь те места, что подчеркнуты синим, наименования свойств у Border и Path
отличаются, поэтому надо эти места поправить, кисть для границы называется Stroke (вместо
BorderBrush), а кисть для заливки — Fill (вместо Background). Контента нет, поэтому
строчку  удаляю полностью.

Триггеры поправлены, синих подчеркиваний не должно остаться, дизайнер должен заработать,
можно запустить и проект. Кнопка, в принципе, уже функционирует нормально, но если
с помощью клавиши Tab установить на нее фокус, то мы увидим, что он прямоугольный.
За фокус отвечает свойство FocusVisualStyle, видим в стиле, что он устанавливается
так: , т.е.
необходимо отредактировать также ресурс FocusVisual, там сейчас находится Rectangle,
мы возьмем наш уже готовый Path, но без заливки и с прерывистой границей (как и было
у Rectangle):




Видим, что геометрия Path повторяется дважды, чтобы избежать дублирования, вынесем
ее отдельным ресурсом:

M12,24 L36,0 L36,48 Z


Тогда в Path достаточно будет указать Data="{StaticResource Geometry}"

Ну и напоследок можно поудалять ненужные сеттеры из стиля, которые касаются контента.

Еще, для того, чтобы иметь возможность получить кнопки со стрелками еще и вниз/вверх/вправо,
добавим в ресурсы следующие трансформации:






В итоге весь пример целиком выглядит следующим образом:


    M12,24 L36,0 L36,48 Z
    
    
    
    
    
    
    
    
    
    
    
    
    



    

    

    

    



Стили (к примеру, в App.xaml):





В итоге получаем разные стрелки:





Если эти кнопки надо переиспользовать много раз, то можно и свойство RenderTransform
положить в отдельные стили для каждого направления стрелки.

MainWindow.xaml


    

    

    

    



App.xaml