Using XAML Control Templates In UWP

Things we are going to discuss:

What is a Control Template?
Why we need them.
How to make Templates for Different Controls
Getting started with a simple example

Let's discuss each one by one.

Control Templates

In general, Template is like a blueprint or a map of a building that has not been built yet. So, in XAML, Control Template is used to give control to a totally new custom shape.

Each control in XAML has a default built-in Control Template and it follows that default template to build its visual appearance.

Why we need control Templates:

Well, we cannot always use default templates. And, we want to make our UI more attractive and user-friendly.

Look at the regular button below. Also, see its extended form using a Control Template.

UWP

This is the extended form of the same button which has been made of many things like an image, some text, and border with some radius property.

UWP

How to make templates for different controls

We can make templates just like we make styles or in HTML, we make CSS for different Controls. In XAML, we make Control Templates as resources. These resources can either be local or global.

Getting started with a simple example

Let's make a button that uses a Control Template like above in the picture.

Make a new empty UWP Project in Visual Studio and name it.

UWP

Place a Button Control in Empty Grid.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button HorizontalAlignment="Center" > Click Me </Button>
</Grid>

The button will be placed in the middle of app.

Now, we have to make a Control Template for this button. We’ll make this template as a local resource in "Page Resources" section over here.

UWP

Now, place all the code for Control Template here.

<Style TargetType="Button" x:Key="ButtonTemplate" >
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="LightBlue" BorderThickness="8" CornerRadius="8" >
<StackPanel Orientation="Horizontal" Background="AliceBlue"
Height="28" Padding="3" >
<SymbolIcon Symbol="AddFriend" VerticalAlignment="Center" ></SymbolIcon>
<ContentPresenter VerticalAlignment="Center" />
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

An important thing I would like to tell you is that if you want to work with Control Templates, you must have basic knowledge of resources in XAML. If you don’t know how to use resources and what they are you can read here.

<ContentPresenter/> also needs an explanation in the above XAML Code.

This tag is just like a placeholder in a Control Template for the content you are going to use in your Control. In our case, Button will have a content of type “string “ and that string will be loaded or rendered at the place in Control Template where you’ve written this tag.

Now, this is a Style and we’ll use it in Control through binding, so update button definition with style.

<Button HorizontalAlignment="Center" Style="{StaticResource ButtonTemplate}" > Click Me </Button>

Our template is a static resource currently. That’s why we are consuming it as a static resource.

After this, our button will look like the following.

UWP

now you can apply this Design ( Control Template ) to any other button as well. In the same way you can also design Templates for other controls too.