Getting Started with WPF Skin Manager

7 Jun 202424 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
Windows11Light Syncfusion.Themes.Windows11Light.Wpf.dll

Syncfusion.Themes.Windows11Light.WPF

Windows11Dark Syncfusion.Themes.Windows11Dark.Wpf.dll

Syncfusion.Themes.Windows11Dark.WPF

FluentLight Syncfusion.Themes.FluentLight.Wpf.dll

Syncfusion.Themes.FluentLight.WPF

FluentDark Syncfusion.Themes.FluentDark.Wpf.dll

Syncfusion.Themes.FluentDark.WPF

Material3Light Syncfusion.Themes.Material3Light.Wpf.dll
Material3Dark Syncfusion.Themes.Material3Dark.Wpf.dll
MaterialLight Syncfusion.Themes.MaterialLight.Wpf.dll

Syncfusion.Themes.MaterialLight.WPF

MaterialDark Syncfusion.Themes.MaterialDark.Wpf.dll

Syncfusion.Themes.MaterialDark.WPF

MaterialLightBlue Syncfusion.Themes.MaterialLightBlue.Wpf.dll

Syncfusion.Themes.MaterialLightBlue.WPF

MaterialDarkBlue Syncfusion.Themes.MaterialDarkBlue.Wpf.dll

Syncfusion.Themes.MaterialDarkBlue.WPF

Office2019Colorful Syncfusion.Themes.Office2019Colorful.Wpf.dll

Syncfusion.Themes.Office2019Colorful.WPF

Office2019Black Syncfusion.Themes.Office2019Black.Wpf.dll

Syncfusion.Themes.Office2019Black.WPF

Office2019White Syncfusion.Themes.Office2019White.Wpf.dll

Syncfusion.Themes.Office2019White.WPF

Office2019DarkGray Syncfusion.Themes.Office2019DarkGray.Wpf.dll

Syncfusion.Themes.Office2019DarkGray.WPF

Office2019HighContrast Syncfusion.Themes.Office2019HighContrast.Wpf.dll

Syncfusion.Themes.Office2019HighContrast.WPF

Office2019HighContrastWhite Syncfusion.Themes.Office2019HighContrastWhite.Wpf.dll

Syncfusion.Themes.Office2019HighContrastWhite.WPF

SystemTheme Syncfusion.Themes.SystemTheme.Wpf.dll

Syncfusion.Themes.SystemTheme.WPF

Metro Syncfusion.Themes.Metro.Wpf.dll

Syncfusion.Themes.Metro.WPF

Lime Syncfusion.Themes.Lime.Wpf.dll

Syncfusion.Themes.Lime.WPF

Saffron Syncfusion.Themes.Saffron.Wpf.dll

Syncfusion.Themes.Saffron.WPF

Blend Syncfusion.Themes.Blend.Wpf.dll

Syncfusion.Themes.Blend.WPF

Office2013White Syncfusion.Themes.Office2013White.Wpf.dll

Syncfusion.Themes.Office2013White.WPF

Office2013LightGray Syncfusion.Themes.Office2013LightGray.Wpf.dll

Syncfusion.Themes.Office2013LightGray.WPF

Office2013DarkGray Syncfusion.Themes.Office2013DarkGray.Wpf.dll

Syncfusion.Themes.Office2013DarkGray.WPF

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

Office2016Colorful Syncfusion.Themes.Office2016Colorful.Wpf.dll

Syncfusion.Themes.Office2016Colorful.WPF

Office2016White Syncfusion.Themes.Office2016White.Wpf.dll

Syncfusion.Themes.Office2016White.WPF

Office2016DarkGray Syncfusion.Themes.Office2016DarkGray.Wpf.dll

Syncfusion.Themes.Office2016DarkGray.WPF

VisualStudio2015 Syncfusion.Themes.VisualStudio2015.Wpf.dll

Syncfusion.Themes.VisualStudio2015.WPF

The following table lists the available themes supported in theme studio and alternative themes suggestions to be used in the application.

