The Problem

Setting styles on a Silverlight control using XAML is pretty straightforward. Here's the XAML with accompanying style properties for a simple Button control:

   1: <UserControl x:Class="AppResStyle.Page"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   4:     Width="130" Height="80">

   5:     <Grid x:Name="LayoutRoot" Background="White">

   6:         <Button Content="Button1" Height="75" Width="125" BorderBrush="Green" Foreground="Blue" />

   7:     </Grid>

   8: </UserControl>

The above XAML produces a pretty basic button:

But what if you wanted to set these styles via a global resource? It might not make much sense in the above example, but if you have a web site with multiple pages and dozens of controls, setting style information and, more importantly, being able to modify those styles all in one place is a good idea. This model mirrors the basic CSS/HTML (presentation vs. content) paradigm we've grown to love.

The completed demo project is available for download below.

App.xaml Resources

When you create a new Silverlight application project in Visual Studio 2008, you'll have a file called "App.xaml". The basic file looks like this:

   1: <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   2:              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   3:              x:Class="AppResStyle.App"

   4:              >

   5:     <Application.Resources>

   6:         

   7:     </Application.Resources>

   8: </Application>

We'll add the BorderBrush and Foreground properties into the Application.Resources section as a Style attribute. Each Style represents a collection of Setter properties. Each Setter will represent a particular style attribute.

In XAML, define the Style as:

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

   2: </Style>

x:Key allows us to name the style for later reference. If you leave it out, and include a TargetType as shown, all Button controls in your site will employ the style. Giving the style a name gives you a finer focus on which Button controls to stylize.

Defining Setters

The Style element by itself doesn't do much, so let's add some Setters:

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

   2:     <Setter Property="BorderBrush" Value="Green" />

   3:     <Setter Property="Foreground" Value="Blue" />

   4: </Style>

What I've done is taken the BorderBrush and Foreground properties along with their respective values and defined them as Setters. These two Setters therefore take the place of the two properties defined above in XAML.

Tying it back to XAML

Now we need to go back and reference the Style in the XAML code. We do this by removing the BorderBrush and Foreground properties and setting the Style property to {StaticResource ButtonStyle}, where ButtonStyle is the name we used for our style.

   1: <UserControl x:Class="AppResStyle.Page"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   4:     Width="130" Height="80">

   5:     <Grid x:Name="LayoutRoot" Background="White">

   6:         <Button Content="Button1" Height="75" Width="125" Style="{StaticResource ButtonStyle}" />

   7:     </Grid>

   8: </UserControl>

We get the same Button control styling as before:

Setting the Style in C#

Let's remove the Style property from XAML and see how we could set it in the code-behind file instead. This proves useful when dynamically creating controls where we would also want to set style information.

We'll add an x:Name property to more easily reference the control in code and remove the Style property:

   1: <UserControl x:Class="AppResStyle.Page"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   4:     Width="130" Height="80">

   5:     <Grid x:Name="LayoutRoot" Background="White">

   6:         <Button x:Name="MyButton" Content="Button1" Height="75" Width="125" />

   7:     </Grid>

   8: </UserControl>

Then, in the code-behind file for Page.xaml, add the following line of code in the constructor:

   1: MyButton.Style = Application.Current.Resources["ButtonStyle"] as Style;

Run the application and you should see the Button control as displayed above.

Conclusion

There are a number of ways to set style information in Silverlight. By using a common style resource similar to a CSS file you can better control the look and feel of your site or application while keeping presentation and content separate.

Download: AppResStyle.zip