May 2010 - Posts

This tutorial shows you how to Theme your Silverlight app and allow the user to switch Theme dynamically.

 

Introduction

It’s been a while since Silverlight Toolkit has Theming support, but with the April 2010 version and the new features of Silverlight 4 it is now easier than ever to apply those themes.

What you need to know:

  • ImplicitStyleManager was removed from the Toolkit, this is because implicit styles are now supported in Silverlight 4.
  • The Toolkit has now a Theme control to apply Themes on your pages.
  • Also a ContextMenuService and ContextMenu control that can allow the user to switch Themes at runtime in this scenario.

As of April 2010 here are the themes available from the Toolkit:



You could easily create your own, the XAML files used by those themes can be found on your local folder after installing the toolkit, for the April 2010 version the path is:

C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Themes\Xaml

 

Get Started

If you don’t have it yet, install the latest version of the Silverlight Toolkit from:
http://silverlight.codeplex.com/

 

Then open Visual Studio 2010 and create a new Silverlight Navigation Application (or Silverlight Business Application).

 

Reference Toolkit themes dll

Right click in your Silverlight project, choose “Add Reference…” and select all the System.Windows.Controls.Toolkit.* dll in the .NET tab:

Theme control

With the toolkit installed, you now have a Theme control in your toolbox, add one outside the Frame control of MainPage.xaml. Here I just want the Theme to apply to the content section of the pages.
Then set its ThemeUri property to one of the themes in the referenced dll, note the specific syntax to get a file from a dll:

<toolkit:Theme x:Name="ThemeContainer"
ThemeUri="/System.Windows.Controls.Theming.BubbleCreme;component/Theme.xaml">
<Border x:Name="ContentBorder" Style="{StaticResource ContentBorderStyle}"> <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed"> <navigation:Frame.UriMapper> <uriMapper:UriMapper> <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/> <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/> </uriMapper:UriMapper> </navigation:Frame.UriMapper> </navigation:Frame> </Border> </toolkit:Theme>

If you dragged the Theme control from the toolbox, Visual Studio automatically added the “toolkit” namespace prefix, if not, add the following to the page header:

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

Add a few controls (TextBox, Button, Calendar, …) to the home page (/Views/Home.xaml) and test you app in your browser, you should see the Theme applied in the content section:

That’s is, very easy.

Now let’s add the ability for the user to select a Theme from a list.

 

Add a context menu to list available Themes

Insert a ContextMenu control with the ContextMenuService (so it will appear with a right-click at runtime) inside the Theme control:

<toolkit:ContextMenuService.ContextMenu>
    <toolkit:ContextMenu>
        <toolkit:MenuItem Header="Theme" IsEnabled="False"/>
        <toolkit:Separator />            
        <toolkit:MenuItem Header="Default" />
            
        <toolkit:MenuItem Header="Bubble Creme"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="BubbleCreme"/>

        <toolkit:MenuItem Header="Bureau Black"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="BureauBlack"/>

        <toolkit:MenuItem Header="Bureau Blue"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="BureauBlue"/>

        <toolkit:MenuItem Header="Expression Dark"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="ExpressionDark"/>

        <toolkit:MenuItem Header="Expression Light"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="ExpressionLight"/>

        <toolkit:MenuItem Header="Rainier Orange"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="RainierOrange"/>

        <toolkit:MenuItem Header="Rainier Purple"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="RainierPurple"/>

        <toolkit:MenuItem Header="Shiny Blue"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="ShinyBlue"/>

        <toolkit:MenuItem Header="Shiny Red"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="ShinyRed"/>

        <toolkit:MenuItem Header="Whistler Blue"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="WhistlerBlue"/>
    </toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

You may have to add a reference to this dll:
System.Windows.Input.Toolkit

 

So now the structure of your page should be:

 

Note that each MenuItem is mapped to a Command and pass the Theme name as parameter.

You have to create a new class and implement ICommand interface. The goal here is to get a reference to the Theme control (by name, but you may find better way to do that) and set its ThemeUri property.

