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

WPF Team Blog
18 September 2019

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

WPF Theme Designer 19.2.1 - Properties Window

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.

WPF Theme Designer 19.2.1 - Visual Tree Winndow

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.

WPF Theme Designer 19.2.1 - Inspect Element tool

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.

WPF Theme Designer 19.2.1 - How to use Visual Tree Window

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.

WPF Theme Designer 19.2.1 - Visual Tree Search

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

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.