Creating a theme switcher application

This is kind of a continuation of yesterdays tutorial, we are taking the theme-switching to a new level, allowing the user to switch themes whenever they want to.

Requirements

Before you begin there are a few things that you need.

• Visual Studio / Visual Basic 2008 Express

Just Beginning…

Firstly, you need to start by either creating a new blank project, or opening your WPF project.  Start by putting 6 radio buttons with the appropriate names. Aero, Classic, Luna, Luna Homestead, Luna Metallic and Royale. You can add other controls if you wish, this is what you should have now.

Radiobuttons

And the XAML for that is below.

 <RadioButton Height="16" Margin="12,12,0,0" Name="RadioButton1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120">Aero</RadioButton>
 <RadioButton HorizontalAlignment="Left" Margin="12,34,0,0" Name="RadioButton2" Width="120" Height="16" VerticalAlignment="Top">Classic</RadioButton>
 <RadioButton Height="16" Margin="12,56,0,0" Name="RadioButton3" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120">Luna</RadioButton>
 <RadioButton Height="16" Margin="12,78,0,0" Name="RadioButton4" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120">Luna Homestead</RadioButton>
 <RadioButton Height="16" Margin="12,100,0,0" Name="RadioButton5" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120">Luna Metallic</RadioButton>
 <RadioButton Margin="12,122,0,124" Name="RadioButton6" HorizontalAlignment="Left" Width="120">Royale</RadioButton>

Adding the code…

Okay so now we have a functional radio button layout, we just need to add the code for when they are checked. Firstly, click on the Aero radio button, and then click on Properties, events and find the ‘Click’ event. Give it a good name like ‘AeroTheme’ or something, once you hit enter you will go into a code editor.  Above the newly created sub, add this line of code:

Dim Dictionary As New ResourceDictionary

Basically, this creates a new ResourceDictionary for us to use. Now in that newly created sub, add inside this following code.

Dictionary.Source = New Uri("/PresentationFramework.Aero, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/aero.normalcolor.xaml", UriKind.Relative)
 Application.Current.Resources.MergedDictionaries.Clear()
 Application.Current.Resources.MergedDictionaries.Add(Dictionary)

This chunk of code tells the newly created ResourceDictionary where to look for the resources, and then tells it to clear whatever resources it has already loaded, and then load the specified file. So now, all together if you hit F5, you will have your default windows theme, and if you click on Aero it will turn to Vista’s Aero. Your code should look like this.

