Визуальные элементы в 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, которые с помощью атрибутов определяют внешний вид кнопки.
Вышеопределенный шаблон устанавливал цвет и ряд других параметров, которые мы не могли бы изменить из кода самой кнопки. Например, если мы установим в кнопке цвет фона, то этот цвет никак не повлияет на кнопку:
<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 можно определить шаблон напрямую в самом элементе:
<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>