Getting Started with WPF Theme Studio

29 Jul 20219 minutes to read

The Theme Studio helps users to transform their visual presentation into a new theme in minutes. End-users can select an appropriate base theme, change its primary color, preview and export it as a theme project, and utilize it in their applications for a rich user interface experience.

Supported themes

The WPF Theme Studio comes with the following set of themes:

• Fluent Light

• Fluent Dark

• Material Light

• Material Dark

• Material Light Blue

• Material Dark Blue

• Office 2019 Colorful

• Office 2019 Black

• Office 2019 White

• Office 2019 Dark Gray

• Office 2019 High Contrast

• Office 2019 High Contrast White

• System Theme

Supported palettes

The WPF Theme Studio comes with various set of palettes for each theme variant.

Theme variant	Palette list	Supported themes
Fluent	PinkRed Red RedOrange Orange Green GreenCyan Cyan CyanBlue Blue BlueMegenta Megenta MegentaPink	FluentLight FluentDark
Office 2019	Red Blue Green RedOrange Violet DeepGreen DeepViolet RedBrown GreenCyan DeepGreenCyan LightViolet MarinerBlue DeepBlue LightBlue	Office2019Colorful Office2019Black Office2019White Office2019DarkGray
High Contrast	Red Blue Green RedOrange Violet DeepGreen DeepViolet RedBrown GreenCyan DeepGreenCyan LightViolet MarinerBlue DeepBlue LightBlue	Office2019HighContrast Office2019HighContrastWhite
Material	Red Pink Purple DeepPurple Indigo Blue LightBlue Cyan Green Orange	MaterialLight MaterialDark MaterialLightBlue MaterialDarkBlue

Creating custom theme

Customizing theme color from theme studio

In theme studio utility, each theme has a unique common variable list. When user changes the common variable color code value, it will be reflected in all the Syncfusion WPF controls. All Syncfusion WPF control styles are derived from these theme-based common variables. This common variable list is handled inside the theme studio application for customizing theme-based colors.

Let us see the step-by-step procedure to launch and work with the theme studio utility as follows.

Step 1

After installing the Syncfusion WPF suite, launch it and select Theme Studio from the start-up panel.

Step 2

The theme studio application has been divided into two sections: the controls preview section on the left, and the theme customization section on the right.

Step 3

«««< HEAD
To apply predefined themes, select the appropriate themes from Themes List Drop-down available in the top left corner.
=======
To apply predefined themes, select the appropriate themes from Themes List Dropdown.

efb6053a56299c2bbbcef47fa9083b496356d1bf

Step 4

Use the built-in color picker in the theme customization section to select the desired solid or gradient color.

Step 5

The Syncfusion WPF controls will be rendered with the newly selected colors in the preview section, after selecting the desired color.

NOTE

The WPF theme studio groups both Syncfusion and Framework controls under different tabs for a quick preview of the UI when the color changes.

Exporting theme project

Let us see the step-by-step procedure for exporting theme project from theme studio.

Step 1

«««< HEAD
Click Export in the top right corner, below the exit of the theme studio application.
=======
Click the Export button in the top right corner, beside the exit of the theme studio application.

efb6053a56299c2bbbcef47fa9083b496356d1bf

Step 2

Now, the Export dialog box appears with the option to select either the entire controls or just the desired control(s). This option is useful only for selective list of Syncfusion WPF controls in the application. The theme studio will filter only the selected controls and customize the final output for those controls alone.

Step 3

Provide the theme name, in which the theme should be exported and select the required folder for Theme Export to be selected. When you export the download theme, it will come as a theme project with color codes for the selected Syncfusion WPF controls.

Generating theme assembly

Let us see the step-by-step procedure for ensuring theme assembly generation for exported theme project.

Step 1

The following exported theme project should be attached for corresponding target frameworks used in the WPF application.

