Нашел множество примеров как сделать круглые кнопки, но не одного решения о том как сделать в виде треугольника. Возможно ли это, или лучше использовать изображение для этой цели?
Ответ
Чтобы кнопка была действительно треугольной, необходимо переопределить ее шаблон.
Чтобы не писать шаблон с нуля полностью, я возьму за основу стандартный, для этого в Visual Studio в дизайнере щелкаем правой по кнопке и выбираем Edit Template-Edit a Copy... и вводим желаемое название шаблона и выбираем место его расположения (можно просто нажать OK и переместить/переименовать позже вручную).
Студия добавит стандартный шаблон кнопки, редактируем его: ищем
В другой ОС он может отличаться, правим его:
Кнопка будет простая и не будет уметь содержать контент, поэтому одного Path достаточно.
Смотрим теперь те места, что подчеркнуты синим, наименования свойств у Border и Path отличаются, поэтому надо эти места поправить, кисть для границы называется Stroke (вместо BorderBrush), а кисть для заливки — Fill (вместо Background). Контента нет, поэтому строчку
Триггеры поправлены, синих подчеркиваний не должно остаться, дизайнер должен заработать, можно запустить и проект. Кнопка, в принципе, уже функционирует нормально, но если с помощью клавиши Tab установить на нее фокус, то мы увидим, что он прямоугольный. За фокус отвечает свойство FocusVisualStyle, видим в стиле, что он устанавливается так:
Видим, что геометрия Path повторяется дважды, чтобы избежать дублирования, вынесем ее отдельным ресурсом:
Тогда в Path достаточно будет указать Data="{StaticResource Geometry}"
Ну и напоследок можно поудалять ненужные сеттеры из стиля, которые касаются контента.
Еще, для того, чтобы иметь возможность получить кнопки со стрелками еще и вниз/вверх/вправо, добавим в ресурсы следующие трансформации:
В итоге весь пример целиком выглядит следующим образом:
Комментариев нет:
Отправить комментарий