This topic helps you learn how to locate a particular visual element in a theme and edit it via the XAML Editor.
A typical scenario of editing a theme consists of the following steps.
Use the Product Browser to select a product whose visual representation you need to change. If this product is presented in several views, select a view that displays the visual elements you wish to edit.
The Theme Navigator will display the selected product view.
For more information, see Product Browser.
The Theme Editor provides multiple ways with which you can navigate through theme visual elements.
Using the Theme Navigator
The Theme Navigator enables you to locate particular UI elements in a markup by simply clicking them. Hold down the
Shift key when clicking an element to locate it and open the appropriate file in the XAML Editor.
For more information, see the Theme Navigator.
Traversing through the Visual Tree
To locate a visual tree element in a markup, click the corresponding node, and the XAML Editor will open the appropriate file and navigate to the desired element. For more information, see the Visual Tree Browser.
Exploring the Template Hierarchy
The Template Hierarchy panel allows you to navigate through various theme elements: templates, styles and brushes.
Navigating via the XAML Editor
The XAML Editor renders different types of bindings (like StaticResource, DynamicResource, TemplateBinding and Binding) as hyperlinks.
Click a link to navigate to the referenced element. For more information, see the XAML Editor.
After you have located a visual element in the markup, you can edit it in the XAML Editor.
Note that if the opened markup file is generic (shared across all themes), the line where the caret is located is highlighted in yellow. Be careful when modifying generic markup files. If the opened file only affects the currently edited theme, the line is highlighted in green.
After you have made all the necessary changes to the theme, open the Build menu and click Build Theme (or press
Theme assembly is saved to the %ThemeSolutionDirectory%\Bin directory.
When the build is finished, the modified theme is applied to the product view displayed in the Theme Navigator, so that you can immediately see the effect.
You can also preview the modified theme as it looks while applied to a specific layout that contains multiple DevExpress controls displayed in a single window.
To invoke this window, open the View menu and click Preview (or press
To learn how to apply a newly created theme to a WPF application, see Applying Themes.