Applying Themes to an Application

This topic details one method of applying a theme application-wide in Visual Studio. We add a class to our application that initializes a built-in theme, then apply the theme to the MainPage of our application.

To apply the theme, complete the following steps:

In Visual Studio, select File | New Project.
In the New Project dialog box, select the language in the left pane and in the right-pane select Silverlight Application. Enter a Name and Location for your project and click OK.
In the New Silverlight Application dialog box, leave the default settings and click OK.
A new application is created and opens with the MainPage.xaml file displayed in XAML view.
In the Solution Explorer, right-click the project and choose Add Reference.
In the Add Reference dialog box choose the C1.Silverlight.Theming nd C1.Silverlight.Theming.RainierOrange assemblies and click OK.
In the Solution Explorer, right-click the project and select Add | New Item.
In the Add New Item dialog box, choose Class from the templates list, name the class "MyThemes," and click the Add button to create the new class. The newly created MyThemes class opens.

Add the following import statements to the top of the class:

Visual Basic	Copy Code
Imports C1.Silverlight.Theming Imports C1.Silverlight.Theming.RainierOrange

C#	Copy Code
using C1.Silverlight.Theming; using C1.Silverlight.RainierOrange;

Add code to the class so it appears like the following:

Visual Basic	Copy Code
Public Class MyThemes Private _myTheme As C1Theme = Nothing Public ReadOnly Property MyTheme() As C1Theme Get If _myTheme Is Nothing Then _myTheme = New C1ThemeRainierOrange() End If Return _myTheme End Get End Property End Class

Visual Basic

Copy Code

Public Class MyThemes
    Private _myTheme As C1Theme = Nothing 
    Public ReadOnly Property MyTheme() As C1Theme 
        Get 
            If _myTheme Is Nothing Then 
                _myTheme = New C1ThemeRainierOrange() 
            End If 
            Return _myTheme 
        End Get 
    End Property 
End Class

C#	Copy Code
public class MyThemes { private static C1Theme _myTheme = null; public static C1Theme MyTheme { get { if (_myTheme == null) _myTheme = new C1ThemeRainierOrange(); return _myTheme; } } }

In the Solution Explorer, double-click the App.xaml.vb or App.xaml.cs file.
Add the following import statement to the top of the file, where ProjectName is the name of your application:
Visual Basic
Copy Code
Imports ProjectName
C#
Copy Code
using ProjectName;

Visual Basic	Copy Code
Imports ProjectName

C#	Copy Code
using ProjectName;

Add code to the Application_Startup event of the App.xaml.vb or App.xaml.cs file so it appears like the following:

Visual Basic	Copy Code
Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup Dim MyMainPage As New MainPage() Dim themes As New MyThemes themes.MyTheme.Apply(MyMainPage) Me.RootVisual = MyMainPage End Sub

Visual Basic

Copy Code

Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
    Dim MyMainPage As New MainPage() 
    Dim themes As New MyThemes 
    themes.MyTheme.Apply(MyMainPage) 
    Me.RootVisual = MyMainPage 
End Sub

C#	Copy Code
private void Application_Startup(object sender, StartupEventArgs e) { MainPage MyMainPage = new MainPage(); MyThemes.MyTheme.Apply(MyMainPage); this.RootVisual = MyMainPage; }

Now any control you add to the MainPage.xaml file is automatically themed.

Return to the MainPage.xaml file and place the cursor between the <Grid> and</Grid> tags in XAML view.
In the Toolbox, double-click the C1DropDown icon to add the control to the project.
Update the control's markup so it appears like the following:
HTML
Copy Code
<c1:C1DropDown Width="100" Height="30"></c1:C1DropDown>

HTML	Copy Code
<c1:C1DropDown Width="100" Height="30"></c1:C1DropDown>

What You’ve Accomplished

Run your project and observe that the C1DropDown control now appears in the RainierOrange theme. Now you can change the theme in the MyThemes class.

For example, to change to the ExpressionDark theme:

Add a reference to the C1.Theming.Silverlight.ExpressionDark.dll assembly.
Open the MyThemes class in your project and add the following import statements to the top of the class:
Visual Basic
Copy Code
Imports C1.Silverlight.Theming.ExpressionDark
C#
Copy Code
using C1.Silverlight.Theming.ExpressionDark;

Visual Basic	Copy Code
Imports C1.Silverlight.Theming.ExpressionDark

C#	Copy Code
using C1.Silverlight.Theming.ExpressionDark;

Update code in the class so it appears like the following:

Visual Basic	Copy Code
Public Class MyThemes Private _myTheme As C1Theme = Nothing Public ReadOnly Property MyTheme() As C1Theme Get If _myTheme Is Nothing Then _myTheme = New C1ThemeExpressionDark() End If Return _myTheme End Get End Property End Class

Visual Basic

Copy Code

Public Class MyThemes 
    Private _myTheme As C1Theme = Nothing 
    Public ReadOnly Property MyTheme() As C1Theme 
        Get 
            If _myTheme Is Nothing Then 
                _myTheme = New C1ThemeExpressionDark() 
            End If 
            Return _myTheme 
        End Get 
    End Property 
End Class

C#	Copy Code
public class MyThemes { private static C1Theme _myTheme = null; public static C1Theme MyTheme { get { if (_myTheme == null) _myTheme = new C1ThemeExpressionDark(); return _myTheme; } } }

Note that the above steps apply the theme to the MainPage.xaml file. To apply the theme to additional pages, add the following code to each page:

Visual Basic	Copy Code
Dim themes As New MyThemes themes.MyTheme.Apply(MyMainPage)

C#	Copy Code
MyThemes.MyTheme.Apply(LayoutRoot);

The theme is applied to the page. So, you only need change one line of code to the class to change the theme, and you only need add one line of code to each page to apply the theme.