Wahlin on .NET

Using Styles to Define Silverlight 2 Control Templates

Control templates let you manage the look and feel of a control and customize the way it's rendered in an application.

• By Dan Wahlin
• 11/10/2008

<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 want to customize a control and make it look and feel different than it looks out of the box.

In this article, you'll see how a standard rectangular Button control can be made into a rounded button. Figure 1 shows what the standard Silverlight 2 Button control looks like.

By using control templates, you can do virtually anything you'd like to a control. Figure 2 shows 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 any time you want to reuse a template across multiple controls.

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 and 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="btnCancel" Content="Clear" 
  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. Figure 3 shows 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 reuse a template across multiple controls. In the next article, I'll explore how the Visual State Manager can be used within control templates to enable custom animations.