Silverlight: Themes

Posted Wed, Jan 20 2010 11:02 by Deborah Kurata

When Windows Presentation Framework (WPF) and Silverlight first came out, the announcements happily proclaimed that it was even easier to have your visual design team build really nice user interfaces that we, the developers, could then enhance with code. But what about the significant number of us that don't have a visual design team or even a single visual designer?

Even though we may not have had an art class since 6th grade, developers can create really nice looking Silverlight applications. And Silverlight Themes makes it easy.

NOTE: Silverlight themes are part of the Silverlight Toolkit that you can download from here.

Take this simple Silverlight page:

image

It looks OK. Kind of looks like a WinForms application. But it can get the job done. The user can click on Edit to edit the customer information. Or add, edit, or delete contacts for the customer. The user can also view an invoice summary or click the Open button to view the details of any invoice.

Now let's apply the Bureau Black Theme:

image

That looks more like a Silverlight application! Even though the functionality is exactly the same, applying a theme can make it look much nicer.

NOTE: In addition to applying the theme, some additional design features were applied to the dialogs shown in this post. For example, color and rounded corners on the page sections.

Don't like black. How about the Shiny Red Theme:

image

Want it more white, try the Whistler Blue Theme:

image

There are many more themes to choose from such as Expression Light and Rainier Purple.

Applying a theme to your page is easy. First, ensure that you have installed the Silverlight Toolkit as mentioned above. Then, if you are using Blend or Visual Studio, just drag and drop the desired theme from the toolbar to your page. This adds the appropriate references and namespaces to your code.

To theme the entire page, set the theme element around the entire page contents.

In XAML:

<UserControl
    xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:bureauBlack="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.BureauBlack"
    mc:Ignorable="d"
    x:Class="SampleSimpleSL.CustomerManagementUC">

<bureauBlack:BureauBlackTheme>
    <Grid x:Name="LayoutRoot">
        . . . [Your code here]
    </Grid>
</bureauBlack:BureauBlackTheme>
</UserControl>

NOTE: When you drag and drop the theme, the designer may add a bunch of attributes to the theme tag, such as a Content attribute. Remove these or the theme may not work properly.

Though you can't see it in the above screen shots, the themes also provide interactivity effects. For example, as you move the mouse over list box items, the items are highlighted. If you move the mouse over a button, the button color changes or highlights, and so on.

For example, here I had the mouse over the Edit button when I captured the screen:

image

Microsoft provided an interactive page to try out the themes. You can see the interactivity effects for each of the themes here. Select Theming | Theme Browser from the panel on the left. Then click on the desired theme across the top:

image

Pick a theme for your application and see what a difference it can make in your visual design.

Enjoy!

Filed under: , , , ,

Comments

# re: Silverlight: Themes

Thursday, January 21, 2010 5:36 PM by GaryC

I've been having difficulty creating a new theme.  Any suggestions?

# re: Silverlight: Themes

Thursday, January 21, 2010 7:34 PM by Deborah Kurata

Hi GaryC -

I have not yet tried to create my own. At first thought, I think I would copy an existing one close to what I want and then edit it instead of trying to build one from scratch.

Hope this helps.

# Social comments and analytics for this post

Saturday, January 23, 2010 6:19 PM by uberVU - social comments

This post was mentioned on Twitter by brian_henderson: create great looking Silverlight applications: Silverlight Themes: http://is.gd/6GJ3k

# re: Silverlight: Themes

Sunday, January 24, 2010 7:12 AM by Joe

"I think I would copy an existing one close to what I want and then edit it instead of trying to build one from scratch."

Hi Deborah,

If you could document the steps, pieces, parts, etc. on how you created your own theme from scratch, that would make an excellent blog entry.

Some of us "non-artistic" types could use a good tutorial! <grin>

Cheers.

# re: Silverlight: Themes

Sunday, January 24, 2010 4:45 PM by Deborah Kurata

Hi Joe -

The themes used in this post are all the ones that come with the Silverlight Toolkit. I have not created one of my own. I'm not sure I would attempt to build one from scratch.

# re: Silverlight: Themes

Tuesday, January 26, 2010 6:03 AM by Eduardo

Great tip, thanks...

# Theming a Silverlight Application using Existing Themes

Sunday, January 16, 2011 12:20 AM by Deborah's Developer MindScape

There are two ways to apply styles in a Silverlight application: explicit styles and implicit styles

# Theming a Silverlight Application using Existing Themes

Sunday, January 16, 2011 2:01 AM by Deborah's Developer MindScape

There are two ways to apply styles in a Silverlight application: explicit styles and implicit styles

Leave a Comment

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