Getting Started with WPF Skin Manager

21 Oct 202118 minutes to read

The SfSkinManager helps you to apply the themes for both Syncfusion and Framework controls. There are 27 built-in themes that can be applied using the SfSkinManager for a rich user interface experience. Some of the built-in themes color derivations can be customized using WPF Theme Studio.

NOTE

Theme Studio-based themes provide improved consistency and uniqueness among various controls when compared to other themes. It is preferable to use Theme Studio-based themes in the application over other themes.

Themes list

The following table lists the available themes as well as the assembly or NuGet reference to be used in the application.

Styles Assembly NuGet package Supported in ThemeStudio Alternative theme suggestion to use
FluentLight Syncfusion.Themes.FluentLight.Wpf.dll

Syncfusion.Themes.FluentLight.WPF

Yes -
FluentDark Syncfusion.Themes.FluentDark.Wpf.dll

Syncfusion.Themes.FluentDark.WPF

Yes -
MaterialLight Syncfusion.Themes.MaterialLight.Wpf.dll

Syncfusion.Themes.MaterialLight.WPF

Yes -
MaterialDark Syncfusion.Themes.MaterialDark.Wpf.dll

Syncfusion.Themes.MaterialDark.WPF

Yes -
MaterialLightBlue Syncfusion.Themes.MaterialLightBlue.Wpf.dll

Syncfusion.Themes.MaterialLightBlue.WPF

Yes -
MaterialDarkBlue Syncfusion.Themes.MaterialDarkBlue.Wpf.dll

Syncfusion.Themes.MaterialDarkBlue.WPF

Yes -
Office2019Colorful Syncfusion.Themes.Office2019Colorful.Wpf.dll

Syncfusion.Themes.Office2019Colorful.WPF

Yes -
Office2019Black Syncfusion.Themes.Office2019Black.Wpf.dll

Syncfusion.Themes.Office2019Black.WPF

Yes -
Office2019White Syncfusion.Themes.Office2019White.Wpf.dll

Syncfusion.Themes.Office2019White.WPF

Yes -
Office2019DarkGray Syncfusion.Themes.Office2019DarkGray.Wpf.dll

Syncfusion.Themes.Office2019DarkGray.WPF

Yes -
Office2019HighContrast Syncfusion.Themes.Office2019HighContrast.Wpf.dll

Syncfusion.Themes.Office2019HighContrast.WPF

Yes -
Office2019HighContrastWhite Syncfusion.Themes.Office2019HighContrastWhite.Wpf.dll

Syncfusion.Themes.Office2019HighContrastWhite.WPF

Yes -
SystemTheme Syncfusion.Themes.SystemTheme.Wpf.dll

Syncfusion.Themes.SystemTheme.WPF

Yes -
Metro Syncfusion.Themes.Metro.Wpf.dll

Syncfusion.Themes.Metro.WPF

- FluentLight, Office2019Colorful
Lime Syncfusion.Themes.Lime.Wpf.dll

Syncfusion.Themes.Lime.WPF

- FluentLight, Office2019Colorful
Saffron Syncfusion.Themes.Saffron.Wpf.dll

Syncfusion.Themes.Saffron.WPF

- FluentLight, Office2019Colorful
Blend Syncfusion.Themes.Blend.Wpf.dll

Syncfusion.Themes.Blend.WPF

- FluentDark, MaterialDark, Office2019Black
Office2013White Syncfusion.Themes.Office2013White.Wpf.dll

Syncfusion.Themes.Office2013White.WPF

- Office2019White
Office2013LightGray Syncfusion.Themes.Office2013LightGray.Wpf.dll

Syncfusion.Themes.Office2013LightGray.WPF

- Office2019Colorful
Office2013DarkGray Syncfusion.Themes.Office2013DarkGray.Wpf.dll

Syncfusion.Themes.Office2013DarkGray.WPF

- Office2019DarkGray
VisualStudio2013 Syncfusion.Themes.VisualStudio2013.Wpf.dll

