Live Visual Tree And Live Property Explorer In Visual Studio 2015

Visual Studio 2015 has come up with lots of exciting and powerful features. As a developer these features will delight you and you may even scream "WOW."

One such feature is Live Visual Tree and Live Property Explorer. It’s available even in professional versions of VS 2015.

Let’s explore what this feature is and how useful it is for WPF developer.

We will start with a WPF sample application.

We will start Visual Studio 2015. File menu - New - Project

Choose ‘WPF Application’.

Blank WPF page is displayed where we can add controls we need on the page:

Let’s add a ‘Button’, ‘ComboBox’ control one each on this sample application page to explore the capabilities of LVT and LPE.

We have set the Content property of Button to ‘Add’ and have added 3 items in the combobox.

 

To make use of LVT and LPE you need to run your application in debug mode (which as a developer we frequently do).

 

Press F11 to run the application in debug mode.

 

Now comes the magic. In debug mode now if you go to Debug, Windows.

You will see the menu items for Live Visual Tree and Live Property Explorer.

Keep pressing F11/ F10 till the constructor code in code behind of this page is over. As soon as this happen, you will see the items appearing in Live Visual Tree window.

To pick a particular element from UI, rather than finding in this big tree choose ‘Enable selection in running application’ option,



Once the option is chosen, move on to bring the application page instance in front and take the cursor to the control you are willing to choose.

I have selected the ‘Add’ Button. As soon as I select this control, you can see the Button element selected in Live Visual Tree window, and all current property value of this Button displayed in Live Property Explorer window,

Please note

The values displayed in the Live Property explorer are the value of Button control of that Moment. If in your code you are changing the state of these properties, the values are bound to change.

Now the extremely powerful punch from WPF team. In Live Property Explorer change and of the property value say Content property from ‘Add’ to ‘Update’.

It’s done. Assume the right value of this button was expected to be ‘Update’ so you just Previewed it with Live, and knowingly.

 

Change the property values at runtime and Preview it Live. Cool!

You can edit any number of such changes at run time and with each and every control present on the WPF page you can play around with Live.