Simple Template Definition in Silverlight PRO

Templates allow us to apply a set of design rules on the controls we have on our page. They change the visual face of every common control. Unlike styles, when using a template we are not limited for those properties that were defined in the Element class. Templates are limited for those elements that extend the Control class. We cannot use them on others. Every control has a built-in recipe that determines how it should be rendered. This recipe is known as the control template. The template is defined using XAML and is applied using the Template property.

<UserControl x:Class="SilverlightApplication28.MainPage"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <UserControl.Resources>
        <Color x:Key="MyBackgroundColor">#CCCCCCCC</Color>
        <ControlTemplate x:Key="MyButtonTemplate" TargetType="Button">
            <Border BorderBrush="Red" BorderThickness="4" 
                    CornerRadius="12" Background="{TemplateBinding Background}">
                <ContentPresenter>
                </ContentPresenter>
            </Border>
        </ControlTemplate>
        <Style x:Key="MyButtonStyle" TargetType="Button">
            <Setter Property="Foreground" 
                    Value="Blue"></Setter>
            <Setter Property="Background" 
                    Value="{StaticResource MyBackgroundColor}"></Setter>
            <Setter Property="Template" 
                    Value="{StaticResource MyButtonTemplate}"></Setter>
        </Style>
    </UserControl.Resources>
    <StackPanel x:Name="ApplicationLayout" Background="LightYellow" >
        <Button Style="{StaticResource MyButtonStyle}" 
                Content="Simple Templated Button" 
                Margin="10" Padding="20" FontSize="22">            
        </Button>
    </StackPanel>
</UserControl>

The following video clip goes over this code sample, explains it and shows its output.