# Applying Themes to an Application

## Content

The following topic details one method of applying a theme application-wide in Visual Studio. In this topic you'll add a class to your application that initializes a built-in theme. You'll then apply the theme to the MainPage of your application.

To apply the theme, complete the following steps:

1. In Visual Studio, select **File \| New Project**.
2. In the **New Project** dialog box, select the language in the left pane and in the right-pane select WPF Application. Enter a Name and Location for your project and click OK.
3. In the New WPF Application dialog box, leave the default settings and click OK.
    A new application will be created and should open with the **MainPage.xaml** file displayed in XAML view.
4. In the Solution Explorer, right-click the project and choose **Add Reference**.
5. In the Add Reference dialog box choose the C1.WPF.Theming and C1.WPF.Theming.C1Blue assemblies and click OK.
6. In the Solution Explorer, right-click the project and select **Add \| New Item**.
7. In the **Add New Item** dialog box, choose Class from the templates list, name the class "MyThemes", and click the **Add** button to create and a new class. The newly created MyThemes class will open.
8. Add the following import statements to the top of the class:
<br>
    **Visual Basic**

    ```vbnet
    Imports C1.WPF.Theming
    Imports C1.WPF.Theming.C1Blue
    ```

    **csharp**

    ```csharp
    using C1.WPF.Theming;
    using C1.WPF.Theming.C1Blue;
    ```
9. Add code to the class so it appears like the following:
<br>
    **Visual Basic**

    ```vbnet
    Public Class MyThemes
    Private Shared _myTheme As C1Theme = NothingPublic Shared ReadOnly Property MyTheme() As C1Theme
    Get
    If _myTheme Is Nothing Then_myTheme = New C1ThemeRainierOrange()End If
    Return _myThemeEnd GetEnd Property
    End Class
    ```

    **csharp**

    ```csharp
    public class MyThemes
    {
        private static C1Theme _myTheme = null;
        public static C1Theme MyTheme
        {
            get
            {
                    if (_myTheme == null)
                    _myTheme = new C1ThemeRainierOrange();
                    return _myTheme;
            }
        }
    }
    ```
10. In the Solution Explorer, double-click the App.xaml.vb or App.xaml.cs file.
11. Add the following import statement to the top of the file, where ProjectName is the name of your application:

**Visual Basic**

```vbnet
Imports ProjectName
```

**csharp**

```csharp
using ProjectName;
```

12. 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**

```vbnet
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
```

**csharp**

```csharp
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 will automatically be themed.

13. Return to the MainPage.xaml file and place the mouse cursor between the and \</Grid> tags in XAML view.
14. In the Toolbox, double-click the C1DropDown icon to add the control to the project.
15. Update the control's markup so it appears like the following:

```xml
<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. To change the theme chosen, now all you would need to do is change the theme in the **MyThemes** class.

For example, to change to the ExpressionDark theme:

1. Add a reference to the C1.Theming.WPF.ExpressionDark.dll assembly.
2. Open the MyThemes class in your project and add the following import statements to the top of the class:

**Visual Basic**
```vbnet
Imports C1.WPF.Theming.ExpressionDark
```

**csharp**

```csharp
using C1.WPF.Theming.ExpressionDark;
```

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

**Visual Basic**
```vbnet
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
```

**csharp**

```csharp
 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, you would need to add the following code to each page:

**Visual Basic**

```vbnet
Dim themes As New MyThemes
themes.MyTheme.Apply(MyMainPage)
```

**csharp**

```csharp
MyThemes themes = new MyThemes();
themes.MyTheme.Apply(MyMainPage);
```

The theme will then be applied to the page. So, you only have to change one line of code to the class to change the theme, and you only have to add one line of code to each page to apply the theme.

## See Also

[Clear Style Technology](/componentone/docs/wpf/online-studio/Theming/ClearStyleTechnology)