Syncfusion.Themes.VisualStudio2013.WPF

- -
Office2010Black Syncfusion.Themes.Office2010Black.Wpf.dll

Syncfusion.Themes.Office2010Black.WPF

- -
Office2010Blue Syncfusion.Themes.Office2010Blue.Wpf.dll

Syncfusion.Themes.Office2010Blue.WPF

- -
Office2010Silver Syncfusion.Themes.Office2010Silver.Wpf.dll

Syncfusion.Themes.Office2010Silver.WPF

- -
Office365 Syncfusion.Themes.Office365.Wpf.dll

Syncfusion.Themes.Office365.WPF

- Office2019Colorful
Office2016Colorful Syncfusion.Themes.Office2016Colorful.Wpf.dll

Syncfusion.Themes.Office2016Colorful.WPF

- Office2019Colorful
Office2016White Syncfusion.Themes.Office2016White.Wpf.dll

Syncfusion.Themes.Office2016White.WPF

- Office2019White
Office2016DarkGray Syncfusion.Themes.Office2016DarkGray.Wpf.dll

Syncfusion.Themes.Office2016DarkGray.WPF

- Office2019DarkGray
VisualStudio2015 Syncfusion.Themes.VisualStudio2015.Wpf.dll

Syncfusion.Themes.VisualStudio2015.WPF

- -

Apply a theme to a control

Add SkinManager reference

There are several ways for including the Syncfusion SfSkinManager reference in the Visual Studio WPF project. The following steps will help you to add by XAML Code:

1) Add a reference to the 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 into a XAML page.

Add SfSkinManager Reference

<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 a theme assembly reference

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

Add theme assembly reference

Set theme

Themes will be applied to both Syncfusion and Framework controls by using Theme attached property of the SfSkinManager. The theme assemblies have resource dictionaries with styles of controls. Thus, when the Theme property is set, the skin manager merges the theme resource dictionaries of an element to which the theme is applied and its descendants into the resource dictionary of the element to which the theme is applied or Application.Current.Resource.

NOTE

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

<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.Theme="{syncfusionskin:SkinManagerExtension ThemeName=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.SetTheme(this, new Theme("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 the 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 the window or during application start up, when applying for multiple windows.

SfSkinManager.ApplyStylesOnApplication = true;

Customize theme colors and fonts in the application

To customize the theme colors and fonts in the application, call RegisterThemeSettings method and pass the theme name and respective theme setting instance as parameters.

Each theme supported by the theme studio has its own theme settings class, which begins with the prefix of the themes’ name. For example, if the theme name is MaterialDark, then there will be theme settings class called MaterialDarkThemeSettings.

NOTE

Need to register theme settings before setting respective theme for window or control.

Please find the complete list of theme names, respective theme settings class, and supported palette.

Styles/Theme name Respective theme settings class to customize Supported palette
FluentLight

FluentLightThemeSettings

FluentPalette

FluentDark

FluentDarkThemeSettings

FluentPalette

MaterialLight

MaterialLightThemeSettings

MaterialPalette

MaterialDark

MaterialDarkThemeSettings

MaterialPalette

MaterialLightBlue

MaterialLightBlueThemeSettings

MaterialPalette

MaterialDarkBlue

MaterialDarkBlueThemeSettings

MaterialPalette

Office2019Colorful

Office2019ColorfulThemeSettings

Office2019Palette

Office2019Black

Office2019BlackThemeSettings

Office2019Palette

Office2019White

Office2019WhiteThemeSettings

Office2019Palette

Office2019DarkGray

Office2019DarkGrayThemeSettings

Office2019Palette

Office2019HighContrast

Office2019HighContrastThemeSettings

HighContrastPalette

Office2019HighContrastWhite

Office2019HighContrastWhiteThemeSettings

HighContrastPalette

SystemTheme

SystemThemeThemeSettings

-

Customize theme colors and fonts in the application