Target Framework	Solution Project
.Net 5.0	Syncfusion.Themes.MaterialDarkYellow.WPF_NET50.csproj
.Net Framework 4.6	Syncfusion.Themes.MaterialDarkYellow.WPF_2015.csproj
.Net Framework 4.5.1	Syncfusion.Themes.MaterialDarkYellow.WPF_2013.csproj
.Net Framework 4.5	Syncfusion.Themes.MaterialDarkYellow.WPF_2012.csproj
.Net Framework 4.0	Syncfusion.Themes.MaterialDarkYellow.WPF_2010.csproj
.Net Core 3	Syncfusion.Themes.MaterialDarkYellow.WPF_NETCore.csproj

Step 2

The exported theme project should be rebuild in Release mode to generate theme assembly.

The export theme project has default ThemeStudio.snk key pair. If it is not required, use the already created private key pair by referring to the export theme project inside the application properties or Create a new key pair using Visual Studio if the private key pair was not created externally.

Ensure whether the Sign the assembly checkbox is clicked or not, to use the private key pair for generating theme assembly.

Integrating custom theme to the application

The SfSkinManager control helps to apply the built-in themes to the Syncfusion UI controls for WPF.

Let us see the step-by-step procedure for adding exported theme project as assembly(.dll) and witness the custom theme set for Docking Manager.

Step 1

Now, add the exported theme project as an assembly (.dll) from the Release folder of the export theme project into the WPF application.

Step 2

Add reference of Syncfusion.SfSkinManager.Wpf.dll to the WPF application and import SfSkinManager namespace in Main window.

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"/>

Step 3

The appearance of any Syncfusion UI controls for WPF can be customized by using the Theme attached property of the SfSkinManager.

Now, use the RegisterTheme method to register the instance of generated MaterialDarkYellow (Syncfusion.Themes.MaterialDarkYellow.WPF) assembly from the exported theme project for demonstration purposes, passing the exported custom theme name and respective theme assembly instance as parameters.

c#

string style = "MaterialDarkYellow";
SkinHelper styleInstance = null;
var skinHelpterStr = "Syncfusion.Themes." + style + ".WPF." + style + "SkinHelper, Syncfusion.Themes." + style + ".WPF";
Type skinHelpterType = Type.GetType(skinHelpterStr);
if (skinHelpterType != null)
    styleInstance = Activator.CreateInstance(skinHelpterType) as SkinHelper;
if (styleInstance != null)
{
    SfSkinManager.RegisterTheme("MaterialDarkYellow", styleInstance);
}

Step 4

Now, set the SfSkinManager attached property Theme as MaterialDarkYellow;MaterialDark for the Docking Manager control since the MaterialDarkYellow (Syncfusion.Themes.MaterialDarkYellow.WPF) assembly has been generated from the exported theme project for demonstration purposes.

NOTE

Custom theme name is provided 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.

xaml

<syncfusion:DockingManager 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="Output" syncfusion:DockingManager.Header="Output"
    syncfusion:DockingManager.SideInDockedMode="Tabbed"
	syncfusion:DockingManager.TargetNameInDockedMode="SolutionExplorer"/>

    <ContentControl x:Name="EndPage" syncfusion:DockingManager.Header="End Page"
     syncfusion:DockingManager.State="Document" >
                <TextBlock Text="Any built-in themes can applied to the required control by VisualStyle attached property of the SfSkinManager." />
    </ContentControl>
    <ContentControl x:Name="StartPage" syncfusion:DockingManager.Header="Start Page"
     syncfusion:DockingManager.State="Document" >
                <TextBlock Text="Any built-in themes can applied to the required control by VisualStyle attached property of the SfSkinManager." />
    </ContentControl>
    </syncfusion:DockingManager>

c#

string style = "MaterialDarkYellow";
SkinHelper styleInstance = null;
var skinHelpterStr = "Syncfusion.Themes." + style + ".WPF." + style + "SkinHelper, Syncfusion.Themes." + style + ".WPF";
Type skinHelpterType = Type.GetType(skinHelpterStr);
if (skinHelpterType != null)
    styleInstance = Activator.CreateInstance(skinHelpterType) as SkinHelper;
if (styleInstance != null)
{
    SfSkinManager.RegisterTheme("MaterialDarkYellow", styleInstance);
}
SfSkinManager.SetTheme(this, new Theme("MaterialDarkYellow;MaterialDark"));

Step 4

Compile and run the WPF application and witness the custom theme being applied to Docking Manager control at run-time.