Themebuilding in Silverlight

In this short article I'll show you how to transform a resource dictionary with colors, brushes, styles and templates into a real theme - à la Silverlight toolkit themes - and how to apply it to a region in the user interface. I'll build a theme called Glass.

Building the theme

Each Silverlight toolkit theme is nothing more than a resource dictionary wrapped in ... er ... a wrapper and compiled as a separate dll. I you want to roll your own, you first create a class library project. The project will contain lots of references, lots of XAML, and just a couple of lines of C#. It will eventually look like this:

Create a resource dictionary named theme.xaml and stuff all the artefacts that your designer created - or that you downloaded somewhere - into it. Then create a very thin wrapper class around the resource dictionary. The class should inherit from the toolkit's Theme class:

Just like in the toolkit themes, it makes sense to use System.Windows.Controls.Theming as namespace.

Here's the whole code for that class:

/// <summary>

/// Implicitly applies the Glass theme to all of its descendent FrameworkElements.

/// </summary>

public partial class GlassTheme : Theme


    /// <summary>

    /// Stores a reference to a Uri referring to the theme resource for the class.

    /// </summary>

    private static Uri ThemeResourceUri = new Uri("/System.Windows.Controls.Theming.Glass;component/Theme.xaml", UriKind.Relative);


    /// <summary>

    /// Initializes a new instance of the GlassTheme class.

    /// </summary>

    public GlassTheme()

        : base(ThemeResourceUri)




We're done building the theme. Now it's time to test it.

Applying the theme

All you need to do to statically apply a theme to a region in the user interface, is dropping it in the XAML:


    <!-- Your controls here. -->


 To test a new theme, I created a small test application with controls from different sources: a handful of native Silverlight controls, some SDK controls and a pinch of Toolkit controls. It's actually a lightweight version of one of the zones from the Silverlight Samples page. Just select Theme Browser over there to get the full page. My version is a little more compact. It looks like this:

With a simple right-click you can dynamically change the theme.

Here's how the Glass theme looks like in the test container:

 The test container also applies the selected theme through XAML, but it uses the common base class to set the appropriate ThemeUri:

<toolkit:Theme x:Name="ThemedRegion"


    <!-- Your controls here ... -->


After selection, a new theme is programmatically applied like this:

themedRegion.ThemeUri = new Uri("/System.Windows.Controls.Theming." + this.themeName + ";component/Theme.xaml", UriKind.RelativeOrAbsolute);

Source code

Here's the glass theme and its test container: (2,34 mb)