Telerik UI for WPF

The purpose of this tutorial is to show you how to set a built-in theme to UI for WPF.

Note

Currently Telerik WPF controls support the following themes:

  • Office_Black
  • Office_Blue
  • Office_Silver
  • Expression_Dark
  • Summer
  • Vista
  • Windows 7
  • Transparent
  • Windows8
  • Windows8Touch
  • Metro (obsolete). Should be replaced with Windows8 theme.
Note

The Silverlight themes are located in separate assemblies in order the size of the control assembly to be optimized. While the WPF themes are embedded in the control assemblies.

1. Create a new WPF application or open an existing one.

2. Add a references to the assemblies with the desired Telerik WPF controls.

Note

You can reed more information about the control dependencies in the Control Dependencies topic.

Now you are ready to use the themes either for a single control or for all controls in your application scope.

Note

In the following examples the Vista theme will be used.

Setting Instance-Specific Built-In Theme in XAML

In order to change the theme of a single control in xaml you have to declare a resource of type Theme and set an appropriate key. To complete this procedure follow the instructions below.

1. Open the user control that hosts your control.

2. Declare one of the Telerik WPF controls and set the attached property StyleManager.Theme value to Vista.

3. After executing all steps your code should be similar to this:

CopyXAML
<UserControl x:Class="Test.SampeControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls">
    <Grid>

        <telerikControls:RadSlider x:Name="radSlider"
            telerikControls:StyleManager.Theme="Vista"/>

    </Grid>
</UserControl>

Setting Instance-Specific Built-In Theme in the Code-Behind

You can also choose to change the theme for the Telerik WPF controls in code-behind. To achieve this follow the brief steps described below.

1. Open your user control.

2. Make sure you have explicitly named the target control in xaml.

3. In the constructor of your user control place the following code:

CopyC#
StyleManager.SetTheme( radSlider, new VistaTheme() );
CopyVB.NET
StyleManager.SetTheme(radSlider, New VistaTheme())

The result of both approaches will be similar and can be seen on the next figure.

Setting Application-Wide Built-In Theme in the Code-Behind

Changing the application theme is much similar to changing the theme of single controls in WPF. However, changing the application theme is in much bigger scale as it affects all controls in the scope of your application. You should use the constructor of your application to set the desired theme. Here is a quick glimpse at how to change the application theme:

To change the application theme in code-behind you should follow the instructions below:

1. Open your existing application or create a new one.

2. Open MainWindow.xaml.cs

Note

In this case MainWindow.xaml.cs is your entry point for the application. If you wonder which is your startup window, open the App.xaml file and see the StartupUp attribute:

CopyXAML
<Application x:Class="Test.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Window1.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

3. Declare the following code before the InitializeComponent() call, depending on the name of your theme as follows:

CopyC#
StyleManager.ApplicationTheme = new VistaTheme();
CopyVB.NET
StyleManager.ApplicationTheme = New VistaTheme()

4. After properly executing the following steps your MainWindow class should be similar to this:

CopyC#
public partial class Window1 : Window
{
    public Window1()
    {
        StyleManager.ApplicationTheme = new VistaTheme();
        InitializeComponent();
    }
}
CopyVB.NET
Public Partial Class Window1
    Inherits Window
    Public Sub New()
        StyleManager.ApplicationTheme = New VistaTheme()
        InitializeComponent()
    End Sub
End Class
Caution

Note that setting an application-wide built-in theme will not affect the non Telerik controls. You have to set their theme explicitly.