Getting Started in WPF Themes (SfSkinManager)
12 May 2021 / 17 minutes to read
The SfSkinManager helps to apply the themes for both Syncfusion and Framework controls. There are 27 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 WPF Theme Studio.
NOTE
Theme Studio based themes provides improved consistency and uniqueness among various controls compared to other themes. It is recommended to use Theme Studio based themes in the application over other themes.
Themes List
The below table lists the available themes and 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 | Yes | - | |
| FluentDark | Syncfusion.Themes.FluentDark.Wpf.dll | Yes | - | |
| MaterialLight | Syncfusion.Themes.MaterialLight.Wpf.dll | Yes | - | |
| MaterialDark | Syncfusion.Themes.MaterialDark.Wpf.dll | Yes | - | |
| MaterialLightBlue | Syncfusion.Themes.MaterialLightBlue.Wpf.dll | Yes | - | |
| MaterialDarkBlue | Syncfusion.Themes.MaterialDarkBlue.Wpf.dll | Yes | - | |
| Office2019Colorful | Syncfusion.Themes.Office2019Colorful.Wpf.dll | Yes | - | |
| Office2019Black | Syncfusion.Themes.Office2019Black.Wpf.dll | Yes | - | |
| Office2019White | Syncfusion.Themes.Office2019White.Wpf.dll | Yes | - | |
| Office2019DarkGray | Syncfusion.Themes.Office2019DarkGray.Wpf.dll | Yes | - | |
| Office2019HighContrast | Syncfusion.Themes.Office2019HighContrast.Wpf.dll | Yes | - | |
| Office2019HighContrastWhite | Syncfusion.Themes.Office2019HighContrastWhite.Wpf.dll | Yes | - | |
| SystemTheme | Syncfusion.Themes.SystemTheme.Wpf.dll | Yes | - | |
| Metro | Syncfusion.Themes.Metro.Wpf.dll | - | FluentLight, Office2019Colorful | |
| Lime | Syncfusion.Themes.Lime.Wpf.dll | - | FluentLight, Office2019Colorful | |
| Saffron | Syncfusion.Themes.Saffron.Wpf.dll | - | FluentLight, Office2019Colorful | |
| Blend | Syncfusion.Themes.Blend.Wpf.dll | - | FluentDark, MaterialDark, Office2019Black | |
| Office2013White | Syncfusion.Themes.Office2013White.Wpf.dll | - | Office2019White | |
| Office2013LightGray | Syncfusion.Themes.Office2013LightGray.Wpf.dll | - | Office2019Colorful | |
| Office2013DarkGray | Syncfusion.Themes.Office2013DarkGray.Wpf.dll | - | Office2019DarkGray | |
| VisualStudio2013 | Syncfusion.Themes.VisualStudio2013.Wpf.dll | - | - | |
| Office2010Black | Syncfusion.Themes.Office2010Black.Wpf.dll | - | - | |
| Office2010Blue | Syncfusion.Themes.Office2010Blue.Wpf.dll | - | - | |
| Office2010Silver | Syncfusion.Themes.Office2010Silver.Wpf.dll | - | - | |
| Office365 | Syncfusion.Themes.Office365.Wpf.dll | - | Office2019Colorful | |
| Office2016Colorful | Syncfusion.Themes.Office2016Colorful.Wpf.dll | - | Office2019Colorful | |
| Office2016White | Syncfusion.Themes.Office2016White.Wpf.dll | - | Office2019White | |
| Office2016DarkGray | Syncfusion.Themes.Office2016DarkGray.Wpf.dll | - | Office2019DarkGray | |
| VisualStudio2015 | Syncfusion.Themes.VisualStudio2015.Wpf.dll | - | - |
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.
<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 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 theme to a Window, SkinManager inherits the same theme to all the elements inside Window.
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. So, while setting the Theme property, 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,
SkinManagerinherits 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"));
NOTE
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.ApplyStylesOnApplicationstatic property should be set beforeInitializeComponentof the window or in the application start up, while 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 in the theme studio has respective theme settings class with prefix of the theme name. For example, if MaterialDark is the theme name, then there will be theme settings class with the name MaterialDarkThemeSettings.
NOTE
Need to register theme settings before setting respective theme for window/control.
Please find the complete list of theme names and respective theme settings class.
| Styles/Theme name | Respective theme settings class to customize |
|---|---|
| FluentLight | |
| FluentDark | |
| MaterialLight | |
| MaterialDark | |
| MaterialLightBlue | |
| MaterialDarkBlue | |
| Office2019Colorful | |
| Office2019Black | |
| Office2019White | |
| Office2019DarkGray | |
| Office2019HighContrast | |
| Office2019HighContrastWhite | |
| SystemTheme |
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);
NOTE
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 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 the theme applied from SfSkinManager is to be cleared as in the below code. Here 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 application
To apply custom theme in the application, export custom theme project from ThemeStudio using this reference.
For demonstration purpose, the exported theme name has been used as MaterialDarkYellow and exported theme assembly name as Syncfusion.Themes.MaterialDarkYellow.WPF.
Now, set the SfSkinManager attached property Theme as MaterialDarkYellow;MaterialDark for the control used in application. Since custom theme name should be updated in this 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 application
All Syncfusion theme supported in theme studio control styles can be overridden by a common naming convention. A unique key is given to each and 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 snippet 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>
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.
<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