[Visual Studio] XAML Element Inspector with Visual Studio 2015 [en-US]

In the latest release of Visual Studio (aka Visual Studio 2015), Microsoft has introduce some cutting edge features called “Live Visual Tree” and “Live Property Explorer”. Using this features, you can easily inspect and edit you XAML element on the fly.

Live Visual Tree

For using Live Visual Tree, open any XAML project. It could be Windows 8, 8.1 App, Windows Universal App, or Universal Application Platform (UAP, aka App developed for Windows 10)

Press Build (F5) to compile and deploy the app. Then come back to Visual Studio. You will see a new small toolbar called “Live Visual Tree”. Click on it to expand

Now click on the small docking icon to make it stick there, make it easier to use

Now in this windows, click on the small icon that have the small triangle pointed to a rectangle. This is the Inspector, just like Google Chrome element inspector. Comeback to running app, you will wherevers the pointer, there will be a dotted box around it, cover the element under the pointer

Click once, and the Live Visual Tree will jump to the exact element.

You can click on other elements in the Live Visual Tree, and the red dotted box will jump to that element on your running app. In this way, you can see exactly how the element is drawn on your app.

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

Live Property Explorer

With the element selected in Live Visual Tree, look on the right side of Visual Studio, you will see “Live Property Explorer”, click on it to expand and click the dock button to make it stick there

Now it a lot fewer property than normal, right? Expand the “Default” group and you will see the rest.

The good things about this Live Property Explorer is, you can actually change the value, and observe the change in your running app

I will try to change the Height to 100, and see what happened on the app

And now the app

Wonderful isn’t it? You can change almost everything, except some grey out property in the Live Property Explorer.

That’s it. Now you know how to use the Live Visual Tree to inspect the XAML element on your apps, and Live Property Explorer to change the value of that element, and watch the change happened on the fly.

Stay toon for other cool feature of the new Visual Studio 2015

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s