Desktop app user guide

XAML Spy 3

The XAML Spy installer registers an entry for the XAML Spy desktop app in the start menu of your Windows operating system. Select the entry in the start menu to launch the desktop app.

Start menu

The XAML Spy desktop app is a WPF application with a flat ModernUI theme. The main UI is split into two panes; the left pane contains the explorer which will list the connected apps, and provides a hierarchical view of the various aspects of the app. The right pane is reserved for the property grid, which lists the details of the selected object in the explorer. The title bar contains links to navigate to the settings and help documentation.

The following image is a screenshot of XAML Spy having no apps connected.

XAML Spy main UI

Tip: like the XAML Spy user interface? You can build your own desktop app using the same theme. The XAML Spy UI has been open sourced, and is available on GitHub.

Exploring apps

Once an app has connected to XAML Spy, it will automatically appear in the explorer. See the quick start to learn how to connect your app to XAML Spy. The following image shows a connected Windows 10 UWP app.

Connected app

Expand the connected app node, to explore the various aspects of the app. Each supported platform provides a unique set of explorable content. In the screenshot above, the connected Windows 10 UWP app includes automation and visual tree hierarchies. The explorable content depends on the connected app and platform. For instance when a Xamarin Forms app connects, a Xamarin Forms node appears which enables browsing the various elements of the Xamarin Forms tree.

The explorer toolbar contains buttons for browsing the explorer hierarchy, refreshing the content of the selected node, and a button for selecting visuals in the connected app. Click the select visual button, and move your mouse to the app, and click to select a visual in the user interface. The XAML Spy explorer automatically syncs its selection with the selected visual.

Additionally a search box is included, to quickly locate objects in the various tree structure. Enter a search term in the input box, and hit enter to perform the search. The search results are shown in a hierarchical structure per connected app. Hit the back button in the toolbar to return to the main explorer content. The following screenshot displays the results of a search for button in the connected Windows 10 UWP app.

Search

Visualizer

XAML Spy 3 includes a visualizer which is accessible by opening the explorer context menu (right mouse click in the explorer pane) and selecting Show visualizer. The visualizer displays a snapshot of the selected visual and renders it in an isometric projection. The visualizer toolbar includes buttons to change the camera, and provides zooming and panning capabilities. Open the visualizer context menu for additional features, such as rendering a black opaque background (useful for white content with transparent backgrounds), and saving the image to disk.

Visualizer

Settings

Navigate to the XAML Spy settings by selecting the settings link in the title bar of the application. Exit the settings by clicking the back button, and return to the main ui. The XAML Spy settings include various configurable options detailed below.

XAML Spy settings

General
Includes configuration options for managing the look and feel of the desktop app and the behavior of the explorer. Furthermore the visual properties of the shape of the selected visual can be modified in this section. Any change will be applied automatically, there is no save button to confirm the changes.
Advanced
Provides advanced configuration settings. Currently includes a single option for rendering WPF selection shapes. In normal usage scenarios you would not need to change any of the advanced settings.
XAML Spy Service
The XAML Spy service provides discovery and connectivity of apps, it is fully configurable. Changes to the configuration of the XAML Spy service require a reset of the windows service. For more details see the XAML Spy Service documentation.
License
Register and unregister license keys.
About
Detailed product information about XAML Spy, including an option to manually check for updates.