Styles Supported in ThemeStudio Alternative theme suggestion to use
Windows11Light Yes -
Windows11Dark Yes -
FluentLight Yes -
FluentDark Yes -
Material3Light Yes -
Material3Dark Yes -
MaterialLight Yes -
MaterialDark Yes -
MaterialLightBlue Yes -
MaterialDarkBlue Yes -
Office2019Colorful Yes -
Office2019Black Yes -
Office2019White Yes -
Office2019DarkGray Yes -
Office2019HighContrast Yes -
Office2019HighContrastWhite Yes -
SystemTheme Yes -
Metro - FluentLight, Office2019Colorful
Lime - FluentLight, Office2019Colorful
Saffron - FluentLight, Office2019Colorful
Blend - FluentDark, MaterialDark, Office2019Black
Office2013White - Office2019White
Office2013LightGray - Office2019Colorful
Office2013DarkGray - Office2019DarkGray
VisualStudio2013 - -
Office2010Black - -
Office2010Blue - -
Office2010Silver - -
Office365 - Office2019Colorful
Office2016Colorful - Office2019Colorful
Office2016White - Office2019White
Office2016DarkGray - Office2019DarkGray
VisualStudio2015 - -

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
Windows11Light

Windows11LightThemeSettings

Windows11Palette

Windows11Dark

Windows11DarkThemeSettings

Windows11Palette

FluentLight

FluentLightThemeSettings

FluentPalette

FluentDark

FluentDarkThemeSettings

FluentPalette

Material3Light

Material3LightThemeSettings

Material3Palette

Material3Dark

Material3DarkThemeSettings

Material3Palette

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 specific controls

To apply themes for specific controls in application and exclude some of the controls in window visual tree, provide control names list parameter in constructor of Theme class.

This controls list option enables to merge the specific controls theme resource dictionary xaml files to window resources or application resources immediately instead of traversing the window visual tree and applying the theme for those controls in visual tree only.

NOTE

For framework controls, theme will be applied by default on setting the Theme property and cannot be skipped by using above option.

For example, we have skipped applying style for ComboBoxAdv in below snippet by providing control names ButtonAdv and ChromelessWindow only in control names list parameter of Theme class.

<syncfusion:ChromelessWindow x:Class="SkinManagerApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SkinManagerApplication"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="500">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <syncfusion:ButtonAdv Label="Syncfusion Button" SmallIcon="{x:Null}"  Margin="0,0,0,0" Width="150" Height="24"/>
        <syncfusion:ComboBoxAdv Width="150" Height="24" Margin="0,20,0,0" SelectedIndex="0">
            <syncfusion:ComboBoxItemAdv Content="Combo 1"/>
            <syncfusion:ComboBoxItemAdv Content="Combo 2"/>
        </syncfusion:ComboBoxAdv>
    </StackPanel>
</syncfusion:ChromelessWindow>
public partial class MainWindow : ChromelessWindow
{
    public MainWindow()
    {
        SfSkinManager.SetTheme(this, new Theme("MaterialDark", new string[] { "ButtonAdv", "ChromelessWindow" }));
        InitializeComponent();
    }
}

Applied theme specific for WPF ChromelessWindow and ButtonAdv control

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); 
}

Resource Key List

Framework Controls

Control Name Key Name
Button WPFButtonStyle
Calendar WPFCalendarStyle
CheckBox WPFCheckBoxStyle
ComboBox WPFComboBoxStyle
DataGrid WPFDataGridStyle
DatePicker WPFDatePickerStyle
Expander WPFExpanderStyle
FlatButton WPFFlatButtonStyle
FlatPrimaryButton WPFFlatPrimaryButtonStyle
FlatToggleButton WPFFlatToggleButtonStyle
GlyphButton WPFGlyphButtonStyle
GlyphDropdownExpander WPFGlyphDropdownExpanderStyle
GlyphEditableDropdownExpander WPFGlyphEditableDropdownExpanderStyle
GlyphPrimaryToggleButton WPFGlyphPrimaryToggleButtonStyle
GlyphRepeatButton WPFGlyphRepeatButtonStyle
GlyphToggleButton WPFGlyphToggleButtonStyle
GlyphTreeExpander WPFGlyphTreeExpanderStyle
GridSplitter WPFGridSplitterStyle
GroupBox WPFGroupBoxStyle
Hyperlink WPFHyperlinkStyle
Label WPFLabelStyle
ListBox WPFListBoxStyle
ListView WPFListViewStyle
Menu WPFMenuStyle
PasswordBox WPFPasswordBoxStyle
PrimaryButton WPFPrimaryButtonStyle
ProgressBar WPFProgressBarStyle
RadioButton WPFRadioButtonStyle
RepeatButton WPFRepeatButtonStyle
ResizeGrip WPFResizeGripStyle
RichTextBox WPFRichTextBoxStyle
ScrollViewer WPFScrollViewerStyle
Separator WPFSeparatorStyle
Slider WPFSliderStyle
StatusBar WPFStatusBarStyle
TabControl WPFTabControlStyle
TextBlock WPFTextBlockStyle
TextBox WPFTextBoxStyle
ToggleButton WPFToggleButtonStyle
ToolBar WPFToolBarStyle
ToolTip WPFToolTipStyle
TreeView WPFTreeViewStyle
Window WPFWindowStyle

