В качестве примера обновите шаблон RoundButtonTemplate
разметкой, которая добавляет два триггера. Первый триггер будет изменять цвет фона на синий, а цвет переднего плана на желтый, когда курсор находится на поверхности элемента управления. Второй триггер уменьшит размеры элемента Grid
(а также его дочерних элементов) при нажатии кнопки мыши, когда курсор расположен в пределах элемента.
FontSize="20" FontWeight="Bold"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
Value="Blue"/>
Property="Foreground" Value="Yellow"/>
Property="RenderTransformOrigin" Value="0.5,0.5"/>
Property="RenderTransform">
Роль расширения разметки {TemplateBinding}
Проблема с шаблоном элемента управления связана с тем, что каждая кнопка выглядит и содержит тот же самый текст. Следующее обновление разметки не оказывает никакого влияния:
Background="Red" Content="Howdy!" Click="myButton_Click"
Template="{StaticResource RoundButtonTemplate}" />
Background="LightGreen" Content="Cancel!"
Template="{StaticResource RoundButtonTemplate}" />
Background="Yellow" Content="Format"
Template="{StaticResource RoundButtonTemplate}" />
Причина в том, что стандартные свойства элемента управления (такие как BackGround
и Content
) переопределяются в шаблоне. Чтобы они стали доступными, их потребуется отобразить на связанные свойства в шаблоне. Решить такие проблемы можно за счет использования расширения разметки {TemplateBinding}
при построении шаблона. Оно позволяет захватывать настройки свойств, которые определены элементом управления, применяющим шаблон, и использовать их при установке значений в самом шаблоне.
Ниже приведена переделанная версия шаблона RoundButtonTemplate
, в которой расширение разметки {TemplateBinding}
применяется для отображения свойства Background
элемента Button
на свойство Fill
элемента Ellipse
; здесь также обеспечивается действительная передача значения Content
элемента Button
свойству Content
элемента Label
:
FontSize="20" FontWeight="Bold" HorizontalAlignment="Center"
VerticalAlignment="Center" />
После такого обновления появляется возможность создания кнопок с разными цветами и текстом. Результат обновления разметки XAML представлен на рис.27.13.
Роль класса ContentPresenter
При проектировании шаблона для отображения текстового значения элемента управления использовался элемент Label
. Подобно Button
он поддерживает свойство Content
. Следовательно, если применяется расширение разметки {TemplateBinding}
, тогда можно определять элемент Button
со сложным содержимым, а не только с простой строкой.
Но что, если необходимо передать сложное содержимое члену шаблона, который Content
? Когда в шаблоне требуется определить обобщенную Label
или TextBox
) можно использовать класс ContentPresenter
. Хотя в рассматриваемом примере в этом нет нужды, ниже показана простая разметка, иллюстрирующая способ построения специального шаблона, который применяет класс ContentPresenter
для отображения значения свойства Content
элемента управления, использующего шаблон:
Встраивание шаблонов в стили
В данный момент наш шаблон просто определяет базовый внешний вид и поведение элемента управления Button
. Тем не менее, за процесс установки базовых свойств элемента управления (содержимого, размера шрифта, веса шрифта и т.д.) отвечает сам элемент Button
:
FontWeight="Bold"
Template="{StaticResource RoundButtonTemplate}"
Click="myButton_Click"/>
При желании значения базовых свойств можно устанавливать в App.xaml
, которому назначен ключ RoundButtonSyle
: