Theming a Silverlight Application using Custom Themes
Sun, Jan 16 2011 0:06
If you want to give your line of business application a nice color theme and some basic interactive styles without a lot of work, you can use the built-in themes as described in this prior post. However, as shown in that prior post you may want to adjust or customize the theme.
NOTE: This post is part of a series that starts with this prior post.
For example, adding the BureauBlack theme to our sample application resulted in this look:
The hyperlinks in the upper left corner are now blue on black, making them hard to see. And the Welcome text under the header on the page is next to impossible to see.
But when the user clicks on a link, the link automatically changes its color as shown below:
That looks a little nicer. So we just need to make a little adjustment to the default color of the hyperlinks and they should be fine.
But no. There is no way to make any "adjustments" to the built-in themes. You can't just modify one color or add another style, or make a font a little bigger. You use the style from the theme OR you override the theme for a specific control with an explicit style.
OR, you can dive into the deep end and "edit" the theme. That sounds simple enough, but it is not. It involves making a copy of the theme's xaml file, adding the resulting xaml file to your project, editing the copy, and redoing your theme code to bring the theme in as a resource dictionary instead of an external dll/control.
But, starting with an existing theme and manually editing it is still significantly easier than building your own themes from scratch. So start with the Silverlight Toolkit theme (or any third party theme) that most closely provides the look and feel you want, and follow the steps below to customize it.
1) Find the theme xaml file.
I found the Silverlight Toolkit themes here: C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Themes\Xaml
2) Copy the desired theme xaml file into the Assets folder of your project.
Rename it so you can ensure your customized file is not confused with the file from the toolkit.
3) If you added the theme by referencing it's dll, remove the reference and add instead a reference to Theming. Then change the theme control (BureauBlackTheme in my example) with theming:Theme.
In the sample application, the MainPage.xaml file then looks like this:
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
4) Add the theme into the app.xaml file of your application as a ResourceDictionary as follows:
<!-- Define the theme for the application -->
<ResourceDictionary Source="/Assets/InStepBlackTheme.xaml" />
5) Fix the namespace issues.
As soon as you finish step #4 and recompile, you will get a large number of namespace errors. (I got 19.) These are because the theme file you just copied into your application references many more namespaces that you probably have referenced.
You have two choices at this point: Add the missing references OR Remove the controls are you not using (and the associated namespaces) from the theme xaml file. If you are just starting your application, you may not want to remove the other controls from the theme because you may find you need them later.
For now, we will add references to all of the missing assemblies. Open the Theme xaml file to see the list of namespaces that have missing references. Add the necessary references to your project. You may also find references in the theme to the theme's dll. You can remove these.
About 10 minutes and several builds later, you should be at a point where you can start to actually edit the theme file. It is just a set of Style elements, so you can edit them as you do any explicit style. Just don't give these styles a name (or key).
When I finish the above steps and run the application, it again appears as follows:
Your project now owns your theme file, so you can change it however you need. Just remember that whatever styles you define in the theme will be applied to every instance of the target control (unless you override it with an explicit style).
In scrolling through the theme file, it may be a bit intimidating. I find it is easiest to deal with if I use the "-" controls on the left side of the code editor to close each style. This leaves just the target type in view making it much quicker to find the style I want to change. Here is a screen shot:
Now that we have the theme file. Let's make a small edit. Find the HyperlinkButton in the file. Click the "+" icon on the left side of the code editor to open the style and change the Foreground color. In the template it is set to #FF042271, which is the blue.
Change it to another color, such as orange: #FFF28926.
The page then appears as shown below. Notice the colors of the links in the upper right corner.
Use the technique defined here to set up your own customized theme file as a copy of an existing theme.
NOTE: There is may not be a style in the theme for the TextBlock control. So to change the color of the page text, update the styles in the Styles.xaml file instead. In this example, I modified the BodyTextColorBrush in the Styles.xaml file as follows:
<SolidColorBrush x:Key="BodyTextColorBrush" Color="WhiteSmoke"/>
The page then appears as follows:
Update 1/17/2011: Corrected Step #3 and added a note at the bottom of the post to make the page text more readable.
Update 1/25/2011: Some of the namespace lines had been cut off. Corrected it.