Working with Live XAML in Windows Universal Apps and Visual Studio 2015

Visual Studio 2015 introduced many tools for debugging and diagnostic. We have seen PerfTips – Easiest way to get Performance Information and Debugging Lambda Expression in Visual Studio 2015 over past weeks. In this post, we are going to take look into another excellent feature for inspecting and debugging XAML UI. This feature enable a great capability for developers to Visualize and modify the XAML UI within a running application and review the dynamic the changes. The tooling is support for XAML UI debugging is available for Windows Universal App platform in Windows 10 and WPF desktop application.

The support of XAML UI Debugging comes with two tools.. Here are they..

Live Visual Tree
Live Property Explorer

Live Visual Tree shows the hierarchy of all UI elements in the app that we are debugging and the Live Property Explorer shows properties of UI elements at runtime. Combination of these two tool allow you to take a deep into your xaml code and review the necessary change at runtime. This really helps developer to find and fix many UI related changes, also to dealing with different styles.

Let’s consider you have one app running on Visual Studio 2015 and targeted to Windows Universal Apps Platform.

Once you run the app, you should be able to view two new window “Live Visual Tree” and “Live Property Explore” with in Visual Studio. Live Visual Tree shows a hierarchy of all UI elements in the app – here page element –> Grid –> Button and then inner child elements of a button. Live Property Explorer that shows the runtime value of the properties for selected element.

If you don’t find these two tools windows coming up automatically, You may need to open from the main menu Debug –> Windows –> Live Visual Tree | Live Property Explorer

Live Visual Tree enable you select the application element with in the running application.

Once that is selected, you should be able to navigate through all the elements with in the screen. Live Property explore window displays the property of selected elements in the UI and it will change dynamically based on your selection. As you can see when we select the content of the button, the Visual Tree automatically highlights the inner container element of button which is nothing but an textblock. The Live Property window show the relevant properties for the current selection, that is text, alignment etc.

At the same time you can go ahead change the values of some properties to see what’s the impact of that change! Exactly same experience that we are familiar with inspect elements web sites using developer toolbar. As you can see from the following image, we changed the text and color of button on the fly and seeing the changed within the running app.