Themes

SfSkinManager control helps to apply the built-in themes to the Syncfusion UI controls for WPF. Refer to the following built in themes and its available assemblies.

Styles

Assemblies

Metro

Syncfusion.Themes.Metro.Wpf.dll

Lime

Syncfusion.Themes.Lime.Wpf.dll

Saffron

Syncfusion.Themes.Saffron.Wpf.dll

Blend

Syncfusion.Themes.Blend.Wpf.dll

Office2013White

Syncfusion.Themes.Office2013White.Wpf.dll

Office2013LightGray

Syncfusion.Themes.Office2013LightGray.Wpf.dll

Office2013DarkGray

Syncfusion.Themes.Office2013DarkGray.Wpf.dll

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

Office2016Colorful

Syncfusion.Themes.Office2016Colorful.Wpf.dll

Office2016White

Syncfusion.Themes.Office2016White.Wpf.dll

Office2016DarkGray

Syncfusion.Themes.Office2016DarkGray.Wpf.dll

VisualStudio2015

Syncfusion.Themes.VisualStudio2015.Wpf.dll

Getting Started

This section covers how to apply themes for controls using SfSkinManager

Add SfSkinManager to the Application

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

  1. Create a WPF project in Visual Studio and refer to the SfSkinManager assembly (Syncfusion.SfSkinManager.Wpf)
  2. Include an XML namespace for the assembly to the Main window.
<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 Themes to the Application

Syncfusion UI controls for WPF supports various visual styles stated above. The corresponding style resources are included with the specific theme assemblies. To apply Visual Studio style, use “Syncfusion.Themes.VisualStudio2013.Wpf”. Also, refer to the required theme assemblies with the project when needed.

Apply Visual Style to Controls

Any built-in themes can applied to the required control by VisualStyle attached property of the SfSkinManager. Now, apply the value as VisualStudio2013 to the VisualStyle property of the SfSkinManager for the Docking Manager control.

<syncfusion:DockingManager x:Name="SyncDockingManager" UseDocumentContainer="True"
                           PersistState="True" syncfusionskin:SfSkinManager.VisualStyle="VisualStudio2013">

<ContentControl x:Name="SolutionExplorer" syncfusion:DockingManager.Header="Solution Explorer"
                                          syncfusion:DockingManager.SideInDockedMode="Right"/>

<ContentControl x:Name="ToolBox" syncfusion:DockingManager.Header="Toolbox"
                                 syncfusion:DockingManager.State="AutoHidden" />

<ContentControl x:Name="Properties" syncfusion:DockingManager.Header="Properties"
                                    syncfusion:DockingManager.State="Float" />

<ContentControl x:Name="Output" syncfusion:DockingManager.Header="Output"
                syncfusion:DockingManager.SideInDockedMode="Tabbed"
				syncfusion:DockingManager.TargetNameInDockedMode="SolutionExplorer"/>

<ContentControl x:Name="StartPage" syncfusion:DockingManager.Header="Start Page"
                                   syncfusion:DockingManager.State="Document" />

</syncfusion:DockingManager>

Apply themes at run time

Applied built-in themes can be changed at the runtime by the VisualStyle property. Here, a ComboBox Control is used to switch various built-in themes that are referred in the assembly references.

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="20"></RowDefinition>

<RowDefinition Height="*"></RowDefinition>

</Grid.RowDefinitions>

<ComboBox SelectionChanged="ComboBox_SelectionChanged">

<ComboBoxItem>Metro</ComboBoxItem>

<ComboBoxItem>Blend</ComboBoxItem>

<ComboBoxItem>VisualStudio2013</ComboBoxItem>

<ComboBoxItem>Office2013White</ComboBoxItem>

<ComboBoxItem>Office2013DarkGray</ComboBoxItem>

<ComboBoxItem>Office2013LightGray</ComboBoxItem>

<ComboBoxItem>Office2010Black</ComboBoxItem>

<ComboBoxItem>Office2010Blue</ComboBoxItem>

<ComboBoxItem>Office2010Silver</ComboBoxItem>

</ComboBox>

