Silverlight Toolkit themes make it easy to create apps with a designer look

I’ve gotten some feedback from customers that they have pressure from their management to create Silverlight apps that look very visually appealing, but these customers, who are primarily developers, lack the tools, design skills or time to put together these kinds of applications. Let me recommend the themes that ship as part of the Silverlight Toolkit as a solution to this problem. I am really impressed with how great these themes look and most importantly, how easy they are to use.

The first step is to install the latest version of the Toolkit from here.

There are Silverlight 3 Beta and Silverlight 2 versions of the toolkit, so make sure you grab the right one. The examples I show were created with the Silverlight 3 Beta.

Once you’ve got the Toolkit installed, create a new Silverlight project with Visual Studio. Then drag a theme from the Toolbox to the XAML editing surface and VS takes care of the assembly references and xml namespace for you. The themes are all in their own assemblies to minimize the download cost to the user. In addition to the assembly for the theme you are using, you’ll get the System.Windows.Controls.Theming.Toolkit assembly, which contains the ImplicitStyleManager (ISM). ISM provides behavior similar to the built-in theming behavior available in WPF.

Here’s some images of what VS takes care of for you:

A theme inherits from ContentControl and so therefore can contain one child. Because of this, you’ll probably add a container control inside the theme tags and any additional controls you need inside of this container. The theme is then applied to all of its contents. It took me all of 5 minutes to put together something that looked like this, and I spent 4 minutes moving around the controls and changing their content.

Here’s the XAML for the example above:

<UserControl xmlns:shinyBlue="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.ShinyBlue"

xmlns:bureauBlack="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.BureauBlack"

xmlns:bubbleCreme="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.BubbleCreme"

x:Class="ThemePlay.MainPage"

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="413">

<StackPanel x:Name="LayoutRoot" Background="White">

<bubbleCreme:BubbleCremeTheme>

<Border BorderThickness="3">

<StackPanel>

<TextBlock Text="BubbleCreme Theme-Now I can read this" />

<CheckBox Content="CheckBox" Margin="5"

IsChecked="true" />

<Button HorizontalAlignment="Left" Content="Button"

Width="150" Margin="5"/>

<RadioButton Content="RadioButton" Margin="5" />

<TextBox Text="A TextBox" Margin="5" />

</StackPanel>

</Border>

</bubbleCreme:BubbleCremeTheme>

<bureauBlack:BureauBlackTheme>

<Border BorderThickness="3">

<StackPanel>

<TextBlock Text="BureauBlack Theme" Margin="5" />

<CheckBox Content="CheckBox" Margin="5"

IsChecked="true" />

<Button HorizontalAlignment="Left"

Content="Button" Width="150" Margin="5"/>

<RadioButton Content="RadioButton" Margin="5" />

<TextBox Text="A TextBox" Margin="5" />

</StackPanel>

</Border>

</bureauBlack:BureauBlackTheme>

<shinyBlue:ShinyBlueTheme>

<Border BorderThickness="3">

<StackPanel>

<TextBlock Text="ShinyBlue Theme" />

<CheckBox Content="CheckBox" Margin="5"

<Button HorizontalAlignment="Left"

Content="Button" Width="150" Margin="5"/>

<RadioButton Content="RadioButton" />

<TextBox Text="A TextBox" />

</StackPanel>

</Border>

</shinyBlue:ShinyBlueTheme>

</StackPanel>

</UserControl>

Also, because of the way Silverlight applies property values, you can easily override some of the property settings locally if you don’t like the way things look. For example, I think the TextBlock’s text color is too light in the BubbleCreme theme so I explicitly set the foreground value in XAML.

<bubbleCreme:BubbleCremeTheme>

<Border BorderThickness="3">

<StackPanel>

<TextBlock Foreground="DimGray"

Text="BubbleCreme Theme-Now I can read this" />

<CheckBox Content="CheckBox" Margin="5" IsChecked="true" />

<Button HorizontalAlignment="Left"

Content="Button" Width="150" Margin="5"/>

<RadioButton Content="RadioButton" Margin="5" />

<TextBox Text="A TextBox" Margin="5" />

</StackPanel>

</Border>

</bubbleCreme:BubbleCremeTheme>

Here’s how my TextBlock looks now:

Additionally, you can fully customize a theme using Visual Studio and/or Expression Blend. I am not going to get in to detail on this but Mehdi has a series of blog posts that walk you through customizing themes.

I hope you have as much fun playing around with the themes as I did. Oh, and I hope your boss loves your new professional-looking Silverlight apps.

--Cheryl

Comments

• Anonymous
  April 09, 2009
  PingBack from http://blogs.msdn.com/silverlight_sdk/archive/2009/04/09/silverlight-toolkit-themes-make-it-easy-to-create-apps-with-a-designer-look.aspx

• Anonymous
  April 14, 2009
  Queria partilhar convosco algumas leituras que ando a fazer esta semana, dedicadas ao silverlight ou

• Anonymous
  December 23, 2010
  Hi, this is Great post but I would like to know whether we can use this with windows phone 7 thanks

• Anonymous
  April 28, 2011
  Once Microsoft adds cut-and-paste to their Windows Phone 7 UI I'll begin to care what I can accomplish on it as a developer -- it's not even supported yet for simple text.  Also there's that whole 'OS can't be updated' dilemma, did they fix that yet?