By David Espino

When we create a Silverlight application we should want to apply different themes to our application. Silverlight toolkit provides us with a simple way to achieve this. For this example you need  the following prerequisites:

·         Silverlight 3.0.

·         Silverlight Toolkit. You could download from this link http://silverlight.codeplex.com/Wikipage

·         Visual Studio 2008.

·         Expression Blend 3.0. This tool is not really needed, but I recommend to use Blend when you are going to do some UI design, is easier and faster than Visual studio for this labors.

First of all, you need to create a Silverlight project with a Web Site.

Then you need to add some controls to apply the theme to them. For this example add some textboxes, some textblocks and a button. Here’s is the xaml I’ve just created.

The important line is:

With this line we’re indicating to Silverlight we are going to use the Theming dll provided by the Silverlight toolkit. This won’t work without the corresponding references, so open the project with Visual Studio then add the corresponding reference to System.Windows.Controls.Theming.Toolkit.dll.

Navigate to the following path C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Toolkit\Nov09\Themes\Xaml in your computer, this is default installation path of Silverlight Toolkit in Windows 7 32 bits (you should find the path if you’re working with other OS), and copy two files (or more if you want so) to your root application folder. I personally copied the following:

·         System.Windows.Controls.Theming.BubbleCreme.xaml

·         System.Windows.Controls.Theming.BureauBlue.xaml

Use the following code to see theme changing:

private void UserControl_Loaded(object sender, System.Windows.RoutedEventArgs e)

            {

                  // TODO: Add event handler implementation here.

            Uri uri = new Uri(@"SLTheming;component/System.Windows.Controls.Theming.BureauBlue.xaml", UriKind.Relative);           

            ImplicitStyleManager.SetResourceDictionaryUri(LayoutRoot, uri);

            ImplicitStyleManager.SetApplyMode(LayoutRoot, ImplicitStylesApplyMode.Auto);

            ImplicitStyleManager.Apply(LayoutRoot);

            }

            private void Button_Click(object sender, System.Windows.RoutedEventArgs e)

            {

            Uri uri = new Uri(@"SLTheming;component/System.Windows.Controls.Theming.BubbleCreme.xaml", UriKind.Relative);

            ImplicitStyleManager.SetResourceDictionaryUri(LayoutRoot, uri);

            ImplicitStyleManager.SetApplyMode(LayoutRoot, ImplicitStylesApplyMode.Auto);

            ImplicitStyleManager.Apply(LayoutRoot);

            }

With this code, start your website and press the button to see how your web site changes from this:

To this:

Regards.