Создание и использование шаблонов

Визуальные элементы в Universal Windows Platform уже имеют встроенные предопределенные шаблоны, которые определяют визуальное дерево элементов. Но при необходимости мы можем их переопределить по своим потребностям. Например, мы можем сделать круглую кнопку, а не прямоугольную. Главное, чтобы после переопределения шаблонов все использующиеся элементы сохраняли стилевое единообразие.

Итак, для примера создадим округлую кнопку:

<Page
    x:Class="TemplateApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TemplateApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <ControlTemplate TargetType="Button" x:Key="btTemplate">
            <Border CornerRadius="25" BorderBrush="CadetBlue" BorderThickness="2"
                    Background="LightBlue" Height="40" Width="100" >
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="Hello" />
            </Border>
        </ControlTemplate>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="myButton" Template="{StaticResource btTemplate}" HorizontalAlignment="Center">Hello</Button>
    </Grid>
</Page>

В результате у нас получится следующая кнопка:

Шаблоны можно в виде отдельных ресурсов. Так, здесь с помощью элемента ControlTemplate определяется ресурс с ключом "btTemplate". В ControlTemplate вложены элементы Border и ContentPresenter, которые с помощью атрибутов определяют внешний вид кнопки.

TemplateBinding

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

<Button x:Name="myButton" Template="{StaticResource btTemplate}" Background="Red" HorizontalAlignment="Center">UWP</Button>

Чтобы можно было устанавливать ряд свойств из самого элемента, к которому применяется шаблон, необходимо использовать элемент TemplateBinding. Он служит для установки в шаблоне привязки к свойствам элемента. Так, изменим шаблон следующим образом:

<Page
    x:Class="TemplateApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TemplateApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <ControlTemplate TargetType="Button" x:Key="btTemplate">
            <Border CornerRadius="25" 
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"
                    Height="{TemplateBinding Height}"
                    Width="{TemplateBinding Width}">
                <ContentPresenter Margin="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding Content}" />
            </Border>
        </ControlTemplate>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="myButton" Template="{StaticResource btTemplate}" HorizontalAlignment="Center" 
                Height="40" Width="100" Background="LightPink">Hello</Button>
    </Grid>
</Page>

Выражение типа Background="{TemplateBinding Background}" в элементе Border указывает, что фон элемента Border будет привязан к свойству Background элемента Button. Таким образом, здесь практически все свойства Border и ContentControl (кроме свойства CornerRadius) устанавливаются из разметки элемента Button.

Свойство Template

С помощью свойства Template можно определить шаблон напрямую в самом элементе:

<Button x:Name="myButton" HorizontalAlignment="Center" 
    Height="40" Width="100" Background="LightPink" Content="UWP">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border CornerRadius="25" 
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}"
                Height="{TemplateBinding Height}"
                Width="{TemplateBinding Width}">
                <ContentPresenter Margin="{TemplateBinding Padding}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    Content="{TemplateBinding Content}" />
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>