How to apply a toolkit theme in Silverlight 4

I just had to apply a theme to a simple Silverlight 4 application I’m developing for Labs, and it took me a bit of research to find what I was looking for, although the steps turned out to be very simple in the end. I thought it would be worth sharing what I’d learned in a single post.

The Silverlight 4 Toolkit contains some great controls and themes that extend what’s already available out of the box with Silverlight. If you’re not aware of what the toolkit offers, a great starting place is this online interactive demo which shows everything that’s included and gives code samples showing how to implement.

So the steps I took to apply one of the toolkit themes to my app were as follows:

  1. Download the toolkit from Codeplex and install it on your development workstation. By default, the toolkit files will be installed in the directory “C:Program FilesMicrosoft SDKsSilverlightv4.0ToolkitApr10″.
  2. In your Silverlight application project, right-click the ‘References’ folder and click ‘Add Reference’
  3. Add a reference to “System.Windows.Controls.Theming.Toolkit.dll” in the “Bin” subdirectory
  4. Add a reference to the specific theme .dll file you wish to use in your application. For example, to use “Rainier Orange” add a reference to “System.Windows.Controls.Theming.RainierOrange.dll” in the “Themes” subdirectory.
  5. In your App.xaml file, add the following namespace declaration to the outermost “Application” element: xmlns:toolkit=”http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit”
  6. Finally, to actually use your chosen theme throughout your application, add the following declaration below the xmlns declaration above:

toolkit:RainierOrangeTheme.IsApplicationTheme=”True”
And that’s the most straightforward route to apply a theme from the toolkit globally across your Silverlight 4 applications. There are many other options of course, and credit here to David Anson’s blog post which goes into more detail on the release notes, and helped me with steps 5 and 6 above.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s