One of the great things about Visual Studio 2015’s support for XAML apps is the support offered by the Live Views of XAML – the Live Visual Tree and Live Property Explorer.

There’s a good write-up of these on MSDN;

https://msdn.microsoft.com/en-us/library/mt270227.aspx

and the operating systems (and framework) versions that these work for across Windows Store and WPF are listed on that page too.

When I first saw these tools, I was very pleased to see this sort of functionality come into Visual Studio but I hadn’t quite appreciated how useful they might be from the point of view of wanting to ‘sniff out’ what’s going on in existing applications already installed on Windows or from the Store. It took a Build session (I forget which one) to shine some light on that for me.

Let’s take an example – here’s the News application on Windows 10;

and maybe I want to dig in a little and see how it’s made up. I was particularly interested in how much complexity was going on in that little navigation bar on the left edge of the app.

I could either attach my Visual Studio debugger to the existing running process or I could use a feature that VS has had for quite a while (although it moved in the UI at one point) to run up an existing  Store application like this;

and then I can select the News app;

Now, if I leave ‘Managed Only’ then I’m going to bump into a slight problem in that the debugger can’t deal with debugging a .NET Native (all Windows 10 apps from the Store are compiled natively) app in this way and it will say;

but if I go back and select native debugging (like it tells me to);

then I can run it up and I’ve got Visual Studio’s Live Views (along with the rest of the debugger although I’m not sure how useful that will be without .NET debugging, symbols or source here);

and if I wanted (as an example) to look at how a particular visual element is constructed, I can just explore around.

In the screenshot below, I was curious as to whether I was looking at a ListView (I am) and what the item template looked like and I can see that I’m dealing with a custom control here representing each item in the navigation list;

and I can see that the whole side navigation bar is a custom control of type SideNavigationBar;

and this occupies this area of the screen;

and the top set of navigation items are in a ListView whereas the bottom two (my Microsoft Account and Settings) are handled separately which, I presume, means there must be some bit of code in the control make sure that the ListView doesn’t maintain a selected item when either of the bottom two items are selected because they aren’t part of that ListView.

I was curious as to whether this control also showed up the Finance application so I had a look and, sure enough, there’s some nice re-use going on there as you’d hope/expect/pray! for;

I think it’s a really useful tool to have in terms of figuring out how some piece of a XAML app was put together and so I thought I’d share.