In my last blogs, I went over how to customize the existing Silverlight Toolkit themes. In this post, I will talk about what it takes to create new themes that work with Implicit Style Manager.

Let's start by creating a Silverlight 2 project in Blend 2 and style few controls:

image 

These 3 controls will help us illustrate how to create your theme file from the styles defined in your app.xaml or page.xaml. But before we get there, let's make sure we set up our project to make it easy to develop and test our theme file.

1. Using Visual Studio 2008, create a new Silverlight 2project:

image

2. Edit myTheme.xaml and add the following content:

image

3. We can go to blend now and start creating styles for each control as we usually do (By editing the control template).

4. Switch to the XAML View and copy all the Styles defined in the UserControl Resource Dictionary to myTheme.xaml

image

5. At this point we are ready to make the necessary changes to myTheme.xaml. 

1. Removing X:Key references from you style definitions.

Silverlight uses the full name of the target type as the key in the dictionary. Under the hood, ISM relies on the same mechanism to retrieve a style from the resource dictionary. Therefore the x:Key has to be removed.

Here is an example of how to convert the Button Style generated by Blend to a ISM version

Style generated by Blend ISM Version
image image

2. Change references to other Styles

Often, we have Styles that have reference to other styles such as in the case of ListBox style that has a reference to ScrollViewer. In this case, ISM will expect the Fullname of the type as the key.

Style generated by Blend ISM Version
image image

3. Add explicit references to other Styles

When creating new styles for certain composed controls that exposes style properties such as ItemStyleContainer or CalendarStyle, Blend will automatically hock up those style as follow:

image

ISM would not know about the ItemContainerStyle unless you add an explicit reference to it in the parent control's Style (in this case ComboBox Style)

Style generated by Blend ISM Version
image image

DatePicker, DataGrid and ComboBox are other examples of controls that will require adding a reference to other nested styles. You refer to existing the Silverlight Toolkit Themes to see how we modified the styles for these controls.

Conclusion

Creating themes that work with ISM is relatively easy but it can be painful to spot issues with your theme if forget to make the appropriate changes as described above. So a word of advice: Be very careful! :)  I hope this post will inspire you to create your own themes (like this one created by Pete Blois).