Thursday, July 23, 2015

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.
image
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.
image
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.
image
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.

image
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.

image
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.
image
Live Property Explorer
To see that in action, let’s change the value of FontSize property to 40.
image
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.

image
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