Loading WPF themes at runtime

• Download source code - 77.8 KB

Introduction

This article presents a sample application that uses a combo box to change a WPF theme at runtime. This is a continuation of another article I wrote that presented a Blend like style for a scrollbar.

This code is intended to help an application developer change or add styles to his/her applications without recompiling it.

In order for this to happen, I chose a pluggable architecture. What I mean by this is that I have a dedicated folder in the application where all the themes reside. If the user wants a new theme, all he/she needs to do is to add a new assembly to that folder. When the application starts, I load the assemblies using Reflection, as will be seen later.

The themes are represented by resource dictionaries. These resource dictionaries also have a code-behind class attached to them so that I can access them in code. All the assembly needs to have is the resource dictionaries that represent the themes. The number of files doesn’t matter, the resource key names don’t matter. All that matters is that the templates be applied using styles that apply to controls by default (styles without a resource key).

Using the code

The application solution has three projects. One is the main project that uses the themes. The other two projects show how a theme should be built in order to be properly loaded. I will present those two projects first, and at the end, I’ll show the reflection code that loads these assemblies.

Theme assemblies

Like I said in the beginning, themes will be represented by an assembly. This assembly will contain one or more resource dictionaries that will contain the resources for the theme (brushes, animations, control templates, styles etc.). This can be seen in the image below:

As you can see from the image above, every resource dictionary has an associated code-behind file. This code-behind file will be very useful when loading resources. In order to link the resource dictionary file to the code-behind file, you have to do a few things.

First, you have to set the x:Class attribute in the resource dictionary to the name you want the class to have. This must be a fully qualified name. The code can be seen below. The code is for the ListBoxStyle.xaml dictionary.

<ResourceDictionary x:Class="Theme1.ListBoxDictionary"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

The next step is to add a new partial class to link this file. The code for the class is minimal, and can be seen below:

namespace Theme1
{
    public partial class ListBoxDictionary:ResourceDictionary
    {
       public ListBoxDictionary()
       {
            InitializeComponent();
       }
    }
}

As you can see, you need a partial class that derives from ResourceDictionary. Because this class is linked to the XAML file, it will have the InitializeComponent() method that is automatically generated by the designer. All the custom class does is call this method in the constructor. You will need classes like this for all the dictionaries you provide.

The code for the second file is similar. The XAML class name can be seen below:

<ResourceDictionary x:Class="Theme1.ScrollBarDictionary"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

The code-behind file is equally simple:

namespace Theme1
{
   public partial class ScrollBarDictionary: ResourceDictionary
   {
        public ScrollBarDictionary()
        {
            InitializeComponent();
        }
    }
}

I won’t present the code for the second theme because it is almost identical. The only thing that is different is the styles that are applied. You can see what the first theme looks like by viewing my previous article at:

• http://codeproject.com/kb/cs/blendlikescrollbar.aspx

or you can download the sample for this article.

After you have all the styles for your theme, you need to compile the assembly and you’re done. You can now add the assembly to the reserved folder in the main application.

The main application

The main application is really small. It has two windows. The main window will contain the list box control that will be styled, and the second window will let you choose the theme to apply. When the application starts, no theme is applied, but you can change this easily. The two windows can be seen below:

On the left, you can see the second theme, and on the right, you can see the options window. Seeing that the code to open the options window is trivial (call ShowDialog() when I select Tools -> Options from the menu), I’ll only talk about the code in the options window.

When the options window is loaded, I load every assembly in the MyThemes directory and store the references in a generic list. The code for this can be seen below:

DirectoryInfo di = new DirectoryInfo("../../MyThemes");

foreach (FileInfo fi in di.GetFiles())
{
  try
  {
       themes.Add(Assembly.LoadFile(fi.FullName));
  }
  catch{}
}
cbThemes.ItemsSource = themes.Select(p => p.GetName().Name).ToList();

The user can select a theme from the combo box and then press the apply button. When he/she does this, I retrieve the selected assembly based on the name:

Assembly a = themes.Where(p => p.GetName().Name.Equals(cbThemes.SelectedValue))
          .SingleOrDefault();

If the assembly exists in the assembly list, I first clear the applications resource dictionary:

if (a != null){ 
   ((App)Application.Current).Resources.MergedDictionaries.Clear();

After this, I iterate over all the types in the assembly, and if the type is a subclass of ResourceDictionary (there might be classes that are not), I instantiate it and add it to the merged dictionaries collection, like so:

foreach (Type t in a.GetTypes())
{
     Trace.WriteLine(t.FullName);
     if(t.IsSubclassOf(typeof(ResourceDictionary)))
     {
          ConstructorInfo ci = t.GetConstructor(Type.EmptyTypes);
          ResourceDictionary rd = 
                 (ResourceDictionary)ci.Invoke(new object[] { });
          ((App)Application.Current).Resources.MergedDictionaries.Add(rd);
     }
}

This is it. Hope you like it.

History

• Added Tuesday, September 1, 2009.