Язык программирования C#9 и платформа .NET5 - Троелсен Эндрю

          VerticalAlignment="Center"

          HorizontalAlignment="Center"

          FontWeight="Bold" FontSize="20" Content="OK!"/>

      </Grid>

    </ControlTemplate>

  </Button.Template>

</Button>

Здесь определен шаблон, который состоит из именованного элемента Grid, содержащего именованные элементы Ellipse и Label. Поскольку в Grid не определены строки и столбцы, каждый дочерний элемент укладывается поверх предыдущего элемента управления, позволяя центрировать содержимое. Если вы теперь запустите приложение, то заметите, что событие Click будет инициироваться только в ситуации, когда курсор мыши находится внутри границ элемента Ellipse (т.е. не на углах, окружающих эллипс). Это замечательная возможность архитектуры шаблонов WPF, т.к. нет нужды повторно вычислять попадание курсора, проверять граничные условия или предпринимать другие низкоуровневые действия. Таким образом, если шаблон использует объект Polygon для отображения какой-то необычной геометрии, тогда можно иметь уверенность в том, что детали проверки попадания курсора будут соответствовать форме элемента управления, а не более крупного ограничивающего прямоугольника.

Шаблоны как ресурсы

В текущий момент ваш шаблон внедрен в специфический элемент управления Button, что ограничивает возможности его многократного применения. В идеале шаблон круглой кнопки следовало бы поместить в словарь ресурсов, чтобы его можно было использовать в разных проектах, или как минимум перенести в контейнер ресурсов приложения для многократного применения внутри проекта. Давайте переместим локальный ресурс Button на уровень приложения, вырезав определение шаблона из разметки Button и вставив его в дескриптор Application.Resources внутри файла Арр.xaml. Добавьте атрибуты Key и TargetType:

<Application.Resources>

  <ControlTemplate x:Key="RoundButtonTemplate" TargetType="{x:Type Button}">

    <Grid x:Name="controlLayout">

      <Ellipse x:Name="buttonSurface" Fill="LightBlue"/>

    <Label x:Name="buttonCaption" VerticalAlignment="Center"

       HorizontalAlignment="Center"

       FontWeight="Bold" FontSize="20" Content="OK!"/>

    </Grid>

  </ControlTemplate>

</Application.Resources>

(window.adrunTag = window.adrunTag || []).push({v: 1, el: 'adrun-4-390', c: 4, b: 390})

Модифицируйте разметку для Button, как показано далее:

<Button x:Name="myButton" Width="100" Height="100"

  Click="myButton_Click"

<b>  Template=&quot;{StaticResource RoundButtonTemplate}&quot;&gt;</b>

&lt;/Button&gt;

Из-за того, что этот ресурс доступен всему приложению, можно определять любое количество круглых кнопок, просто применяя имеющийся шаблон. В целях тестирования создайте два дополнительных элемента управления Button, которые используют данный шаблон (обрабатывать событие Click для них не нужно):

&lt;StackPanel&gt;

  &lt;Button x:Name=&quot;myButton&quot; Width=&quot;100&quot; Height=&quot;100&quot;

    Click=&quot;myButton_Click&quot;

    Template=&quot;{StaticResource RoundButtonTemplate}&quot;&gt;&lt;/Button&gt;

  &lt;Button x:Name=&quot;myButton2&quot; Width=&quot;100&quot; Height=&quot;100&quot;

    Template=&quot;{StaticResource RoundButtonTemplate}&quot;&gt;&lt;/Button&gt;

  &lt;Button x:Name=&quot;myButton3&quot; Width=&quot;100&quot; Height=&quot;100&quot;

    Template=&quot;{StaticResource RoundButtonTemplate}&quot;&gt;&lt;/Button&gt;

&lt;/StackPanel&gt;

Встраивание визуальных подсказок с использованием триггеров

При определении специального шаблона также удаляются все визуальные подсказки стандартного шаблона. Например, стандартный шаблон кнопки содержит разметку,которая задает внешний вид элемента управления при возникновении определенных событий пользовательского интерфейса, таких как получение фокуса, щелчок кнопкой мыши, включение (или отключение) и т.д. Пользователи довольно хорошо приучены к визуальным подсказкам подобного рода, т.к. они придают элементу управления некоторую осязаемую реакцию. Тем не менее, в шаблоне RoundButtonTemplate разметка такого типа не определена и потому внешний вид элемента управления остается идентичным независимо от действий мыши. В идеальном случае элемент должен выглядеть немного по-другому, когда на нем совершается щелчок (возможно, за счет изменения цвета или отбрасывания тени), чтобы уведомить пользователя об изменении визуального состояния.

Задачу можно решить с применением триггеров, как вы только что узнали. Для простых операций триггеры работают просто великолепно. Существуют дополнительные способы достижения цели, которые выходят за рамки настоящей книги, но больше информации доступно по адресу https://docs.microsoft.com/ru-ru/dotnet/desktop/wpf/controls/how-to-create-apply-template.

В качестве примера обновите шаблон RoundButtonTemplate разметкой, которая добавляет два триггера. Первый триггер будет изменять цвет фона на синий, а цвет переднего плана на желтый, когда курсор находится на поверхности элемента управления. Второй триггер уменьшит размеры элемента Grid (а также его дочерних элементов) при нажатии кнопки мыши, когда курсор расположен в пределах элемента.