Themes Revisited: The Implicit Style Manager [Updated!]
In a recent post on theming using the new Themes from the Controls Toolkit I showed that you can add a theme to your Xaml and then add a container as the content of that theme.
A powerful alternative is to use the ImplicitStyleManager to apply the theme to a single control or, more commonly, to a container (for example, a grid) and all its controls.
To do so, you'll want to provide the Silverlight URI to the .xaml file that defines the theme, which you can copy straight from the source code provided with the Toolkit into your project.
Based on a question I received, I realized I should have provided more clarification:
The exact steps for adding this Xaml file are to go to the source files for the toolkit, navigate to the Themes pseudo-folder and grab Themes.xaml from under Controls.Theming.ShinyBlue and copy it to your project, renaming it to Microsoft.Windows.Controls.Theming.ShinyBlue.xaml (as shown).
This name is based on the fact that the file you are grabbing is from the Controls.Theming.ShinyBlue project and Controls is identified in the file as follows:
xmlns:controls="clr-namespace:Microsoft.Windows.Controls; assembly=Microsoft.Windows.Controls" |
With that you are ready to create your page, which you can certainly lay out in either Blend or Visual Studio,
On clicking the Apply Theme in the upper left hand corner we'll apply the theme that is supplied as part of the control toolkit. We've already added the .xaml file that defines the ShinyBlue theme, so we need only add a reference to the Theme support dlls,
and the using statement at the top of Page.xaml.cs so that we can refer to the ImplicitStyleManager,
using Microsoft.Windows.Controls.Theming;
That done, we create the event handler to respond to the press of the Apply Theme button,
void applyTheme_Click( object sender, RoutedEventArgs e )
{
Within this method we'll create a Silverlight URI that points to the Xaml file. The URI constructor takes the Silverlight path to the ShinyBlue.xaml and the enumerated constant UriKind.Relative. With that, we are ready to call three static methods on ImplicitStateManager:
1. SetResourceDictionaryURI takes the control that we want to set the theme for (in our case the Layout Root, which will also apply the theme to all its contained controls) and the URI.
2. SetApplyMode again takes the control we're setting the theme for, but this time the second parameter is one of the ImplicitStyleApplyMode constants ( the possible values are Auto, OneTime or None).
3. Apply which applies the style and takes the single parameter of the control we're applying the style to. Here is the complete Page.xaml.cs, with the code we've just discussed at the end.
using System;
using System.Windows;
using System.Windows.Controls;
using Microsoft.Windows.Controls.Theming;
namespace ThemesWithISM
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
Loaded += new RoutedEventHandler( Page_Loaded );
}
void Page_Loaded( object sender, RoutedEventArgs e )
{
applyTheme.Click += new RoutedEventHandler( applyTheme_Click );
}
void applyTheme_Click( object sender, RoutedEventArgs e )
{
Uri uri = new Uri( @"ThemesWithISM;component/Microsoft.Windows.Controls.Theming.ShinyBlue.xaml", UriKind.Relative );
ImplicitStyleManager.SetResourceDictionaryUri( LayoutRoot, uri );
ImplicitStyleManager.SetApplyMode( LayoutRoot, ImplicitStylesApplyMode.Auto );
ImplicitStyleManager.Apply( LayoutRoot );
}
}
}
Applying The Style
When the page is first displayed no style is attached,
Clicking on the Apply Theme button invokes the event handler which calls the ImplicitStyleManager methods and applies the theme,
