XAML Spy and PixelSense revisited

Tuesday, January 15, 2013

About a month ago I blogged about XAML Spy support for PixelSense. Microsoft PixelSense (formerly called Microsoft Surface) is an interactive surface computing platform that allows one or more people to use touch and real world objects, and share digital content at the same time.

Using the Microsoft Surface 2.0 Software Development Kit, you can create Surface applications with a WPF user interface. Thanks to XAML Spy’s support for WPF, you can easily spy these apps running on your local dev machine, as discussed in the blog post of last month.

Last week I had the chance to see XAML Spy in action on an actual PixelSense device, the Samsung SUR40. This machine has a huge 40" high definition screen, which can be placed horizontally or vertically. It is optimized for over 50 unique point of simultaneous touch which makes it an ideal device for multiple users to work with at the same time. I wanted to validate two scenarios, 1) install XAML Spy on the Samsung SUR40 and attach to a running PixelSense app and 2) remote debug a PixelSense app.

Attach to PixelSense apps

The operating system on the Samsung SUR40 is Windows 7 Professional (64bit). PixelSense supports the standard Windows user interface (Windows Mode) and the deployment experience (Surface Mode). In order to attach to local PixelSense apps, XAML Spy needs to be installed on the device. This is achieved by switching to Windows Mode and install XAML Spy just like you would on any other Windows machine. Start XAML Spy and navigate to the WPF app manager. All running PixelSense apps build with a WPF user interface will appear automatically in the running section. Double-click or right-mouse click and select attach to process to attach XAML Spy to a running PixelSense app. Once an app is attached, you can explore and modify its user interface and other aspects of the app.

Conclusion: installing XAML Spy on the Samsung SUR40 and attaching to running PixelSense WPF apps works just like it does on any other Windows 7 or 8 machine. The XAML Spy metro inspired user interface feels intuitive on a large touch screen.

XAML Spy running side-by-side with a PixelSense app. The app is identified as a WPF app.

XAML Spy looks great on a 40" full HD touch screen. The metro-inspired user interface works well with a touch interface.

Remote debug PixelSense apps

The second scenario does not require XAML Spy to be installed on the PixelSense device. In this scenario a PixelSense app is deployed to the Samsung SUR40 where it connects to XAML Spy on another machine. For remote debugging to work the PixelSense app needs to reference the XamlSpy.WPF4 client assembly and have a couple of lines of code where it connects to the remote machine. For step-by-step instructions on manually connecting to XAML Spy see How to connect WPF apps manually.

The machine having XAML Spy installed must have remote debugging enabled and its firewall configured to allow remote socket connections. For more details about configuring remote debugging see the remote debugging topic in the online documentation.

After modifying the PixelSense app to connect to XAML Spy, deploy and run the app on the PixelSense device and the application appears in the XAML Spy explorer of the remote machine. This scenario worked flawlesly as well. The only trick was to enter the correct IP address of the remote machine running XAML Spy.

Conclusion

It just works! Both local and remote debugging of PixelSense apps on an actual PixelSense device work fine. So if you ever need to peek and tweak a running app on a PixelSense device, XAML Spy is your friend.

While running XAML Spy on the Samsung SUR40, a number of minor glitches did appear. I’m happy to announce that all these issues have been addressed in the January 2013 Update of XAML Spy.

Acknowledgements

Massive thanks to Roy Jansen of Semper IT Services for providing access to a Samsung SUR40 device and Dennis Vroegop for introducing me to Roy.