How to generate a theme using WPF Theme Studio?

WPF Theme Studio

Steps to generate a customized theme

Step 1: Open the WPF Theme Studio under WPF from the Dashboard 13.3.0.7. 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.