First Look at XAML Spy 3

Thursday, April 23, 2015

First Floor Software is working on XAML Spy 3, which will be a major update of XAML Spy that focuses on extended platform support and new features. The first public preview of XAML Spy 3 is not available yet, but we would like to take the opportunity to talk about some of the features we are working on.

Android and iOS support

XAML Spy 3 adds full support for Android and iOS apps that are built with the Xamarin platform. Next to the existing platforms (Silverlight, Windows Phone, Store, and WPF), Android and iOS apps are now first-class citizens. All features available to previously supported platforms, are also available in Android and iOS. Browsing the visual tree of an Android app for example, is no different from browsing the visual tree of a WPF app in XAML Spy 3.

The partial visual tree of a connected Android app;

XAML Spy API

XAML Spy 3 introduces an extensible API for automating and querying apps. Today, XAML Spy offers a standalone explorer and Visual Studio extension for browsing and modifying the runtime properties of an app. With version 3, you can use the XAML Spy API, providing direct access to runtime objects of any supported app. Want to export the visual tree of your app to a custom format? No problem. Need to backup the files in app local storage? XAML Spy has you covered. Do you need to query the UI automation tree and invoke automation patterns from within your own application? XAML Spy supports it all.

The XAML Spy API exposes various hierarchical object structures. These tree structures include the visual tree, local file storage, UI automation trees, and more. In order to locate particular objects in hierarchical structures, XAML Spy provides extensive search options, including regular expressions and xpath.

The following code snippet writes the entire contents of the visual tree to the output;

async void WriteVisualTreeAsync(RemoteApp app)
{
  // get visual tree
  var visualTree = app.GetVisualTree();

  // retrieve all visuals
  var visuals = await visualTree.GetDescendantsAsync();

  // print (properly indented)
  for(var i = 0; i < visuals.Count; i++) {
    var v = visuals[i];
    Console.WriteLine("{0:000} {1}{2}", i + 1, new string(' ', v.Depth), v);
  }
}

XPath

Among others, you can use XPath expressions to locate objects in remote trees. The XAML Spy API includes a fairly extensive implementation of the XPath specification. The implementation enables queries such as;

  • Select all objects: //*
  • Find all buttons that are direct children of a StackPanel: //StackPanel/Button
  • Select all Button visuals that have children: //Button[*]
  • Select all descendants of the first ListBox (//ListBox)[1]/descendant::*
  • And more

XPath is a well-known query language, and it’s use in the hierarchical structures of XAML Spy is intuitive and helps to locate objects quick and easy.

Scriptcs

Scriptcs is an open source project, that allows you to use C# as a scripting language. The XAML Spy API and scriptcs are a perfect match, with just a few code lines you can easily query and modify any connected app. XAML Spy works great with scriptcs REPL, the interactive shell. The following animation demonstrates this by connecting to an iOS app and querying the visual tree. It shows the use of XPath expressions, and how to get and set the properties of a visual object.

Xamarin.Forms

Xamarin.Forms is a cross-platform UI toolkit that allows developers to easily create native user interface layouts that can be shared across Android, iOS, and Windows Phone. Xamarin.Forms defines its own set of visual elements that are rendered using native UI elements at runtime. XAML Spy 3 supports Xamarin.Forms and exposes a hierarchical structure of form elements. The following screenshot demonstrates the visual tree next to the Xamarin Forms tree of an Android app.

As with any hierarchical structure in XAML Spy 3, the Xamarin.Forms tree is also available in the XAML Spy API and supports XPath queries, member modification, etc.

Wrapping up

There’s a lot of exciting new functionality coming in XAML Spy 3. Adding support to iOS and Android, and the brand new XAML Spy API, will help developers analyze and inspect their apps even better than before.

As stated in the beginning of this post, XAML Spy 3 is not available yet, but First Floor Software aims to have a preview version available as soon as humanly possible. If you happen to attend the Build conference next week in San Francisco, make sure to look out for @kozw. More than happy to give you a personal demonstration of XAML Spy 3.

Topics