Creating a New Theme
- 3 minutes to read
The WPF Theme Editor does not support the DevExpress WPF Controls 18.2 or later. Use the WPF Theme Designer tool instead.
This tutorial will teach you how to create a new theme based on a DevExpress theme, customize the new theme and save it for further use in your WPF applications.
In this lesson, we will create a custom theme based on the Office 2007 Black theme, with the following changes:
- altered background color for text editors;
- modified appearance of editor buttons displayed in the SpinEdit, DateEdit, ComboBoxEdit, etc.
The New Theme dialog will be displayed.
- The Name field allows you to specify the name for the newly created theme. Leave the default one (NewTheme) in this lesson.
Specify the Office 2007 Black theme to be the base for the new theme. To do this, click the Browse button in the Base theme field and locate the theme project file.
If the DXperience Suite has been installed to the default directory, this file is located at
C:\Program Files (x86)\DevExpress 18.2\Components\Sources\DevExpress.Xpf.Themes\DevExpress.Xpf.Themes.Office2007Black\DevExpress.Xpf.Themes.Office2007Black.csproj
Finally, define the directory where the new theme will reside. Type the full path to the directory in the Location field or use the Browse button.
In this lesson, specify the following directory:
C:\Program Files (x86)\DevExpress 18.2\Components\Sources\DevExpress.Xpf.Themes\
- Click OK to close the dialog.
The Office 2007 Black theme will be cloned and its copy will be placed in the specified directory.
In the Product Browser panel, expand the Editors node and select ComboBoxEdit.
The Theme Navigator panel will show a combo box editor view.
Hold down the
Shiftkey and click the editor border as shown in the animation below. The XAML Editor will open the TextEdit.xaml file and navigate to the appropriate Border element.
- Change the border's Background attribute value to #D2E3A5 to set the editor background color to light green.
Now hold down the
Shiftkey and click a down arrow glyph displayed in the combo box editor's button. The XAML Editor will open the ButtonEdit.xaml file and navigate to the appropriate Path element.
- Change the element's Fill attribute value to #F48600 to set the arrow color to orange.
Open the Build menu, and click the Build Theme or press
After the build process has been completed, the modified theme is saved to the following directory:
C:\Program Files (x86)\DevExpress 18.2\Components\Sources\DevExpress.Xpf.Themes\DevExpress.Xpf.Themes.NewTheme\Bin\
You can immediately see the result in the current Theme Navigator view.