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

By | March 18, 2016

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.


8 thoughts on “XAML Inspection Toolbar : Inspecting XAML for Live Debugging from the Apps

  1. Pingback: Dew Drop – March 18, 2016 (#2211) | Morning Dew

  2. Pingback: Szumma #031 – 2016 11. hét | d/fuel

  3. Pingback: Visual Studio – Developer Top Ten for Mar 23rd, 2016 - Dmitry Lyalin

  4. 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]

  5. Abhijit Jana Post author

    Dante, Really Appreciate your feedback and glad that you liked it. I have updated the post accordingly.

  6. Pingback: Visual Studio, Debugging and Application Insights Tips & Tricks from Daily .NET Tips – February 2016 Links – Abhijit's World of .NET

  7. Pingback: Track Focused Element In-App XAML Inspection Toolbar–Visual Studio 2015

  8. Pingback: Turn On / Off Runtime “In-App XAML Inspection Toolbar” from Visual Studio

Comments are closed.