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.
Bring up the Settings dialog in Windows 10. It will look something like this:
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.
Instead pick the actual settings app process, called SystemSettings.exe
Now if you go to Debug->Windows->Live Visual Tree you should be able to see the XAML Visual Tree of the Settings app.
It should look something like this:
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:
If you click on this box, you should see that element selected in the Live Visual Tree pane:
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!