Visual Studio 2015 : Live Visual Tree and Live Property Explorer for XAML Debugging

One of the nicest features introduced with Visual Studio 2015 is Live Visual Tree and Live Property Explorer windows. These two windows can be quite handy when you are debugging WPF applications and mainly on UI aspect.

To show you how these two can be tremendously helpful, let me create a WPF application and that’s using Visual Studio 2015 and add a text block inside a StackPanel.

Basic UI Structure

<Grid>

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

        <TextBlock x:Name="textBlock" Text="Hello World" FontSize="20"/>

    </StackPanel>

</Grid>

Now let’s run the application. While running the application from Live Visual Tree window, enable selection in the running application by clicking the below highlighted icon.

Live Visual Tree : Enable Selection in the Running Application

If you can’t find the Live Visual Tree window, go to Debug->Windows and click on Live Visual Tree.

Adding Live Visual Tree

Now from the running application when you move your mouse over the UI controls, they will be highlighted in Red color and you should be able to select the element just like you are Inspecting elements from the browser on web applications.

Selecting Elements on Running Application

Now when you click on a particular item, here in the example, “Hello World” text block, you can see that Live Visual Tree gets expanded and you will be landed directly on that particular TextBlock control. No matter how many controls you have this will work like a charm. Now let’s right click on the TextBlock and select Show Properties.

Live Visual Tree : Show Properties

Now Live Property Explorer window will be opened. Here from these properties you can change values of any of the properties, and those changes will be applied real time on the already running application.

Live Property Explorer

To see that in action, let’s change the value of FontSize property to 40.

Live Property Explorer

Do a quick save and from the Live Visual Tree, click back on the TextBlock. Now you can see that TextBlock containing the text “Hello World” has increased font size.

Increased Font Size

So Isn’t this great or what. Actually this feature is initially introduced with Visual Studio 2015 CTP 6 and Microsoft has mentioned that this feature will be available in Universal Windows Platform applications as well in the future.

And for that we will have to wait till 29th this month, till Windows 10 is out.

Happy Coding.

Regards,

Jaliya