FluentDarkThemeSettings themeSettings = new FluentDarkThemeSettings();
themeSettings.PrimaryBackground = new SolidColorBrush(Colors.Red);
themeSettings.PrimaryForeground = new SolidColorBrush(Colors.AntiqueWhite); 
themeSettings.BodyFontSize = 15;
themeSettings.HeaderFontSize = 18;
themeSettings.SubHeaderFontSize = 17;
themeSettings.TitleFontSize = 17;
themeSettings.SubTitleFontSize = 16;
themeSettings.BodyAltFontSize = 15;
themeSettings.FontFamily = new FontFamily("Callibri");
SfSkinManager.RegisterThemeSettings("FluentDark", themeSettings);

Applied custom theme for WPF ChromelessWindow and SfDataGrid control

Customize theme colors using the predefined palette

FluentDarkThemeSettings themeSettings = new FluentDarkThemeSettings();
themeSettings.Palette = FluentPalette.PinkRed;
SfSkinManager.RegisterThemeSettings("FluentDark", themeSettings);

NOTE

View sample in GitHub.

Apply themes to the controls derived from Syncfusion controls

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

<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>
public class SfDataGridExt : SfDataGrid
    {
        public SfDataGridExt()
        {
            SetResourceReference(StyleProperty, typeof(SfDataGrid));
        }
    }

Clearing SkinManager instance in an application

The SfSkinManager will hold some instances to use it further when applying the theme. However, this can be cleared using the function named Dispose(object), which must be called when the theme applied by SfSkinManager is to be cleared, as shown in the following code. Object refers to the element whose instance needs to be cleared.

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

How to

Apply custom theme in the application

To apply a custom theme in the application, export the custom theme project from ThemeStudio using this reference.

For demonstration purposes, the exported theme name has been used as MaterialDarkYellow and assembly name as Syncfusion.Themes.MaterialDarkYellow.WPF.

Now, for the control used in the application, set the SfSkinManager attached property Theme to MaterialDarkYellow;MaterialDark. Since, custom theme name should be updated in the following format: CustomTheme1;BaseThemeName, where CustomTheme1 denotes the custom theme name and BaseThemeName denotes the theme name from which it is derived. For example, MaterialDarkYellow;MaterialDark.

SfSkinManager.SetTheme(this, new Theme("MaterialDarkYellow;MaterialDark"));

Override syncfusion themes in the application

All Syncfusion themes are supported in theme studio. A common naming convention can be used to override control styles. A unique key is given to every style so that the styles can be overridden using the BasedOn property.

The naming convention of a control style will be like Syncfusion-ControlName-Style. For example, MaterialDarkButtonAdvStyle.

The following steps explain how to override the Syncfusion themes:

Step1:

Add respective resource dictionary from the themes assembly to the application.

The resource dictionary will be in this format: /Syncfusion.Themes.<ThemeName>.WPF;component/<ControlName>/<ControlName>.xaml, where ThemeName denotes the theme name for which overridden style is going to be applied and ControlName denotes the control name. For example, /Syncfusion.Themes.MaterialDark.WPF;component/ButtonAdv/ButtonAdv.xaml.

<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Syncfusion.Themes.MaterialDark.WPF;component/ButtonAdv/ButtonAdv.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Step2:

Define the new style using the BasedOn property.

The following code sample overrides the Syncfusion style for the ButtonAdv Control.

<Grid>
        <Grid.Resources>
            <Style x:Key="CustomButtonAdvStyle" TargetType="syncfusion:ButtonAdv" BasedOn="{StaticResource SyncfusionButtonAdvStyle}" >
                <Setter Property="Foreground" Value="Red"/>
            </Style>
        </Grid.Resources>
        <syncfusion:ButtonAdv Name="buttonAdv" Content="Testing" Width="150" Height="30" SmallIcon="{x:Null}" Style="{StaticResource CustomButtonAdvStyle}"></syncfusion:ButtonAdv>   
</Grid>

Overridden foreground style applied for WPF ButtonAdv control

Change visual style at runtime

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

Added references for WPF SkinManager and visual style

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