XAML Inspection Toolbar : Inspecting XAML for Live Debugging from the Apps

XAML Inspection Toolbar : Inspecting XAML for Live Debugging from the Apps

Visual Studio 2015 introduced many tools for debugging and diagnostic. We have also seen an 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.

Earlier we used to access this from tool bar either from Live Visual Tree and Live Property ExplorerBut now, you can also access them directly from the App. When you run either WPF or Universal Windows Apps, you will find following tiny set of three icon in the top of app

XAML Inspection Toolbar
XAML Inspection Toolbar

It has three following options

  • Go To Live Visual Tree.
  • Enable Selection
  • Display Layout Adorners

So, what you used to do from the tool bar you can start doing that from App.












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


XAML Inspection Toolbar for WPF
XAML Inspection Toolbar for WPF

When you choose these options from Apps, the side by side windows opens to inspect the properties.


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.

8 Comments to “XAML Inspection Toolbar : Inspecting XAML for Live Debugging from the Apps”

  1. Dante Gagne

    Hey, this is a great write up and I’m excited to see it. I’ve just got a few nitpicks… At the very top, you talk about the “Liver Visual Tree”. There is an “R” in there that shouldn’t be…

    Also, the first button in the In-App Runtime Tools takes you to the Live Visual Tree, not the Live Property Explorer.

    I’m glad you’re excited about the feature. We’re quite proud of it.

    –Dante Gagne [MSFT]

Comments are closed.