Silverlight 2 allows styles to be defined to prevent duplication of attributes across controls in a XAML file. In a previous post I demonstrated how styles could be defined and used. As a review, here's an example of defining a style named ButtonStyle that targets a Button control:

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="FontFamily" Value="Arial" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Width" Value="100" />
    <Setter Property="Height" Value="25" />
    <Setter Property="Margin" Value="5,10,0,10" />
</Style>

The style can be applied to one or more buttons using the following StaticResource syntax:

<Button x:Name="btnSubmit" Style="{StaticResource ButtonStyle}" />
<Button x:Name="btnCancel" Style="{StaticResource ButtonStyle}" />

In addition to defining control property values, styles can also be used to define control templates. This is useful any time you'd like to customize a control and make it look and feel different than it looks out of the box. In this post you'll see how a standard rectangular Button control can be made into a rounded button. Here’s an example of what the standard Silverlight 2 Button control looks like:

By using control templates you can do virtually anything you'd like to a control. Here’s an example of a Button that has a custom style and control template defined to give it a flat look with rounded corners:

Control templates can be defined within a control's Resources section, within a UserControl's Resources section, or within the Application.Resources section of App.xaml. Defining a template in App.xaml is recommended anytime you'd like to re-use a template across multiple controls in an application.  Here's an example of a style named ButtonFlatStyle that defines a custom control template for a Button:

<Style x:Key="ButtonFlatStyle" TargetType="Button">
    <Setter Property="Width" Value="100" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">                        
                <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
                        Background="{TemplateBinding Background}" 
                        CornerRadius="8" BorderBrush="Black" BorderThickness="1">
                     <ContentPresenter Content="{TemplateBinding Content}" 
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Looking through the ButtonFlatStyle style you'll see that it first defines a width of 100. It then defines a Template property with an associated value. Although this is a very simple example of a control template, you can see that a template is nothing more than a way to define custom control rendering. More complex templates may use many more controls, styles, bindings and even include animations using Silverlight's Visual State Manager (a topic that I'll save for a later article).

Control templates are defined using the ControlTemplate element which acts as a container for template controls and defines the target control type of the template by using the TargetType attribute. This example targets a Button control. The ControlTemplate element shown here includes a Border child element which is used to generate rounded corners using the CornerRadius property.

Notice that a special TemplateBinding syntax appears within several of the Border element's attribute values. What's a TemplateBinding and why would you use it? It's nothing more than a way to allow control properties defined by a developer to be used in the control template. In other words, if a developer defines a Button control that uses the ButtonFlatStyle style, any Width, Height or Background values that they set on the control will automatically be used within the template. This allows the control template to take developer customizations into account.

Within the Border control you'll see a ContentPresenter XAML element. This element marks where the control's content (such as a Button's Content attribute value) will be placed within the template. It literally handles "presenting" the content within the template. The Content="{TemplateBinding Content}" attribute binds the target control's Content property to the ContentPresenter's Content property. To clarify this more, consider the following XAML code:

<Button x:Name="btnClear" Content="Clear" 
  Background="LightGray" Style="{StaticResource ButtonFlatStyle}" />

The ContentPresenter element defined within the template will render the text "Clear" within the control template's Border element. If a control's Content property defines more complex content it would also be applied using the ContentPresenter. Here's an example of defining complex content within a Button control:

<Button x:Name="btnClear2" Click="btnSubmit_Click" Background="LightGray"
  Style="{StaticResource ButtonFlatStyle}">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <Image Source="/red_x_mark.jpg" Width="20" Height="19" 
             VerticalAlignment="Center" />
            <TextBlock Margin="5" Text="Clear" Foreground="Navy" 
             VerticalAlignment="Center" />
        </StackPanel>
    </Button.Content>
</Button>

In this example the content consists of additional controls rather than only basic text. Here’s an example of how the custom content would be rendered by the control template:

Control templates allow you to take over the look and feel of a control and customize how it's rendered in a Silverlight 2 application. By defining control templates within styles you can easily re-use a template across multiple controls.