<syncfusion:DockingManager Grid.Row="1" x:Name="SyncDockingManager" UseDocumentContainer="True" PersistState="True" >

<ContentControl x:Name="SolutionExplorer" syncfusion:DockingManager.Header="Solution Explorer"
                                          syncfusion:DockingManager.SideInDockedMode="Right"/>

<ContentControl x:Name="ToolBox" syncfusion:DockingManager.Header="Toolbox"
                                 syncfusion:DockingManager.State="AutoHidden" />

<ContentControl x:Name="Properties" syncfusion:DockingManager.Header="Properties"
                                    syncfusion:DockingManager.State="Float" />

<ContentControl x:Name="Output" syncfusion:DockingManager.Header="Output"
                syncfusion:DockingManager.SideInDockedMode="Tabbed"
				syncfusion:DockingManager.TargetNameInDockedMode="SolutionExplorer"/>

<ContentControl x:Name="StartPage" syncfusion:DockingManager.Header="Start Page" syncfusion:DockingManager.State="Document"/>

</syncfusion:DockingManager>

</Grid>
private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
	SfSkinManager.SetVisualStyle(this,(VisualStyles)Enum.Parse(typeof(VisualStyles),((sender as ComboBox).SelectedItem as ComboBoxItem).Content.ToString()));
}
Private Sub ComboBox_SelectionChanged(sender As Object, e As SelectionChangedEventArgs)

SfSkinManager.SetVisualStyle(Me, DirectCast([Enum].Parse(GetType(VisualStyles), TryCast(TryCast(sender, ComboBox).SelectedItem, ComboBoxItem).Content.ToString()), VisualStyles))

End Sub

MS Controls Themes

All built-in assemblies have Style resources for MS controls, so whenever an application get its style through SfSkinManager, the Theme’s corresponding MS Control style merges with the applied controls resource dictionary.

Applying theme globally in the application

By Default SfSkinManager merges the required resource files from the Theme assembly to the applied control. To apply the theme globally in the application, set the ApplyStylesOnApplication property to True. It merges all the resource files to the Application’s Resource Dictionary.

SfSkinManager.ApplyStylesOnApplication = true;
SfSkinManager.ApplyStylesOnApplication = True

Apply Style to custom controls

To apply the built-in themes to derived control using SfSkinManager, set the SetResourceReference in the custom control. This is required to refer style property of the derived control.

<local:DockingAdv x:Name="SyncDockingManager" UseDocumentContainer="True" PersistState="True" >

<ContentControl x:Name="SolutionExplorer"
                local:DockingAdv.Header="Solution Explorer" local:DockingAdv.SideInDockedMode="Right"/>

<ContentControl x:Name="ToolBox" local:DockingAdv.Header="Toolbox" local:DockingAdv.State="AutoHidden"/>

<ContentControl x:Name="Properties" local:DockingAdv.Header="Properties" local:DockingAdv.State="Float"/>

<ContentControl x:Name="Output" local:DockingAdv.Header="Output"
                local:DockingAdv.SideInDockedMode="Tabbed" local:DockingAdv.TargetNameInDockedMode="SolutionExplorer"/>

<ContentControl x:Name="StartPage" local:DockingAdv.Header="Start Page" local:DockingAdv.State="Document"/>

</local:DockingAdv>
public class DockingAdv : DockingManager
{
    public DockingAdv()
	{
		SetResourceReference(StyleProperty, typeof(DockingManager));
	}
}
Public Class DockingAdv
	Inherits DockingManager
	Public Sub New()
		SetResourceReference(StyleProperty, GetType(DockingManager))
	End Sub
End Class

Clearing instance while using themes in application

SfSkinManager will hold some instance to use it further while applying theme. But this can be cleared using the function named “Dispose(object)” which needs to be hooked in the place where you need to clear the theme applied from SfSkinManager as like below code. Here “object” refers to the element which instance needs to be cleared.

private void Window_Closed(object sender, EventArgs e) 
{ 
   SfSkinManager.Dispose(this); 
}
Private Sub Window_Closed(sender As Object, e As EventArgs)
	
    SfSkinManager.Dispose(Me)

End Sub