Theming is a pain. There are multiple ways to theme an application, that revolve around two main methods. Use the Silverlight Toolkit and ISM or use a system that inserts the correct resources from a theme file into the application resources using XamlReader.Load at application start time.
Both of these methods have drawbacks. With ISM controls are implicitly styled. If you style a combo box, all combo boxes in the application are styled the same way. Great! But what if you need to explicitly style portions of your application or use a brush resource that can change dependent on the theme? Normally you would place these resources into your application file, access them using StaticResource and go. This means you lose your theming for application wide resources when they are explicitly styled.
The solution:
For me I needed the best of both worlds. The ability to quickly change themes using ISM, but also the ability to be able to theme components of the system using explicit styles. I already use SilverlightFX as it contains an effects library and a framework for MVVM, but it also contains a theming system .
It’s easy to integrate the two solutions together.
Create the grouped theme files
SilverlightFX uses a Themes folder to maintain all themes for an application. Setup a theming application for SilverlightFX as explained in Nikhil Kothari’s Silverlight FX theming post. The SilverlightFX theming can then be used for any theming that requires an explicit StaticResource. Make sure you set the build action on all the files in this folder to ‘Content’ not ‘Page’, even though Nikhil’s blog states that I missed it more than once.
Add the Silverlight Toolkit themes to the SilverlightFX theming project
Now you need to add the theme files from the Silverlight Toolkit into your solution. Using the Xaml and not the DLLs means that if you need to add a new custom control to the ISM theme you (or your designer) can easily modify any implicit styles that already exist.
First copy the Xaml files from the Silverlight Toolkit project into the correctly named folder in the Themes folder. I suggest you rename the Xaml to remove the toolkit namespace, it makes it easier to find the theme you want.
So you now have the files for both systems in folders.
Now you have the files for the toolkit in your system, but no way to get the application to use the correct theme from both at the same time. If you are loading your theme dynamically on start up from your initparams then only the SilverlightFX theming will be working. I get the theme name from the SilverlightFX setup and then use binding to apply that same theme name to the ImplicitStyleManager. I use a class that gets the theming from SilverlightFX and then exposes that as a resource in App.xaml (it’s not theming related and therefore should live in the application resources)
This property is loaded from a static string which accesses the ApplicationLifetimeObjects of the application class. So it requires the SilverlightFX ApplicationContext to exist. (This is just the code from SilverlightFX that initially loads the theme in the ApplicationContext class, you can get it from there and see how SilverlightFX does it’s theming loads)
private static string theme;
public string Theme
{
get {
//Taken from SilverlightFX codebase
string _themeName = ((ApplicationContext)App.Current.ApplicationLifetimeObjects[0]).ThemeName;
IDictionary<string, string> _startupArguments = ((ApplicationContext)App.Current.ApplicationLifetimeObjects[0]).StartupArguments;
string name = _themeName;
if (_themeName.StartsWith("$"))
{
string[] nameParts = _themeName.Split('|');
if ((nameParts.Length > 2) || String.IsNullOrEmpty(nameParts[0]))
{
throw new InvalidOperationException("Invalid theme name. Either the name must be a simple name, or must be in the form $<ThemeInitParam>|<DefaultName>.");
}
if (nameParts.Length == 2)
{
name = nameParts[1];
}
if (_startupArguments != null)
{
string selectedName;
string argName = nameParts[0].Substring(1);
if (_startupArguments.TryGetValue(argName, out selectedName))
{
name = selectedName;
}
}
}
else
{
name = _themeName;
}
return "Themes/" + name + "/" + name + ".xaml";
}
set { theme = value; }
}
I then can bind the ImplicitStyleManager on any page to this resource and implicit styles work as well
theming:ImplicitStyleManager.ResourceDictionaryUri="{Binding Path=Theme, Source={StaticResource params}}"
theming:ImplicitStyleManager.ApplyMode="OneTime"
To add a new theme for your application you can now create an implicit theme using ISM then add any explicit styles you need into the SilverlightFX theme file.
I haven’t got a sample application created for this yet, but I will in the next few days.
Subscribe