New to Telerik UI for WPF? Download free 30-day trial

Setting a Theme with StyleManager

This help article will show you how to set a built-in theme to Telerik UI for WPF. You will also see code examples for these related topics:

Telerik's WPF controls support the following themes:

  • Office_Black
  • Office_Blue
  • Office_Silver
  • Expression_Dark
  • Summer
  • Vista
  • Windows7
  • Transparent
  • Windows8
  • Windows8Touch
  • Office2016
  • Office2016Touch
  • Office2013
  • Office2019
  • VisualStudio2013
  • VisualStudio2019
  • Green
  • Material
  • Fluent
  • Crystal

The Silverlight themes are located in separate assemblies so that the size of the control assembly is optimized (smaller). The WPF themes are embedded in the control assemblies.

With Q1 2014 the Themes folder, containing the standard themes used with StyleManager, is not provided in the installation package anymore. They can be separately downloaded from the UI for WPF download page in your Telerik account.

In order to use one of the themes with the StyleManager you need to create a new WPF application or open an existing one and add a references to the assemblies with the desired Telerik WPF controls.

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

You are now ready to apply the themes to either a single control or for all controls in your application scope.

The following examples use the Vista theme.

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 Example 1.

Example 1: Changing the theme of a RadSlider to Vista in XAML

<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:

    Example 2: Changing the theme of a RadSlider to Vista in code

        StyleManager.SetTheme( radSlider, new VistaTheme() ); 
    
        StyleManager.SetTheme(radSlider, New VistaTheme()) 
    

Figure 1: RadSlider with Vista theme applied Common Styling Theming Setting Built In Theme 020 WPF

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

Changing the application theme is similar to changing the theme of single controls in WPF. However, changing the application theme has a much bigger impact as it affects all controls in the scope of your application. You should use the constructor of your application to set the desired theme. The steps below describe how to change the application theme:

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

  2. Open MainWindow.xaml.cs. 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 StartupUri attribute.

    Example 3: Setting the application's StartupUri

        <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:

    Example 4: Setting the application theme in code

        StyleManager.ApplicationTheme = new VistaTheme(); 
    
        StyleManager.ApplicationTheme = New VistaTheme() 
    
  4. After properly executing the steps your MainWindow class should be similar to Example 2.

    Example 5: Set application-specific theme

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

See Also

In this article