Monthly Archives: October 2008

Silverlight 2 provides a nice set of controls that can be used to capture and display data. While control properties can be set directly on the control in a XAML file using attributes, some properties will be duplicated between controls causing maintenance headaches. The following example demonstrates this problem:

<Button x:Name="btnSubmit" FontFamily="Arial"
FontWeight="Bold" Width="100" Height="25" Margin="10" />

<Button x:Name="btnCancel" FontFamily="Arial"
FontWeight="Bold" Width="100" Height="25"
Margin="10" />

Notice that both Button controls define the same values for FontFamily, FontWeight, Width, Height and Margin properties. Although this XAML works fine, you’ll want to encapsulate repeated properties into re-useable styles so that you can apply them to any Button quickly and easily. It’s really the same concept used in Web pages. Developers create CSS stylesheets to encapsulate styles into re-useable classes that can be applied to various elements. The same overall process can be used in Silverlight 2 applications.

Silverlight 2 allows styles to be defined in several resource sections including within a control, within a UserControl or within App.xaml’s application resources section. While styles can be defined in the UserControl.Resources section of a Page.xaml file, re-useable styles that may be used across multiple XAML files should be placed in the App.xaml file within the Application.Resources section. Silverlight 2 projects add an App.xaml file that contains the following default XAML code:

<Application
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
  x:Class="UsingStylesAndTemplates.App">
    <Application.Resources>

        <!-- Styles go here -->

    </Application.Resources>
</Application>

Control styles can be placed in the Application.Resources element. Styles are defined by using the Style element as shown next. The Style element defines the style’s key as well as the type of control that it targets:

<Style x:Key="ButtonStyle" TargetType="Button">

</Style>

This example defines a style that has a key of ButtonStyle. The style can only be applied to Button controls. 

Styles are defined by using a Setter element which contains Property and Value attributes. An example of converting all of the repeated attributes shown earlier on the Button controls into a re-useable style is shown next:

<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>

In addition to defining styles within App.xaml you can also define them within a UserControl.Resources section in cases where the style is only used within the scope of the UserControl:

<UserControl.Resources>
    <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>
</UserControl.Resources>

Once a style has been defined, it can be applied to a control by using the Style attribute. Because styles are statically defined within a resources section they can be referenced using the StaticResource keyword. An example of applying the ButtonStyle shown earlier to two buttons is shown next:

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

This is equivalent to assigning a CSS class to an HTML element's style attribute and allows the two buttons to pick up the ButtonStyle style without having to define the same properties over and over.  In a future post I'll discuss another interesting aspect of Silverlight 2 styles referred to as control templates and show how they can be used to completely customize the look and feel of a control.