public class ThemeChangeCommand : ICommand
{
    #region ICommand Members

    public bool CanExecute(object parameter)
    {
        return true;
    }

    public event EventHandler CanExecuteChanged;

    public void Execute(object parameter)
    {
        Theme themeContainer =
(Theme)((FrameworkElement)Application.Current.RootVisual).FindName("ThemeContainer"); string themeName = parameter as string; if (themeName == null) { themeContainer.ThemeUri = null; } else { themeContainer.ThemeUri =
new Uri("/System.Windows.Controls.Theming." + themeName +
";component/Theme.xaml", UriKind.RelativeOrAbsolute); } if (CanExecuteChanged != null) CanExecuteChanged(this, new EventArgs()); } #endregion }

If using the “Silverlight Business Application” template, you should change with something like:

Theme themeContainer = (Theme)((FrameworkElement)
((ContentControl)Application.Current.RootVisual).Content).FindName("ThemeContainer");


Finally put the Command in Resource of MainPage.xaml (or in Application Resource):

<Grid.Resources>
     <local:ThemeChangeCommand x:Key="themeCommand" />
</Grid.Resources>

“local” would be the namespace prefix of my app. 

 

Test!

Now when you run the test page you can right click and choose a Theme:

After selected “Shiny Red”:

Or “Bureau Blue”:

Now you would have to store the user preference. You have multiple strategy (Isolated Storage, Server Profile, even cookies, …) so this could lead to a future blog post...

 

Download the code

 

If you use or plan to use WCF RIA Services, here is your chance to shape the future of this product, vote or propose features for vNext in this page:
http://dotnet.uservoice.com/forums/57026-wcf-ria-services

You can find help and ask questions on the current release of RIA Services on the official forum:
http://forums.silverlight.net/forums/53.aspx

Here are some interesting links about Silverlight security (I learnt a lot from the first document):

Silverlight security whitepaper:
> http://download.microsoft.com/download/A/1/A/A1A80A28-907C-4C6A-8036-782E3792A408/Silverlight Security Overview.docx
This reading gives you a lot of insight into features like Isolated Storage, Local Messaging, Cross-Site Scripting (XSS), Sandbox, Validate input, https, ….

Shawn Wildermuth’s session at MIX10:
> Securing Microsoft Silverlight Applications 
Shawn shows some useful tips like protecting your xap file like any web page.

MSDN library documentation:
> http://msdn.microsoft.com/en-us/library/cc972657(VS.95).aspx

As any client technology Silverlight app must be secured so if you are building such app these resources should be a must.

Posted by pluginbaby | with no comments
Filed under:

Last week I did a presentation for the Launch of the new Vancouver Silverlight User Group (http://vanslug.net). I had a touch screen laptop so I started my presentation with the Multi Touch Silverlight Puzzle demo, wow effect guaranteed!

 
So 80 people were Rickrolled this night! You can download and try this demo from this link:
http://www.silverlight.net/community/samples/silverlight-4/html-puzzle/

 

My presentation was mostly inspired by this awesome MIX10 session:
Microsoft Silverlight 4 Business Applications by Scott Morrison
http://live.visitmix.com/MIX10/Sessions/CL08

 

I showed only 2 slides and then built a live demo in Visual Studio 2010 during almost 2 hours, showing:

  • DataGrid enhancements
    • Filter
    • Grouping
    • Sorting
    • Paging
  • DataBinding enhancements
  • DataForm and custom template
  • Charting
  • Right-Click and custom Context Menu
  • Implicit Styles / Themes
  • Fluid UI
  • Clipboard
  • Drop Target
  • Webcam / mic
  • WCF RIA Services
  • Printing

 

Download slides

Download code

To run this code you need Visual Studio 2010 (Express is ok), Silverlight 4 Tools for Visual Studio and the latest version of the Silverlight toolkit (note that all these downloads are free).

 

Technorati Tags:
More Posts