We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to generate a theme using WPF Theme Studio?

Platform: WPF |
Control: SkinManager |
.NET Framework: 4

WPF Theme Studio

Steps to generate a customized theme

Step 1: Open the WPF Theme Studio under WPF from the Dashboard The application opens up to the following UI.

Figure 1: WPF Theme Studio

Step 2: To personalize the themes go to the Personalize section and click on the down arrow near the Paint button as shown in the following screenshot.

Figure 2: Themes List PopUp

Step 3: Once you click on the down arrow, a popup appears displaying a list of Themes, such as “Metro”, “Office201Black” and so on. By default, the Theme applied is Metro. Click on any one of the Themes available, say “VisualStudio2013”. Once you click on “VisualStudio2013”, the default VisualStudio2013 theme is applied to all the controls in the application.

Step 4: Now you can customize the VisualStudio2013 theme by changing the color values of the categories and their properties listed in the side panel.

For example: When you want to change the Background color of the controls in the Theme Studio, click on the colored button adjacent to the color code specified text box corresponding to the “Background Color” property. Once the button is clicked, a popup appears displaying a solid palette of colors that enables you to choose the desired color. You can also click on the “Advance” button for a wider range of colors.

Figure 3: Solid palette of colors

Figure 4: Range of colors

When you want to apply gradient colors using the Background Color property, check the “Gradient” check box and a new popup displays the gradient palette, that can be used to select the desired gradient color.

Figure 5: Gradient palette

Step 5: Once you have completed the customizations for the VisualStudio2013 theme, click on the “Export” button, available on the top-right side of the screen.


Figure 6: Import-Export Buttons

A new popup window appears asking you to select the controls that need to be exported with the new customized theme. Select the control by checking the desired control’s check box and click on the “Export” button in the popup window. When you want the theme files for all controls, check “Select All” in the popup. When the “Export” button is clicked, a new Save Dialog box appears asking you to provide a name for the theme. The theme files are saved in “.wpft” format.

Figure 7: Export PopUp

Along with this file, two folders, “MS Control” and “Syncfusion Controls” are generated, containing the xaml files for the required controls. “MS Control” folder contains the xaml files for the Framework controls that are used in the controls. The Syncfusion Controls” folder contains the xaml files for the selected controls. A “.wpft” file is generated along with the above folders in the root destination folder. This file contains the color values of the corresponding properties. When you want to obtain the themes for multiple controls in a single xaml file, check the “Merge and Export” option in the popup.

Figure 8: Output Folder

The above mentioned steps help you to generate a Theme file for your control.

Step 6: The generated xaml files of Syncfusion controls can be used in the WPF application by merging the xaml files in the application resources using “MergedDictionaries, for applying customized style to the respective Syncfusion controls.



2X faster development

The ultimate WPF UI toolkit to boost your development speed.
You must log in to leave a comment
Le Roux
Jan 15, 2016
The most important part - the way to actually use this is glossed over , please elaborate on step 6 Reply
Jegan Raj M [Syncfusion]
Sep 05, 2017

Hi Le Roux,

We would look into it and briefly explain about how to use the exported file in WPF application. We will keep update you once we update this topic.

Jegan Raj M

Eric Gurney
Aug 15, 2017

When I select the Merge and Export checkbox.  I get a really small XAML file with almost nothing in it.  I would expect to see all the individual xaml filesI get when I don't have that checkbox on merged into one file.  Am I missing something here?

Jegan Raj M [Syncfusion]
Sep 05, 2017

Hi Eric,

We have faced the issue while exporting the XAML file when Merge and Export is checked. Also I would like to share that it is fixed internally. We would include this fix in our next release and keep update you once it get released.

Jegan Raj M

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile