Что такое темплейт?

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

Стили имеют ограниченные возможности изменения внешнего вида объекта, если хотите полностью изменить внешний вид объекта без применения методы и событий объектов, вам необходимо использовать темплейты.

Создание темплейта

Попробуем создать свой простейший темплейт, который мы будем использовать, применяя, его к различным нашим объектом.
Мы будем создавать наш темплейт в файле App.xaml, чтобы сделать его глобальным. Это сделает его доступным во всех объектах нашего приложения.
Создаем ресурс для нашего приложения, далее создадим стиль, у ресурса обозначив к какому мы будем применять данный темплейт, в данном случае это будет кнопка (TargetType=”Button”) и дадим ему название (x:Key=”RoundButton”).
В разделе Setter указываем свойство Property=”Template”, это означает, что мы указываем что с этого места будет описан наш темлпейт. В разделе Setter.Value – уже создаем непосредственно наш темплейт.

Код XAML:

<Application
xmlns=”http://schemas.microsoft.com/client/2007″
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
x:Class=”SilverlightApplication2.App”>
<Application.Resources>
<Style x:Key=”RoundButton” TargetType=”Button”>
<Setter Property=”Template”>
<Setter.Value>
<!—Здесь будет наш описан вид нашего шаблона –>
</Application.Resources>
</Application>

Теперь добавим код нашего темплейта, он будет состоять таблицы, которая будет содержать Ellipse с линейным градиентом, и текстовым полем, которые будет содержать определенный текст.

Код XAML:

<Application
xmlns=”http://schemas.microsoft.com/client/2007″
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
x:Class=”SilverlightApplication2.App”>
<Application.Resources>
<Style x:Key=”RoundButton” TargetType=”Button”>
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”Button”>
<Grid>
<Ellipse Width=”70″ Height=”70″>
<Ellipse.Fill>
<LinearGradientBrush EndPoint=”0.3,0.7″ StartPoint=”0.6,0.4″>
<GradientStop Color=”#FFAFCEF4″/>
<GradientStop Color=”#FF1D5B72″ Offset=”1″/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<TextBlock Text=”Click” HorizontalAlignment=”Center”
VerticalAlignment=”Center” FontSize=”14″ FontFamily=”Arial” />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key=”MyStyle” TargetType=”TextBlock”>
<Setter Property=”HorizontalAlignment” Value=”Left” />
<Setter Property=”FontSize” Value=”14″ />
<Setter Property=”Foreground” Value=”Blue” />
</Style>
<!– Resources scoped at the Application level should be defined here. –>
</Application.Resources>
</Application>

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

Код XAML:

<Button x:Name=”Go” Style=”{StaticResource RoundButton}” Height=”100″ Width=”100″ Canvas.Top=”100″ Canvas.Left=”100″ />

Теперь видно, что наша кнопка приобрела точно такой вид, который мы описали в темплейте, и сразу стало понятно, почему мы не можем добиться, точно также результата та, используя стили. Здесь можно добиться очень интересных эффектов, но это уже оставлю, для работы вашей фантазии.

Динамическое изменение данных темплейта

Но есть некоторые неудобства, нам не всегда надо чтобы, кнопка содержала один и тот же текст и была одного и того же размера. А у нашего темплейта эти значения зафиксированы (70), что явно делает использование их не гибким и неудобным. Для этого использует DataBinding – привязка к данным.

Поменяв атрибуты у Ellipse –а на Width=”{TemplateBinding Width}” Height=”{TemplateBinding Height}”, мы получим значения которые у нас используются, непосредственно в нашем обекте в данном случае Height=”100″ Width=”100″.

Посмотрим результат размер нашей кнопки действительно изменился.

Теперь, чтобы добиться, того, что наш текст динамически поменяется необходимо заменить TextBlock на ContentPresenter, это даст наш широкие возможности использовать нетолько TextBlock, но и другие любые объекты, которые доступны в разделе Content. И позволит управлять любыми свойствами объектов наследоваными от объектов типа ContentControl.

Код XAML:

<Application
xmlns=”http://schemas.microsoft.com/client/2007″
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
x:Class=”SilverlightApplication2.App”>
<Application.Resources>
<Style x:Key=”RoundButton” TargetType=”Button”>
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”Button”>
<Grid>
<Ellipse Width=”{TemplateBinding Width}” Height=”{TemplateBinding Height}”>
<Ellipse.Fill>
<LinearGradientBrush EndPoint=”0.3,0.7″ StartPoint=”0.6,0.4″>
<GradientStop Color=”#FFAFCEF4″/>
<GradientStop Color=”#FF1D5B72″ Offset=”1″/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter Content=”{TemplateBinding Content}”
FontSize=”{TemplateBinding FontSize}”
FontFamily=”{TemplateBinding FontFamily}”
HorizontalAlignment=”Center”
VerticalAlignment=”Center”
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>

Теперь создадим несколько объектов, с разным свойствами контента.
Что позволит нам наглядно увидеть, что к нашему темплейту применяются разные свойства при одном внешнем виде.

Код XAML:

<Canvas x:Name=”LayoutRoot” Background=”White” >
<Button x:Name=”Button1″ Style=”{StaticResource RoundButton}” Height=”200″ Width=”200″ Canvas.Top=”100″ Canvas.Left=”50″>
<Button.Content>
<TextBlock Text=”PUSH ME” FontSize=”60″ FontFamily=”Arial” />
</Button.Content>
</Button>
<Button x:Name=”Button2″ Style=”{StaticResource RoundButton}” Height=”150″ Width=”300″ Canvas.Top=”300″ Canvas.Left=”150″>
<Button.Content>
<TextBlock Text=”PUSH ME” FontSize=”40″ FontFamily=”Verdana” />
</Button.Content>
</Button>
<Button x:Name=”Button3″ Style=”{StaticResource RoundButton}” Height=”300″ Width=”150″ Canvas.Top=”100″ Canvas.Left=”450″>
<Button.Content>
<TextBlock Text=”PUSH ME” FontSize=”20″ FontFamily=”Comic Sans MS” />
</Button.Content>
</Button>
</Canvas>

И так я показал, здесь основы применения темплейтов. Теперь создавая, свои интересные и фантастические темплейты вы сможете, создавать интересные приложения, прилагая к этому минимум усилий, и сможете поддерживать единную концепцию всего вашего приложения.

Примеры темплейтов:

Примеры темплейтов

Popularity: 16% [?]