A template allows you to completely replace a an element’s visual tree with anything, while keeping its functionality in tact. For example you could make a button look like anything. You could design a very cool look using colors and gradients and whatever and have that be a button that still has its click event and other functionality. We set the Button’s Template property to a static resource that we’ve defined.

This is an example of a simple control template. The next example is more complex. In the following screenshot we’ve replaced the rectangular button with a circle. It is still clickable and more that that, only the circle itself is clickable. There is no rectangular shape behind the circle that is clickable.

Below is the XAML code. Notice the buttonTemplate. The Button is considered to be the templated parent of the elements in the control template’s visual tree.

<Window x:Class="TemplatesSimpleControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplatesSimpleControl"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="TemplatesSimpleControl" Height="150" Width="350">
    <Grid>
        <Grid.Resources>
            <ControlTemplate x:Key="buttonTemplate">
                <Grid>
                    <Ellipse Width="80" Height="80" Fill="LightBlue"/>
                    <TextBlock VerticalAlignment="Center" 
                               HorizontalAlignment="Center">Click Me</TextBlock>
                </Grid>
            </ControlTemplate>
        </Grid.Resources>
        <Button Name="Btn" Template="{StaticResource buttonTemplate}"
                Click="Btn_Click">OK</Button>
    </Grid>
</Window>

Move the Resource to the Window

For organization reasons we may want to move the resource to the Window.

<Window x:Class="TemplatesSimpleControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplatesSimpleControl"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="TemplatesSimpleControl" Height="150" Width="350">
    <Window.Resources>
        <ControlTemplate x:Key="buttonTemplate2">
            <Grid>
                <Ellipse Width="80" Height="80" Fill="LightGreen"/>
                <TextBlock VerticalAlignment="Center" 
                               HorizontalAlignment="Center">Click Me</TextBlock>
            </Grid>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <Button Name="Btn" Template="{StaticResource buttonTemplate2}"
                Click="Btn_Click">OK</Button>
    </Grid>
</Window>

Move the Resource to the Application Level

You could move it to the application level by putting it in the App.xaml file. The program will work.