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