Using Themes with Custom Controls

Last month I explained how to use shared resources in a control library. This month I’ll create an example that uses different styles based on the current setting of the desktop theme.

You can define a different look and feel based on the desktop theme by adding a resource dictionary to the Themes folder. The desktop theme determine which resource dictionary is used. Here is a list the resource dictionary file names and the desktop themes:

Classic.xaml – “Classic” Windows 9x/2000 look on Windows XP.

Luna.NormalColor.xaml – Default blue theme on Windows XP.

Luna.Homestead.xaml – Olive theme on Windows XP.

Luna.Metallic.xaml – Silver theme on Windows XP.

Royale.NormalColor.xaml – Default theme on Windows XP Media Center Edition.

Aero.NormalColor.xaml – Default theme on Windows Vista

In my example, I created a simple custom control that uses various resources. I’ve defined each resource in three resource dictionaries: generic.xaml, Luna.NormalColor.xaml (for the default theme on Windows XP), and Aero.NormalColor.xaml (for the default theme on Windows Vista). The key for the styles are identical in each resource file. For example, in generic.xaml, I defined a style for the StackPanel, which my custom control uses:

  <Style TargetType="StackPanel"

         x:Key="{ComponentResourceKey

                   TypeInTargetAssembly={x:Type local:ShapeResizer},

                   ResourceId={x:Type StackPanel}}">

    <Setter Property="Width" Value="250"/>

    <Setter Property="Height" Value="200"/>

  </Style>

When the user has chosen the default theme on Windows XP, I want the StackPanel to be blue, so I defined the following style in Luna.NormalColor.xaml.

  <Style TargetType="StackPanel"

         x:Key="{ComponentResourceKey

                  TypeInTargetAssembly={x:Type local:ShapeResizer},

                  ResourceId={x:Type StackPanel}}">

    <Setter Property="Width" Value="250"/>

    <Setter Property="Height" Value="200"/>

    <Setter Property="Background" Value="DodgerBlue"/>

  </Style>

Notice that the keys for both styles are identical and are ComponentResourceKey objects. As stated in Defining and Using Shared Resources in a Custom Control Library, styles defined at the theme level must create a ComponentResouceKey for the key.

In my user control, I can reference this style and the correct style will be used depending on the current desktop them in use.

  <!--In my custom control.-->

  <StackPanel Style="{DynamicResource {ComponentResourceKey

                      TypeInTargetAssembly={x:Type local:ShapeResizer},

                      ResourceId={x:Type StackPanel}}}">

  </StackPanel>

Notice that I used the style as a DynamicResource. By doing so, the appearance of the StackPanel will change when the user switches between the default theme for Windows XP and another theme. If I used the style as a StaticResource, the appearance wouldn’t change unless I exited and restarted my application.

Finally, I need to specify the location of the theme resource files by using the ThemeInfoAttribute.

// Specifies the location in which theme dictionaries are stored for types in an assembly.

[assembly: ThemeInfo(ResourceDictionaryLocation.SourceAssembly,

                     ResourceDictionaryLocation.SourceAssembly)]

Attached is the complete example. Run the application and experiment with switching between the default theme on Window XP or Vista and another theme.

You can see the themes files shipped with WPF here.

ThemedResources.zip

Comments

• Anonymous
  July 31, 2007
  The solution has a bad project location and one project won't load. The easiest way to make it compile is to rename the ShapeResizerWithThemes subfolder back into CustomControlLibrary2.

• Anonymous
  July 31, 2007
  Thanks for pointing that out.  I've uploaded the sample again and now it should work.

• Anonymous
  August 02, 2007
  Last month I explained how to use shared resources in a control library . This month I’ll create an example

• Anonymous
  August 20, 2010
  I have found a solution to the problem, but not the answer as to why it all happens. Here is my question as stated on StackOverflow, as well as the solution: stackoverflow.com/.../ . I would still like to know what happened, though.