Syncfusion Controls

Control Name Key Name
AutoComplete SyncfusionAutoCompleteStyle
BusyIndicator SyncfusionBusyIndicatorStyle
ButtonAdv SyncfusionButtonAdvStyle
CalendarEdit SyncfusionCalendarEditStyle
CardView SyncfusionCardViewStyle
CheckListBox SyncfusionCheckListBoxStyle
ChromelessWindow SyncfusionChromelessWindowStyle
Clock SyncfusionClockStyle
ColorEdit SyncfusionColorEditStyle
ColorPicker SyncfusionColorPickerStyle
ColorPickerPalette SyncfusionColorPickerPaletteStyle
ComboBoxAdv SyncfusionComboBoxAdvStyle
CurrencyTextBox SyncfusionCurrencyTextBoxStyle
DateTimeEdit SyncfusionDateTimeEditStyle
DockingManager SyncfusionDockingManagerStyle
DocumentContainer SyncfusionDocumentContainerStyle
DoubleTextBox SyncfusionDoubleTextBoxStyle
DropDownButtonAdv SyncfusionDropDownButtonAdvStyle
EditControl SyncfusionEditControlStyle
FontListBox SyncfusionFontListBoxStyle
FontListComboBox SyncfusionFontListComboBoxStyle
Gallery SyncfusionGalleryStyle
GridPrintPreviewControl SyncfusionGridPrintPreviewControlStyle
GroupBar SyncfusionGroupBarStyle
HierarchyNavigator SyncfusionHierarchyNavigatorStyle
IntegerTextBox SyncfusionIntegerTextBoxStyle
MaskedTextBox SyncfusionMaskedTextBoxStyle
MenuAdv SyncfusionMenuAdvStyle
NotifyIcon SyncfusionNotifyIconStyle
PdfViewerControl SyncfusionPdfViewerControlStyle
PercentTextBox SyncfusionPercentTextBoxStyle
PinnableListBox SyncfusionPinnableListBoxStyle
PivotGridControl SyncfusionPivotGridControlStyle
PrintPreview SyncfusionPrintPreviewStyle
PrintPreviewControl SyncfusionPrintPreviewControlStyle
PropertyGrid SyncfusionPropertyGridStyle
Ribbon SyncfusionRibbonStyle
SfAccordion SyncfusionSfAccordionStyle
SfAreaSparkline SyncfusionSfAreaSparklineStyle
SfBadge SyncfusionSfBadgeStyle
SfBulletGraph SyncfusionSfBulletGraphStyle
SfBusyIndicator SyncfusionSfBusyIndicatorStyle
SfCalculator SyncfusionSfCalculatorStyle
SfChart SyncfusionSfChartStyle
SfChart3D SyncfusionSfChart3DStyle
SfCircularGauge SyncfusionSfCircularGaugeStyle
SfCircularProgressBar SyncfusionSfCircularProgressBarStyle
SfColorPalette SyncfusionSfColorPaletteStyle
SfColumnSparkline SyncfusionSfColumnSparklineStyle
SfDataGrid SyncfusionSfDataGridStyle
SfDataPager SyncfusionSfDataPagerStyle
SfDatePicker SyncfusionSfDatePickerStyle
SfDateSelector SyncfusionSfDateSelectorStyle
SfDateTimeRangeNavigator SyncfusionSfDateTimeRangeNavigatorStyle
SfDiagram SyncfusionSfDiagramStyle
SfDiagramRibbon SyncfusionSfDiagramRibbonStyle
SfDigitalGauge SyncfusionSfDigitalGaugeStyle
SfDomainUpDown SyncfusionSfDomainUpDownStyle
SfGridSplitter SyncfusionSfGridSplitterStyle
SfHeatMap SyncfusionSfHeatMapStyle
SfHubTile SyncfusionSfHubTileStyle
SfImageEditor SyncfusionSfImageEditorStyle
SfKanban SyncfusionSfKanbanStyle
SfLineSparkline SyncfusionSfLineSparklineStyle
SfLinearGauge SyncfusionSfLinearGaugeStyle
SfLinearProgressBar SyncfusionSfLinearProgressBarStyle
SfMap SyncfusionSfMapStyle
SfMaskedEdit SyncfusionSfMaskedEditStyle
SfMultiColumnDropDownControl SyncfusionSfMultiColumnDropDownControlStyle
SfNavigationDrawer SyncfusionSfNavigationDrawerStyle
SfPulsingTile SyncfusionSfPulsingTileStyle
SfRadialMenu SyncfusionSfRadialMenuStyle
SfRadialSlider SyncfusionSfRadialSliderStyle
SfRangeSlider SyncfusionSfRangeSliderStyle
SfRating SyncfusionSfRatingStyle
SfRichTextBoxAdv SyncfusionSfRichTextBoxAdvStyle
SfScheduler SyncfusionSfSchedulerStyle
SfSmithChart SyncfusionSfSmithChartStyle
SfSpreadsheet SyncfusionSfSpreadsheetStyle
SfStepProgressBar SyncfusionSfStepProgressBarStyle
SfSunburstChart SyncfusionSfSunburstChartStyle
SfTextBoxExt SyncfusionSfTextBoxExtStyle
SfTextInputLayout SyncfusionSfTextInputLayoutStyle
SfTimePicker SyncfusionSfTimePickerStyle
SfTimeSelector SyncfusionSfTimeSelectorStyle
SfTreeGrid SyncfusionSfTreeGridStyle
SfTreeMap SyncfusionSfTreeMapStyle
SfTreeNavigator SyncfusionSfTreeNavigatorStyle
SfTreeView SyncfusionSfTreeViewStyle
SfWinLossSparkline SyncfusionSfWinLossSparklineStyle
SplitButtonAdv SyncfusionSplitButtonAdvStyle
Stencil SyncfusionStencilStyle
TabControlExt SyncfusionTabControlExtStyle
TabNavigationControl SyncfusionTabNavigationControlStyle
TabSplitter SyncfusionTabSplitterStyle
TaskBar SyncfusionTaskBarStyle
TileViewControl SyncfusionTileViewControlStyle
TimeSpanEdit SyncfusionTimeSpanEditStyle
ToolBarAdv SyncfusionToolBarAdvStyle
TreeViewAdv SyncfusionTreeViewAdvStyle
UpDown SyncfusionUpDownStyle
WizardControl SyncfusionWizardControlStyle

