Wahlin on .NET

Adding Style to Silverlight 2 Controls

Just make sure to avoid duplicating properties between controls, and everyone will be happy.

• By Dan Wahlin
• 10/27/2008

<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 this default XAML code.

Control styles can be placed in the Application.Resources element. Styles are defined using the Style element as shown next. Style 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 here:

<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. Here's an example of applying the ButtonStyle shown earlier to two buttons.

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 the next article, I'll show another interesting aspect of Silverlight 2 styles related to custom templates and show how they can be used to completely customize the look and feel of a control.