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

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.

Windows Univeral App

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.

Windows Univeral App - Live Visual Tree and Live Property Explorer

 

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

Turn on Live Visual Tree and Live Property Explorer

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

Inspect XAML Elements

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.

Inspect and Change XAML

 

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.

Inspect and Change XAML

 

 

In case you don’t see any results in “Live Visual Tree” and “Live Property Explorer” you can check them in Option dialog control for Enable.

Tools –> Options –> Debugging –> General –> Enable UI Debugging Tools for XAML

Enable UI Debugging Tools for XAML

Hope this helps

Abhijit Jana

Abhijit runs the Daily .NET Tips. He started this site with a vision to have a single knowledge base of .NET tips and tricks and share post that can quickly help any developers . He is a Former Microsoft ASP.NET MVP, CodeProject MVP, Mentor, Speaker, Author, Technology Evangelist and presently working as a .NET Consultant. He blogs at http://abhijitjana.net , you can follow him @AbhijitJana . He is the author of book Kinect for Windows SDK Programming Guide.