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.

5 comment(s)
Dalibor Stys
Dalibor Stys
Exactly what I needed! Thanks a lot!
18 September, 2019
Blago Culjak
Blago Culjak

Wow, I'm using Theme Designer all the time! Great thing! My app is now visually way better, and this inspect element is great addition.


I have one issue, if I make an mistake in XAML, then project doesn't build, but Output in case of error is hidden. We need way better of knowing something is not right, some popup message...

18 September, 2019
Stephen J White
Stephen J White
Nice changes, greatly appreciate them. I second Blago Culjak's comment though, it would be nice to get something more informative if there are XAML typos.
18 September, 2019
Ivan (DevExpress Support)
Ivan (DevExpress Support)

Hi all,

Thank you for your kind words.

@Blago, @Stephen, your suggestion sounds interesting, but we'd like to discuss some details. I've created a public ticket for this - Show error messages when the Output window is hidden. Let's continue our discussion there.

 

18 September, 2019
Customer62039
Customer62039
What are the plan for realese?
3 October, 2019

Please login or register to post comments.