WPF Theme Designer - v19.2.1 Update (Available Now)

The newest version of the DevExpress WPF Theme Designer (v19.2.1) ships with two major features designed to improve overall usability (the Visual Tree and Properties Windows). These new windows allow you to locate an element and its properties within XAML more quickly. You can download the latest WPF Theme Designer from our GitHub repository.

Properties Window

The Properties Window displays all element properties (except read-only and attached properties).

You can click the link in a property’s Value Source column to open the CodeView Window and highlight the line in XAML wherein the property is declared.

Visual Tree Window

The Visual Tree Window displays the visual element structure of the current preview.

The Visual Tree Window contains bold UI elements. You can double-click a bold element to navigate to its XAML code.

Use the built-in Search Panel to locate a UI element and navigate through the search results. Matching text is highlighted within the Visual Tree Window.

Let’s quickly consider two usage scenarios that are made easier with our new WPF Theme Designer:

Find the Location of a Property Defined in XAML

Goal: To change the hover color for a Ribbon tab text.

You can use the Inspect Element tool to select a UI element. This tool highlights the selected element, displays its properties, XAML code, and its position in the Visual Tree. Hold Ctrl+Shift and click the Ribbon tab text.

In the Properties Window, we are looking for the Foreground property. The property is inherited from another UI element. Click the “Inherited” link to highlight the line in the XAML file where the Foreground property is defined. To make changes, simply specify a new color value and save the file.

Navigate to an Element’s XAML from the Visual Tree

Goal: Change the CheckEdit’s border color.

The main challenge here is to locate/select a small UI element like a border. As you’ll soon see, the Visual Tree is an invaluable asset in such usage scenarios.

Activate the Inspect Element tool, hold Ctrl+Shift, and click the CheckBox to expand the Visual Tree. In the search panel, enter ‘border’ to highlight all instances of ‘border.’ Use the search panel’s ‘Next’ button or the `F3` key to navigate to the next search result.

Double-click the ‘(IsDefault)’ bold UI element to open its XAML code. You can also select the element and use the Enter or Space keys. Change the BorderBrush property value and save the file to apply changes.

Your Feedback Is Important to Us!

Please download the latest version of the DevExpress WPF Theme Designer from our GitHub repository and evaluate the app’s newest capabilities. Let us know what you think of this update (comment below or create a new Support Center ticket) and how you’d like us to extend the WPF Theme Designer in 2020.

Free DevExpress Products – Get Your Copy Today