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 Explorer.  But 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

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

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