How to

Apply customized theme from Theme Studio

Create custom themes by modifying the existing themes from Theme studio. To apply a custom theme in the application by using the following reference.

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLightGreen}"
SfSkinManager.SetTheme(this, new Theme("FluentLightGreen"));

Customize theme in application level

To customize the Syncfusion theme in application level, merge the theme in ResourceDictionary and override the style using ‘BasedOn’ property.

In ‘ResourceDictionary’, mention the style path which need to be override, in ‘BasedOn’, mention the key stated in the table.

We can customize or override the theme styles by following the steps outlined below.

Step 1: Merge the resource dictionaries of the controls which need to customize. In this example, we have merged the Framework Button‘s resource dictionary.

<ResourceDictionary.MergedDictionaries> 
     <ResourceDictionary Source="/Syncfusion.Themes.Windows11Light.WPF;component/MSControl/Button.xaml" /> 
</ResourceDictionary.MergedDictionaries>

Step 2: Declare style for the control with ‘BasedOn’ key. Here style of the button has been declared and its key is used in ‘BasedOn’. Button’s Background, Foreground, FontFamily, BorderBrush has been overridden.

<Style BasedOn="{StaticResource WPFButtonStyle}" 
          x:Key="customizeButtonStyle"    
          TargetType="{x:Type Button}">
         <Setter Property="Background" Value="#5dbea3" />
         <Setter Property="Foreground" Value="White" />
         <Setter Property="FontFamily" Value="Berlin Sans FB Demi" />
         <Setter Property="BorderBrush" Value="#5dbea3" />   
   </Style>

