[Visual Studio] XAML Element Inspector with Visual Studio 2015 [vi-vn]

Posted on Edited on In Disqus:

In the newest version of Visual Studio (aka Visual Studio 2015), Microsoft introduced 2 extremely powerful features called “Live Visual Tree” and “Live Property Explorer”. With these 2 features you can easily view and edit XAML code while the app is running [insert jaw-dropping face]

1. Live Visual Tree

To use the Live Visual Tree, open any project with XAML code in it. It can be a Windows 8 or 8.1 App, a Windows Universal App, or a Universal Windows Platform app (UWP, aka an App built for Windows 10)

Build and run the app, then go back to Visual Studio and you’ll see a small toolbar chunk called “Live Visual Tree”. Click it to open it

Click the little pin icon to stick it there — it’s easier to use that way

In this window, click the icon of a triangle pointing at a small rectangle. That is the Inspector, very much like Google Chrome’s Element Inspector. Go back to the running app and you’ll see that wherever the cursor goes, a red dotted rectangle wraps the element under the cursor.

One click and the Live Visual Tree jumps to that element’s exact position

You can also click other elements in the Live Visual Tree, and the red dotted frame jumps to that element in your running app. This way you understand exactly which elements are drawn in your app.

You can also search for an element by its name or its type

2. Live Property Explorer

With any element selected in the Live Visual Tree, look over to the right side of Visual Studio and you’ll see the “Live Property Explorer”; click it to open it, then click the pin to stick it there

Wait, why are there fewer properties than usual? Don’t worry — expand the “Default” group and you’ll see the remaining properties

One nice thing about the Live Property Explorer is that you can change the values of the properties and see that change immediately in your running app.

I’ll try changing Height to 100 and see what happens in the app

Now over to the app

Terrifying, isn’t it? You can change almost everything, except a few locked properties (the grayed-out ones) in the Live Property Explorer

Awesome. So now you know how to use the Live Visual Tree to trace how your XAML code is rendered in the app, and the Live Property Explorer to change Property values and see that change immediately, right in the running app without rebuilding.

See you in the next posts about Visual Studio 2015’s extremely powerful features