By Mithun Mathangadeera
When working with XAML it’s really hard to debug, fortunately since Visual studio 2015 introduced Live Visual Tree and Live Property Explorer, it’s facilitate inspect XAML properties while debugging
First we will create a simple sample screen.
Now let’s run an application and we’ll see how it works on Live Visual Tree and Live Property Explorer.
You can find this window, on the Visual Studio left hand side menu. If it’s not showing in that menu you can enable it using Debug->Windows and click on Live Visual Tree. Remember that a solution that’s not running will not show its live visual tree section.
Live visual Tree has 4 main components:
Starting from Left hand Side
- Go to Live Visual tree
By clicking on this icon, we can navigate to Visual tree.
- Enable Selection
This icon will Enable/Disable select XAML elements.
- Display Layout adorners
We can enable select Layout Adorners by clicking on this icon.
- Track Focused element.
Selected element track with Visual Tree.
Now let’s see how we use Live visual Tree after running an application. You can get visual tree by clicking ‘Go to Live Visual tree’ button and then after that click ‘Enable Selection’ to select XAML elements.
Select the element to show in Live Visual Tree.
After selecting an element you can see its entire structure
Then right click on the selected element (TextBlock to get the sub-menu)
Clicking show property we can get property window of TextBlock
Using this window we can get an idea what are the values that apply to an element, as well as we can change values and see how they works. Let’s change text and font size and see how it works.
We can see our changes in real-time and will it not help for us to be able to inspect XAML Elements? 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.
For more reading check this link:
https://visualstudiomagazine.com/articles/2015/08/01/debuggingxaml.aspx
http://amadeusw.com/debugging/live-visual-tree-vs