Step 3: Now, utilize the customized styles in our application using the ‘Style’ property. This step adds custom styles of Buttons in WPF application.

<StackPanel Orientation="Horizontal" >
    <Button Content="OK" Height="30" Width="120" Margin="10" Style="{StaticResource customizeButtonStyle}"></Button>
    <Button Content="Cancel" Height="30" Width="120" Margin="10" Style="{StaticResource customizeButtonStyle}"></Button>          
</StackPanel>

Customizing theme styles basedOn for buttons

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.

<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>
SfSkinManager.SetVisualStyle(this, (VisualStyles)Enum.Parse(typeof(VisualStyles), comboVisualStyle.SelectedItem.ToString()));

NOTE

View sample in GitHub.

Switch theme with custom styles

To change a theme dynamically with custom styles, utilize the resource dictionary and override the style using the ‘BasedOn’ property.

We have provided an example that demonstrates switching between the Window11Light and Windows11Dark themes using the SfGrid control. In this example, we customize the foreground color of the GridTableSummaryCell to green in Window 11 Light and red in Windows 11 Dark.

  • Step 1: In this example, we have an SfDataGrid and a RadioButton which is used to switching theme and we need to add resource dictionaries with paths in merged dictionaries in view model or code behind. The following code can be used to effortlessly switch themes.
private void RadioButton_Click(object sender, RoutedEventArgs e)
        {
            var themeName = (sender as RadioButton).Content.ToString();
            string syncfusionTheme = string.Empty;
            if (themeName == "Dark")
            {
                syncfusionTheme = "Windows11Dark";
                SfSkinManager.SetTheme(Application.Current.MainWindow, new Theme("Windows11Dark"));
            }
            else if (themeName == "Light")
            {
                syncfusionTheme = "Windows11Light";
                SfSkinManager.SetTheme(Application.Current.MainWindow, new Theme("Windows11Light"));
            }
            
            MergeResourceDictionary(syncfusionTheme);
            MergeCustomResourceDictionary(themeName);
        }

        private void MergeResourceDictionary(string syncfusionTheme)
        {
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
            {
                Source = new Uri($"/Syncfusion.Themes.{syncfusionTheme}.WPF;component/MSControl/Window.xaml", UriKind.RelativeOrAbsolute)
            });
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
            {
                Source = new Uri($"/Syncfusion.Themes.{syncfusionTheme}.WPF;component/MSControl/ComboBox.xaml", UriKind.RelativeOrAbsolute)
            });       
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
            {
                Source = new Uri($"/Syncfusion.Themes.{syncfusionTheme}.WPF;component/SfDataGrid/SfDataGrid.xaml", UriKind.RelativeOrAbsolute)
            });
        }

        private void MergeCustomResourceDictionary(object selectedTheme)
        {
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
            {
                Source = new Uri($"/WpfApp1;component/Themes/{selectedTheme}.xaml", UriKind.RelativeOrAbsolute)
            });
        }
  • Step 2: Customize the foreground color and font weight of the table summary row in both light and dark themes.

Light Theme

<!--Light.xaml-->
<ResourceDictionary>
           <Style BasedOn="{StaticResource SyncfusionGridTableSummaryCellStyle}"
                  TargetType="syncfusion:GridTableSummaryCell">      
                <Setter Property="FontWeight"  Value="Bold" />
                <Setter Property="Foreground" Value="Green" />      
           </Style>
</ResourceDictionary>

Dark Theme

<!--Dark.xaml-->

<ResourceDictionary>
                <Style BasedOn="{StaticResource SyncfusionGridTableSummaryCellStyle}"
                           TargetType="syncfusion:GridTableSummaryCell">      
                               <Setter Property="FontWeight"    Value="Bold" />
                               <Setter Property="Foreground"   Value="Red" />       
            </Style>
</ResourceDictionary>

Output Screenshots

Light Theme:

Customizing theme while run time in Light

Dark Theme:
Customizing theme while run time in Dark