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

<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>

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

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

  Click="myButton_Click"

  Template="{StaticResource RoundButtonTemplate}">

</Button>

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

<StackPanel>

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

    Click="myButton_Click"

    Template="{StaticResource RoundButtonTemplate}"></Button>

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

    Template="{StaticResource RoundButtonTemplate}"></Button>

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

    Template="{StaticResource RoundButtonTemplate}"></Button>

</StackPanel>

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

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

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

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

<ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button" >

  <Grid x:Name="controlLayout">

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

    <Label x:Name="buttonCaption" Content="OK!"

      FontSize="20" FontWeight="Bold"

    HorizontalAlignment="Center"

      VerticalAlignment="Center" />

  </Grid>

    <ControlTemplate.Triggers>

      <Trigger Property="IsMouseOver" Value="True">

        <Setter TargetName="buttonSurface" Property="Fill"

          Value="Blue"/>

        <Setter TargetName="buttonCaption"

          Property="Foreground" Value="Yellow"/>

      </Trigger>

      <Trigger Property="IsPressed" Value="True">

        <Setter TargetName="controlLayout"

           Property="RenderTransformOrigin" Value="0.5,0.5"/>

        <Setter TargetName="controlLayout"

          Property="RenderTransform">

          <Setter.Value>

            <ScaleTransform ScaleX="0.8" ScaleY="0.8"/>

          </Setter.Value>

        </Setter>

      </Trigger>

  </ControlTemplate.Triggers>

</ControlTemplate>

Роль расширения разметки {TemplateBinding}

Проблема с шаблоном элемента управления связана с тем, что каждая кнопка выглядит и содержит тот же самый текст. Следующее обновление разметки не оказывает никакого влияния:

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

  Background="Red" Content="Howdy!" Click="myButton_Click"

  Template="{StaticResource RoundButtonTemplate}" />

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

  Background="LightGreen" Content="Cancel!"

  Template="{StaticResource RoundButtonTemplate}" />

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

  Background="Yellow" Content="Format"

  Template="{StaticResource RoundButtonTemplate}" />

Причина в том, что стандартные свойства элемента управления (такие как BackGround и Content) переопределяются в шаблоне. Чтобы они стали доступными, их потребуется отобразить на связанные свойства в шаблоне. Решить такие проблемы можно за счет использования расширения разметки {TemplateBinding} при построении шаблона. Оно позволяет захватывать настройки свойств, которые определены элементом управления, применяющим шаблон, и использовать их при установке значений в самом шаблоне.

Ниже приведена переделанная версия шаблона RoundButtonTemplate, в которой расширение разметки {TemplateBinding} применяется для отображения свойства Background элемента Button на свойство Fill элемента Ellipse; здесь также обеспечивается действительная передача значения Content элемента Button свойству Content элемента Label:

<Ellipse x:Name="buttonSurface" Fill="{TemplateBinding Background}"/>

<Label x:Name="buttonCaption" Content="{TemplateBinding Content}"

  FontSize="20" FontWeight="Bold" HorizontalAlignment="Center"

  VerticalAlignment="Center" />

После такого обновления появляется возможность создания кнопок с разными цветами и текстом. Результат обновления разметки XAML представлен на рис.27.13.

Роль класса ContentPresenter

При проектировании шаблона для отображения текстового значения элемента управления использовался элемент Label. Подобно Button он поддерживает свойство Content. Следовательно, если применяется расширение разметки {TemplateBinding}, тогда можно определять элемент Button со сложным содержимым, а не только с простой строкой.

Но что, если необходимо передать сложное содержимое члену шаблона, который не имеет свойства Content? Когда в шаблоне требуется определить обобщенную область отображения содержимого, то вместо элемента управления специфического типа (Label или TextBox) можно использовать класс ContentPresenter. Хотя в рассматриваемом примере в этом нет нужды, ниже показана простая разметка, иллюстрирующая способ построения специального шаблона, который применяет класс ContentPresenter для отображения значения свойства Content элемента управления, использующего шаблон:

<!-- Этот шаблон кнопки отобразит то, что установлено

     в свойстве Content размещающей кнопки -->

<ControlTemplate x:Key="NewRoundButtonTemplate" TargetType="Button">

  <Grid>

    <Ellipse Fill="{TemplateBinding Background}"/>

    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>

  </Grid>

</ControlTemplate>

Встраивание шаблонов в стили

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

<!-- Сейчас базовые значения свойств должен устанавливать

     сам элемент Button, а не шаблон -->

<Button x:Name="myButton" Foreground="Black" FontSize="20"

  FontWeight="Bold"

  Template="{StaticResource RoundButtonTemplate}"

  Click="myButton_Click"/>

При желании значения базовых свойств можно устанавливать в шаблоне. В сущности, таким способом фактически создаются стандартный внешний вид и поведение. Как вам уже должно быть понятно, это работа стилей WPF. Когда строится стиль (для учета настроек базовых свойств), можно определить шаблон внутри стиля! Ниже показан измененный ресурс приложения внутри файла App.xaml, которому назначен ключ RoundButtonSyle:

<!-- Стиль, содержащий