Skip to main content
BuyLog In
WPF Theme Editor
Search in…
Docs > WPF Theme Editor (Legacy) > Getting Started > Creating a New Theme
All docs
V18.2
WPF Theme Editor (Legacy)
Main Features
Getting Started
Setting Up and Starting
Creating a New Theme
Applying a Modified Theme to a WPF Application
Concepts
UI Elements
Download CHM

Creating a New Theme

  • 3 minutes to read

Note

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:

Create Theme

  1. Run the Theme Editor. Open the File menu and click New.

    GettingStarted_NewThemeMenuItem

    The New Theme dialog will be displayed.

    GettingStarted_NewThemeDialog

  2. The Name field allows you to specify the name for the newly created theme. Leave the default one (NewTheme) in this lesson.

  3. 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.

    Note

    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

  4. 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\

  5. Click OK to close the dialog.

The Office 2007 Black theme will be cloned and its copy will be placed in the specified directory.

Modify Theme

  1. In the Product Browser panel, expand the Editors node and select ComboBoxEdit.

    GettingStarted_ProductBrowser

    The Theme Navigator panel will show a combo box editor view.

    GettingStarted_ThemeNavigator

  2. Hold down the Shift key 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.

    GettingStarted_Background

  3. Change the border’s Background attribute value to #D2E3A5 to set the editor background color to light green.

  4. Now hold down the Shift key 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.

    GettingStarted_Glyph

  5. Change the element’s Fill attribute value to #F48600 to set the arrow color to orange.

  6. Open the Build menu, and click the Build Theme or press F5.

    GettingStarted_BuildTheme

    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.

    GettingStarted_ThemeNavigator_ModifiedTheme