Using Themes in Silverlight

1. You should firstly add System.Windows.Controls.Theming.Toolkit.dll reference to your project. The path in my machine is C:/Program Files/Microsoft SDKs/Silverlight/v3.0/Toolkit/Jul09/Bin

 

2. Add existing themes to your SilverLight Application. The path here is C:/Program Files/Microsoft SDKs/Silverlight/v3.0/Toolkit/Jul09/Themes/Xaml. Under this folder, there are several existing themes. Such as System.Windows.Controls.Theming.BubbleCreme.xaml, System.Windows.Controls.Theming.ShinyRed.xaml, System.Windows.Controls.Theming.RainierPurple.xaml, and so on......

 

3. Change each Theming Xaml's "Build Action" property to Content, which allows you reference them using relative path. By the way, remove the settings for "Custom Tool"

4. You can use themes as follows,

<StackPanel> <!--The style will be applied for the whole StackPanel and its children--> <StackPanel x:Name="LayoutRoot" Background="White" themes:ImplicitStyleManager.ApplyMode="Auto" themes:ImplicitStyleManager.ResourceDictionaryUri="Themes/System.Windows.Controls.Theming.ShinyRed.xaml"> <Button Width="100" Height="25" Content="Click Me"></Button> <CheckBox Content="IsPublished" Width="100" Height="30" /> <!--Inside the Styled panel we can still make it to another style--> <StackPanel themes:ImplicitStyleManager.ApplyMode="Auto" themes:ImplicitStyleManager.ResourceDictionaryUri="Themes/System.Windows.Controls.Theming.TwilightBlue.xaml"> <Button Width="100" Height="25" Content="Click Me Again"></Button> </StackPanel> </StackPanel> <!--ApplyMode to None equals no styled settings here--> <StackPanel themes:ImplicitStyleManager.ApplyMode="None"> <Button Width="100" Height="25" Content="Click Me Again"></Button> </StackPanel> <!--We can only set the style for a single control--> <CheckBox Content="IsPublished" Width="100" Height="30" themes:ImplicitStyleManager.ApplyMode="Auto" themes:ImplicitStyleManager.ResourceDictionaryUri="Themes/System.Windows.Controls.Theming.TwilightBlue.xaml" /> </StackPanel>

Notice:

ImplicitStyleManager.ApplyMode("Auto","None","OneTime")

Auto: the theme can be applied to the controls dynamically added in to the UI.

None: equals not set this property

OneTime: the theme will be applied only for the first time when the control loaded.

Fine I'll use OneTime.  What if I need to style a dynamically created control though?

If you want to ensure a dynamically created control is styled you can use ISM's "Apply" method.  You can manually call this method after adding your dynamically generated control to the styled container:

 

Button b = new Button { Content = "I'm a dynmaically generated button."}; myStyledStackPanel.Children.Add(b); ImplicitStyleManager.Apply(myStyledStackPanel);

At last, you can also define your own themes or modifying them based on the existing themes.