Getting started with SkinManager for WPF

The SfSkinManager helps to apply the themes for both syncfusion and framework controls. There are 22 built-in themes that can be applied using SfSkinManager for rich user interface experience. Some of the built-in themes color derivations can be customized using ThemeStudio.

NOTE

Theme studio based on themes provides improved consistency and uniqueness among various controls compared to other themes. Its recommended to use theme studio based themes in application over other themes.

Themes List

Below table lists available themes and assembly or nuget reference to use the same in application.

Styles	Assembly	NuGet package	Supported in ThemeStudio	Alternative theme suggestion to use
MaterialLight	Syncfusion.Themes.MaterialLight.Wpf.dll	[Syncfusion.Themes.MaterialLight.WPF](https://www.nuget.org/packages/Syncfusion.Themes.MaterialLight.WPF/)	Yes	-
MaterialDark	Syncfusion.Themes.MaterialDark.Wpf.dll	[Syncfusion.Themes.MaterialDark.WPF](https://www.nuget.org/packages/Syncfusion.Themes.MaterialDark.WPF/)	Yes	-
MaterialLightBlue	Syncfusion.Themes.MaterialLightBlue.Wpf.dll	[Syncfusion.Themes.MaterialLightBlue.WPF](https://www.nuget.org/packages/Syncfusion.Themes.MaterialLightBlue.WPF/)	Yes	-
MaterialDarkBlue	Syncfusion.Themes.MaterialDarkBlue.Wpf.dll	[Syncfusion.Themes.MaterialDarkBlue.WPF](https://www.nuget.org/packages/Syncfusion.Themes.MaterialDarkBlue.WPF/)	Yes	-
Office2019Colorful	Syncfusion.Themes.Office2019Colorful.Wpf.dll	[Syncfusion.Themes.Office2019Colorful.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2019Colorful.WPF/)	Yes	-
Office2019Black	Syncfusion.Themes.Office2019Black.Wpf.dll	[Syncfusion.Themes.Office2019Black.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2019Black.WPF/)	Yes	-
Metro	Syncfusion.Themes.Metro.Wpf.dll	[Syncfusion.Themes.Metro.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Metro.WPF/)	-	-
Lime	Syncfusion.Themes.Lime.Wpf.dll	[Syncfusion.Themes.Lime.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Lime.WPF/)	-	-
Saffron	Syncfusion.Themes.Saffron.Wpf.dll	[Syncfusion.Themes.Saffron.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Saffron.WPF/)	-	-
Blend	Syncfusion.Themes.Blend.Wpf.dll	[Syncfusion.Themes.Blend.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Blend.WPF/)	-	MaterialDark, Office2019Black
Office2013White	Syncfusion.Themes.Office2013White.Wpf.dll	[Syncfusion.Themes.Office2013White.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2013White.WPF/)	-	Office2019Colorful
Office2013LightGray	Syncfusion.Themes.Office2013LightGray.Wpf.dll	[Syncfusion.Themes.Office2013LightGray.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2013LightGray.WPF/)	-	-
Office2013DarkGray	Syncfusion.Themes.Office2013DarkGray.Wpf.dll	[Syncfusion.Themes.Office2013DarkGray.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2013DarkGray.WPF/)	-	-
VisualStudio2013	Syncfusion.Themes.VisualStudio2013.Wpf.dll	[Syncfusion.Themes.VisualStudio2013.WPF](https://www.nuget.org/packages/Syncfusion.Themes.VisualStudio2013.WPF/)	-	-
Office2010Black	Syncfusion.Themes.Office2010Black.Wpf.dll	[Syncfusion.Themes.Office2010Black.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2010Black.WPF/)	-	-
Office2010Blue	Syncfusion.Themes.Office2010Blue.Wpf.dll	[Syncfusion.Themes.Office2010Blue.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2010Blue.WPF/)	-	-
Office2010Silver	Syncfusion.Themes.Office2010Silver.Wpf.dll	[Syncfusion.Themes.Office2010Silver.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2010Silver.WPF/)	-	-
Office365	Syncfusion.Themes.Office365.Wpf.dll	[Syncfusion.Themes.Office365.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office365.WPF/)	-	Office2019Colorful
Office2016Colorful	Syncfusion.Themes.Office2016Colorful.Wpf.dll	[Syncfusion.Themes.Office2016Colorful.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2016Colorful.WPF/)	-	Office2019Colorful
Office2016White	Syncfusion.Themes.Office2016White.Wpf.dll	[Syncfusion.Themes.Office2016White.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2016White.WPF/)	-	Office2019Colorful
Office2016DarkGray	Syncfusion.Themes.Office2016DarkGray.Wpf.dll	[Syncfusion.Themes.Office2016DarkGray.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2016DarkGray.WPF/)	-	-
VisualStudio2015	Syncfusion.Themes.VisualStudio2015.Wpf.dll	[Syncfusion.Themes.VisualStudio2015.WPF](https://www.nuget.org/packages/Syncfusion.Themes.VisualStudio2015.WPF/)	-	-

Apply a theme to a control

Add SkinManager reference

There are several ways to add the Syncfusion SfSkinManager reference in Visual Studio WPF project. The following steps will help to add through XAML Code,

1) Add reference to Syncfusion.SfSkinManager.WPF assembly or Syncfusion.SfSkinManager.WPF nuget package to the project.
2) Import Syncfusion WPF schema http://schemas.syncfusion.com/wpf or the assembly namespace Syncfusion.SfSkinManager in XAML page.

Add SfSkinManager Reference

xaml
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf" />

Add theme assembly reference

The SfSkinManager supports to apply themes listed in themes list. To use a theme in application, you need to add reference to corresponding theme assembly. For example, to apply MaterialDark theme, attach Syncfusion.Themes.MaterialDark.Wpf assembly or NuGet reference to the project. When you are applying theme to a Window, SkinManager inherits the same theme to all the elements inside window.

Add theme assembly reference

Set visual style

Themes can applied to both syncfusion and framework controls by using VisualStyle attached property of the SfSkinManager. The theme assemblies has resource dictionaries with styles of controls. So when you set VisualStyle property, skin manager merges the theme resource dictionaries of an element to which theme applied and its descendants into the resource dictionary of the element to which theme is applied or Application.Current.Resource.

NOTE

When you are applying theme to a Window or any element, SkinManager inherits the same theme to all its descendants.

xaml
c#
<syncfusion:ChromelessWindow x:Class="DataGrid_Themes.MainWindow"
                             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                             xmlns:local="clr-namespace:DataGrid_Themes"
                             xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
							 xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
                             Icon="App.ico"
                             Title="Getting Started"
                             WindowStartupLocation="CenterScreen"
                             syncfusionskin:SfSkinManager.VisualStyle="MaterialDark">

    <Grid DataContext="{StaticResource viewmodel}">
        <syncfusion:SfDataGrid Name="sfgrid" Margin="5"
                                       AutoGenerateColumns="False"
                                       AllowDraggingColumns="True"
                                       AllowEditing="True"
                                       LiveDataUpdateMode="AllowDataShaping"
                                       AllowFiltering="True"
                                       HeaderRowHeight="26"
                                       SelectionMode="Extended"
                                       ColumnSizer="Auto"
                                       ItemsSource="{Binding EmployeeDetails}">
        </syncfusion:SfDataGrid>
    </Grid>
</syncfusion:ChromelessWindow>
SfSkinManager.SetVisualStyle(this, "MaterialDark");

Applied skinmanager theme for WPF ChromelessWindow and SfDataGrid control

NOTE

View sample in GitHub.

Apply a theme globally in the application

By default, SfSkinManager merges the required resource files from the theme assembly to the element to which theme is applied. To apply a theme globally in an application, set the ApplyStylesOnApplication property to True. It merges all the theme resource files to Application.Current.Resources.

NOTE

The SfSkinManager.ApplyStylesOnApplication static property should be set before InitializeComponent of window or in application start up, if you are applying for multiple windows.

c#
SfSkinManager.ApplyStylesOnApplication = true;

Apply themes to the controls derived from syncfusion controls

To apply the themes to derived control using SfSkinManager, call SetResourceReference method and pass the StyleProperty and derived control type as parameters.

xaml
<local:SfDataGridExt x:Name="grid"
                             AllowGrouping="True"
                             AutoGenerateColumns="False"
                             ItemsSource="{Binding EmployeeDetails}"
                             ShowGroupDropArea="True">
            <local:SfDataGridExt.Resources>
                <ResourceDictionary>
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="/Syncfusion.SfGrid.WPF;component/Styles/Styles.xaml" />
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
            </local:SfDataGridExt.Resources>
            <local:SfDataGridExt.Columns>
                <syncfusion:GridNumericColumn MappingName="EmployeeAge" />
                <syncfusion:GridTextColumn MappingName="EmployeeName" />
                <syncfusion:GridTextColumn MappingName="EmployeeGender" />
                <syncfusion:GridTextColumn AllowEditing="True" MappingName="Country" />
                <syncfusion:GridNumericColumn MappingName="EmployeeSalary" />
            </local:SfDataGridExt.Columns>
</local:SfDataGridExt>

c#
public class SfDataGridExt : SfDataGrid
    {
        public SfDataGridExt()
        {
            SetResourceReference(StyleProperty, typeof(SfDataGrid));
        }
    }

Clearing SkinManager instance in an application

The SfSkinManager will hold some instance to use it further while applying theme. But this can be cleared using the function named Dispose(object) that needs to be called when you need to clear the theme applied from SfSkinManager as like below code. Here object refers to the element whose instance needs to be cleared.

c#
private void Window_Closed(object sender, EventArgs e) 
{ 
   SfSkinManager.Dispose(this); 
}

How To

Change visual style at runtime

Themes for application can be changed at runtime by changing VisualStyle property. Make sure the new theme assembly is attached as reference in application when applying theme.

Added references for SkinManager and visual style

xaml
<syncfusion:ChromelessWindow x:Class="DataGrid_Themes.MainWindow"
                             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                             xmlns:local="clr-namespace:DataGrid_Themes"
                             xmlns:system="clr-namespace:System;assembly=mscorlib"
                             xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
							 xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
							 syncfusionskin:SfSkinManager.VisualStyle="{Binding ElementName=comboVisualStyle, Path=SelectedValue, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}">

    <syncfusion:ChromelessWindow.Resources>
        <ObjectDataProvider
            x:Key="Themes"
            MethodName="GetValues"
            ObjectType="{x:Type system:Enum}">
            <ObjectDataProvider.MethodParameters>
                <x:Type TypeName="syncfusionskin:VisualStyles" />
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>
    </syncfusion:ChromelessWindow.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ComboBox
                x:Name="comboVisualStyle"
                Grid.Row="0"
                Width="250"
                Margin="5"
                ItemsSource="{Binding Source={StaticResource Themes}}"
                SelectedIndex="18" />
                
        <Grid Grid.Row="1" DataContext="{StaticResource viewmodel}">
            <syncfusion:SfDataGrid Name="sfgrid" Margin="5"
                                       AutoGenerateColumns="False"
                                       AllowDraggingColumns="True"
                                       AllowEditing="True"
                                       LiveDataUpdateMode="AllowDataShaping"
                                       AllowFiltering="True"
                                       HeaderRowHeight="26"
                                       SelectionMode="Extended"
                                       ColumnSizer="Auto"
                                       ItemsSource="{Binding EmployeeDetails}">
             
            </syncfusion:SfDataGrid>
        </Grid>
    </Grid>
</syncfusion:ChromelessWindow>

NOTE

View sample in GitHub.