Bill Reiss is a Windows Platform Development MVP and a Senior Consultant for AgileThought

Using the XAML Live Visual Tree Debugger against Windows 10 Core Apps

This is pretty cool. One of the great new features of Visual Studio 2015 for XAML apps is that you can see the XAML Visual Tree, drill into pieces of it, and do other cool tricks. Think Snoop for WPF or XAML Spy for most XAML based technologies, but now it’s built in to Visual Studio and Blend.

What’s even more interesting is that you can attach to other XAML apps, even if they aren’t yours, including apps that are shipped as part of Windows 10. Some of these are tightly integrated into the shell, but they are still using XAML and the same tools available to any Windows 10 app developer. Want to see how they implemented their UI? It’s a nice peek into their design process.

Ok so first you will need to have the Visual Studio 2015 RTM and Windows 10 SDK RTM. You will also need Windows 10, hopefully this is obvious.

Bring up the Settings dialog in Windows 10. It will look something like this:

image

Now run Visual Studio and Debug->Attach to Process. You will see two processes associated with Settings, one is ApplicationFrameHost.exe with a title of Settings. This isn’t what you want.

image

Instead pick the actual settings app process, called SystemSettings.exe

image

Now if you go to Debug->Windows->Live Visual Tree you should be able to see the XAML Visual Tree of the Settings app.

image

It should look something like this:

image

See that first button in the toolbar? That will highlight whatever you hover over so you can easily drill into it. Select that and then bring the Settings app to the foreground. Now when you hover over elements you should see a red box:

image

If you click on this box, you should see that element selected in the Live Visual Tree pane:

image

I actually thought this was was surprising, because they used a Grid as the container. I really thought it was going to be the new RelativePanel, because of the alignment changes that happen when the settings app goes into “narrow” mode. Maybe this app was written before that was available. You can also right click and show properties in the Live Properties Explorer.

If you are writing a Windows 10 UWP app, why not go and see how other apps are doing it using the new Live Visual Tree functionality in Visual Studio 2015. Enjoy!

  • Joe Healy

    great article. neat tip I wouldn’t have found otherwise. may make it into a video (with credit to you on the idea of course)….