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

Posted on Edited on In , Disqus:

Chào các bạn, kể từ bài blog này, mình sẽ viết bằng tiếng Anh nhé. Bạn có thể dùng Google Translate hoặc Bing Translate để dịch sang tiếng Việt nhé :3

Các bài viết trước mình cũng sẽ viết lại bằng tiếng Anh.

Hello guys, from this post forward, I will write in English. You can use “Google Translate” or “Bing Translate” to read it in Vietnamese

In the latest release of Visual Studio (aka Visual Studio 2015), Microsoft has introduced some cutting-edge features called “Live Visual Tree” and “Live Property Explorer.” You can easily inspect and edit your XAML element on the fly using these features.

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, click on the small icon that has the small triangle pointed to a rectangle in this window. This is the Inspector, just like Google Chrome element inspector. Comeback to running app, you will see wherever the pointer is, 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 same 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 has a lot fewer properties than usual, right? Expand the “Default” group, and you will see the rest.

The good thing 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

Incredible, 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 happen on the fly.

Stay tune for other cool features of the new Visual Studio 2015