Saturday, 25 August 2012

How to change Theme dynamically in SilverLight 4

This article will show how you can change Themes in Silverlight  dynamically at runtime.
Available themes in SilverLight are-

1)Bubble Creme
2)Bureau Black
3)Bureau Blue
4)Expression Dark
5)Expression Light
6)Rainier Orange
7)Rainier Purple
8)Shiny Blue
9)Shiny Red
10)Twilight Blue
11)Whistler Blue

To implement the Themes for the MainPage.xaml .Follow the following Steps:

1)Make sure you have added all the Theming dlls which are available in April2010 silverlight Toolkit. You can download this toolkit from
http://silverlight.codeplex.com/releases/view/43528

2)Copy and paste following code in Views/Home.xaml
In the below code add the following two xml namespaces
xmlns:toolkit=http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit
xmlns:local="clr-namespace:newApp" (‘newApp’ is the assembly name of Silverlight project)

<navigation:Page x:Class="newApp.Home"
    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:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    xmlns:local="clr-namespace:newApp"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
    Title="Home"
    Style="{StaticResource PageStyle}" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <local:ThemeChangeCommand x:Key="themeCommand" />
        </Grid.Resources>
       
        <Button Content="New Theme" Height="23" HorizontalAlignment="Left" Margin="60,111,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
        <ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">

            <StackPanel x:Name="ContentStackPanel">

                <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
                                   Text="Home"/>
                <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
                                   Text="Home page content"/>
                <ListBox Height="100" Name="listBox1" Width="120" />
                <CheckBox Content="CheckBox" Height="16" Name="checkBox1" />
                <RadioButton Content="RadioButton" Height="16" Name="radioButton1" />
                <TextBlock Height="23" Name="textBlock1" Text="TextBlock" Width="119" />
                <ComboBox Height="23" Name="comboBox1" Width="120" />
            </StackPanel>

        </ScrollViewer>
    </Grid>

</navigation:Page>


3)Add one Class called   ThemeChangeCommand.cs  for handling the requests.
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.Theming;

namespace newApp
{
  
        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
       
    }
}


4)The job is done. Press F5 and once the page is loaded Right-Click on the MainPage to get the Context Menu having the list of available themes .Click on the Theme of your choice and then you can see all the controls according to the new Theme. See the below screen shot for more details

Post a Comment