Exploring the UI

The user interface explorer provides a real-time view of the visual tree of the connected XAML app. You can navigate the tree structure and once a visual is selected it becomes highlighted in the app itself. 

The visual tree displays the type and, when set, the name of the visual. The number between brackets denotes the total descendant count of the visual. A dotted border rendered around a visual element is used to visualize the scope of the data context. Whenever XAML Spy detects a new data context, it renders a new border. 

In order to reduce noice, a number of commands are available in the context menu of the user interface explorer.  Use the collapse all but this command to quickly collapse all visual elements that you are not interested in. The explore from here command makes the selected visual the root of the tree and hides all other nodes. You can now easily navigate a branch of the visual tree, without being distracted by other visual elements.


The properties pane lists all dependency properties of the selected element. Where possible, the properties are writable. A small icon next to the property name identifies the source of the value. Hover the mouse of the icon to reveal detailed information about the property value source. For more details about how to get the most out of the property grid, see the tutorial How to use the properties pane.


The XAML pane shows the XAML that has been generated for the selected element and its descendants.


The statistics pane provides statistical information of the current selected object. The information can be ordered, clicking the column headers will change the sort order of the elements in the list. 


The event pane tracks the events that are raised by the XAML app in real-time. A green row indicates that the routed event has been handled. A handled event will generally not be routed to the next object along the event route. Double click a row in the event list to select the associated source UI element in the explorer.