Theming a Silverlight Application using Custom Themes

Posted Sun, Jan 16 2011 0:06 by Deborah Kurata

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:

image

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:

image

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:

<UserControl
    x:Class="InStepSM.SL.MainPage"
    xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="
http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=
                                   System.Windows.Controls.Navigation" 
    xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=
                                   System.Windows.Controls.Navigation"
    xmlns:d="
http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="
http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:theming="clr-
               namespace:System.Windows.Controls.Theming;assembly=
                            System.Windows.Controls.Theming.Toolkit"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <theming:Theme>
        <Grid x:Name="LayoutRoot">

...

        </Grid>

    </theming:Theme>
</UserControl>

4) Add the theme into the app.xaml file of your application as a ResourceDictionary as follows:

<Application.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="Assets/Styles.xaml"/>
      <!-- Define the theme for the application -->
      <ResourceDictionary Source="/Assets/InStepBlackTheme.xaml" />
     </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Application.Resources>

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:

image

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:

image

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.

image

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.

image

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:

image

Enjoy!

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.

Filed under: , , , ,

Comments

# Adding a New Page to a Multi-Page Silverlight Application

Monday, January 17, 2011 12:53 PM by Deborah's Developer MindScape

So, you've started building a Silverlight Line of Business (LOB) application using the Silverlight

# Theming a Silverlight Application using Custom Themes

Tuesday, January 18, 2011 6:36 AM by Waqar Ullah

Great job!! Its always easy to edit an existing style rather than creating it from the scratch

# re: Theming a Silverlight Application using Custom Themes

Tuesday, January 25, 2011 1:28 PM by Richard Baum

Thanks for taking the time to write this series.  One comment though.  I'm just new enough to SL to not be able to fill in the blanks left due to the right side of the page getting cut off.  So, the following left me having to find out how to compete the reference.

xmlns:theming="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Contr

# re: Theming a Silverlight Application using Custom Themes

Tuesday, January 25, 2011 10:36 PM by Deborah Kurata

Hi Richard -

Thanks for letting me know.  I had not noticed that it had cut off the lines. I corrected them above.

# Missing Chart Legend

Saturday, January 29, 2011 7:18 PM by Deborah's Developer MindScape

If you built a custom theme for your application (similar to this prior post ) then you may find that

# Silverlight 4 GDR3 a další SL4 novinky

Wednesday, February 23, 2011 2:06 AM by Michalowo Zákysník

  SL4 Update Microsoft uvolnil nový build Silverlightu 4 (4.0.60129.0 též značen jako GD3) jež mj.

# Charting in a Silverlight Application using MVVM

Saturday, March 05, 2011 12:51 PM by Deborah's Developer MindScape

Data visualization is often a requirement in today's line of business (LOB) applications. Plus charts

# re: Theming a Silverlight Application using Custom Themes

Thursday, July 14, 2011 2:41 AM by Denis

Thanks for article. Use thet method to theming application.

Found issue - theme does not apply at ChildWindow's title. Only on content of ChildWindow.

How to apply theme on whole ChildWindow?

# re: Theming a Silverlight Application using Custom Themes

Friday, August 31, 2012 10:38 AM by Dieter

Hi,

Thx for the article. I noticed that the <theming:Theme> tags doesn't really do something. I can remove them and still having my program themed. So what's the use of those tags?

# re: Theming a Silverlight Application using Custom Themes

Friday, August 31, 2012 3:59 PM by Deborah Kurata

Hi Dieter -

I had understood that you needed to surround the control with the theme in order to tell it which control to theme. So it surprises me that it works without it.

I assume then that it always themes the entire control and you can't just theme a part of it?

Thanks for your comment.

Leave a Comment

(required) 
(required) 
(optional)
(required) 
If you can't read this number refresh your screen
Enter the numbers above: