This blog post is one of three I’m posting to introducing some of the new features in the Silverlight Toolkit announced today at the PDC 2008. For more information about and downloads of the toolkit check out http://www.codeplex.com/Silverlight.

One of the strengths of WPF and Silverlight is the ability to change the style or template of any control. This gives the designer maximum flexibility to change the look and feel of an application, without breaking its behavior. The Silverlight 2 styling support has some major shortcomings, specifically around dynamic and implicit styles. Dynamic styling enables you to change the style of a control at runtime without having to recreate it. Implicit styling means applying styles to all controls based on type, and not a specific style name. Implicit styling is similar to applying CSS styles to a H1-element, instead of having to specify the CSS-class name of the element. The benefit of implicit styling is that you can change the look and feel of all the buttons, textboxes, checkboxes or any other control without having to apply a specific style key to all the elements. The Silverlight Toolkit introduces the ImplicitStyleManager which adds support for implicit styling and themes to Silverlight 2.

There are already quite a few good looking themes for Silverlight 2. Tim Heuer did a blog post earlier this month covering some of the themes available, and specifically the work of Corrina Barber and Dave Crawford comes to mind as great examples. Today these templates are deployed as XAML files, with instructions on which part of the file to copy and paste into your App.xaml file. You also have to apply the styles to every single control in your application, and the name of each style is often different. Dave calls his button style BlackGlossyButton, which is different from Corrina’s naming convention. That means that you have to go over and re-apply the style to all your controls if you want to use Corrina’s theme instead of Dave’s theme.

With the new ImplicitStyleManager designers like Corrina and Dave can style a button without having to give it a specific key. They can share their themes as resource dictionary file, and any developer who wants to use the theme simply includes this file and applies it using the ImplicitStyleManager. This is going to make theming of applications allot easier as you simply include a new XAML file to get a new look and feel of your application. Scott Guthrie has commented on his blog that they will be creating some form of online gallery where designers can share their Silverlight themes.

The way create themes is fairly straight forward. You add a new XAML file to your project and mark it as Content (and not as Page which is the default option). Next you build up your resource dictionary, and for your styles you no longer have to apply a key (unless you want to). You simply set the target type to style a button, textbox or any other control. The theme gets applied to your application by using the ImplicitStyleManager attached properties on any container control. All child elements inside that container will get the theme style applied.

For this example I have taken Dave’s glossy control theme and turned it into a Silverlight Toolkit theme. When I run the example code above, this is what my button looks like:

All I had to do to turn Dave’s glossy theme into a Silverlight Toolkit theme was remove the key on each on the style. That way I don’t have to specify the key for my button style, as the theme will be applied implicitly by the ImplicitStyleManager. The next screenshot shows a typical data entry screen using Dave’s theme and the Shiny Blue theme from the Silverlight Toolkit (one of the six included themes).

In the above example I didn’t have to change any of the XAML of the application, or name of styles, in order to change the entire look and feel of my application. In the future I’m sure we will be seeing lots of new themes from the community as well as commercial vendors. The ImplicitStyleManager makes it easy to share themes and apply them to your application. There are still some shortcomings to the styling model. Support for dynamic resources is one of them. In order to change the theme while the application is running you have to recreate your UI before applying the theme. This is almost like having to “reboot” your user interface, and is not an optimal user experience. However, having Theme support is still a great way forward and opens up many new possibilities.