Страницы

Поиск по вопросам

вторник, 13 ноября 2018 г.

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

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


Ответ

Чтобы кнопка была действительно треугольной, необходимо переопределить ее шаблон.
Чтобы не писать шаблон с нуля полностью, я возьму за основу стандартный, для этого в 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

Комментариев нет:

Отправить комментарий