Class Window1

 Dim Dictionary As New ResourceDictionary

 Private Sub AeroTheme(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadioButton1.Checked
 Dictionary.Source = New Uri("/PresentationFramework.Aero, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/aero.normalcolor.xaml", UriKind.Relative)
 Application.Current.Resources.MergedDictionaries.Clear()
 Application.Current.Resources.MergedDictionaries.Add(Dictionary)
 End Sub

End Class

You need to do this for all of the other radio buttons. Create their own subs on the Checked event, and then copy the respective code below:

• Aero

 Dictionary.Source = New Uri("/PresentationFramework.Aero, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/aero.normalcolor.xaml", UriKind.Relative)
 Application.Current.Resources.MergedDictionaries.Clear()
 Application.Current.Resources.MergedDictionaries.Add(Dictionary)

• Classic

  Dictionary.Source = New Uri("/PresentationFramework.Classic, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/classic.xaml", UriKind.Relative)
   Application.Current.Resources.MergedDictionaries.Clear()
   Application.Current.Resources.MergedDictionaries.Add(Dictionary)

• Luna

  Dictionary.Source = New Uri("/PresentationFramework.Luna, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/luna.normalcolor.xaml", UriKind.Relative)
   Application.Current.Resources.MergedDictionaries.Clear()
   Application.Current.Resources.MergedDictionaries.Add(Dictionary)

• Luna Homestead

  Dictionary.Source = New Uri("/PresentationFramework.Luna, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/luna.homestead.xaml", UriKind.Relative)
   Application.Current.Resources.MergedDictionaries.Clear()
   Application.Current.Resources.MergedDictionaries.Add(Dictionary)

• Luna Metallic

  Dictionary.Source = New Uri("/PresentationFramework.Luna, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/luna.metallic.xaml", UriKind.Relative)
   Application.Current.Resources.MergedDictionaries.Clear()
   Application.Current.Resources.MergedDictionaries.Add(Dictionary)

• Royale

  Dictionary.Source = New Uri("/PresentationFramework.Royale, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/royale.normalcolor.xaml", UriKind.Relative)
   Application.Current.Resources.MergedDictionaries.Clear()
   Application.Current.Resources.MergedDictionaries.Add(Dictionary)

Now, if you hit F5, and then click on the radio buttons you will see that the theme will get changed instantly. Below is all of the code for this tutorial.

XAML

<Window x:Class="Window1"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="Theme Switcher" Height="184" Width="154">
 <Grid>
 <RadioButton Height="16" Margin="12,12,0,0" Name="RadioButton1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120">Aero</RadioButton>
 <RadioButton HorizontalAlignment="Left" Margin="12,34,0,0" Name="RadioButton2" Width="120" Height="16" VerticalAlignment="Top">Classic</RadioButton>
 <RadioButton Height="16" Margin="12,56,0,0" Name="RadioButton3" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120">Luna</RadioButton>
 <RadioButton Height="16" Margin="12,78,0,0" Name="RadioButton4" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120">Luna Homestead</RadioButton>
 <RadioButton Height="16" Margin="12,100,0,0" Name="RadioButton5" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120">Luna Metallic</RadioButton>
 <RadioButton Margin="12,122,0,124" Name="RadioButton6" HorizontalAlignment="Left" Width="120">Royale</RadioButton>
 <RadioButton Height="16" Margin="12,0,0,12" Name="RadioButton7" VerticalAlignment="Bottom">Royale</RadioButton>
 </Grid>
</Window>

VB

Class Window1

 Dim Dictionary As New ResourceDictionary

 Private Sub AeroTheme(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadioButton1.Checked
 Dictionary.Source = New Uri("/PresentationFramework.Aero, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/aero.normalcolor.xaml", UriKind.Relative)
 Application.Current.Resources.MergedDictionaries.Clear()
 Application.Current.Resources.MergedDictionaries.Add(Dictionary)
 End Sub

 Private Sub ClassicTheme(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadioButton2.Checked
 Dictionary.Source = New Uri("/PresentationFramework.Classic, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/classic.xaml", UriKind.Relative)
 Application.Current.Resources.MergedDictionaries.Clear()
 Application.Current.Resources.MergedDictionaries.Add(Dictionary)
 End Sub

 Private Sub LunaTheme(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadioButton3.Checked
 Dictionary.Source = New Uri("/PresentationFramework.Luna, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/luna.normalcolor.xaml", UriKind.Relative)
 Application.Current.Resources.MergedDictionaries.Clear()
 Application.Current.Resources.MergedDictionaries.Add(Dictionary)
 End Sub

 Private Sub LunaHomesteadTheme(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadioButton4.Checked
 Dictionary.Source = New Uri("/PresentationFramework.Luna, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/luna.homestead.xaml", UriKind.Relative)
 Application.Current.Resources.MergedDictionaries.Clear()
 Application.Current.Resources.MergedDictionaries.Add(Dictionary)
 End Sub

 Private Sub LunaMetallicTheme(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadioButton5.Checked
 Dictionary.Source = New Uri("/PresentationFramework.Luna, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/luna.metallic.xaml", UriKind.Relative)
 Application.Current.Resources.MergedDictionaries.Clear()
 Application.Current.Resources.MergedDictionaries.Add(Dictionary)
 End Sub

 Private Sub RoyaleTheme(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadioButton7.Checked
 Dictionary.Source = New Uri("/PresentationFramework.Royale, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/royale.normalcolor.xaml", UriKind.Relative)
 Application.Current.Resources.MergedDictionaries.Clear()
 Application.Current.Resources.MergedDictionaries.Add(Dictionary)
 End Sub
End Class

I hope you enjoyed this tutorial, look out for more coming soon. Including how to create your own custom window chrome etc.

Thanks for reading.