Inspect Visual Tree Hierarchy with XAML Spy

  • Article

In this blog post I’m going to discuss a third party tool named XAML Spy and explain how it can make your life easier by allowing live debugging/inspection of your application’s XAML during execution, tweak settings and see the impact right away; a capability not natively offered by Visual Studio. I'm going to speak relative to Windows Phone in this post but also want to highlight that you can equally debug XAML based applications for Windows Store, Silverlight or WPF driven applications using XAML Spy. This capability of inspection is extremely useful in certain situations. To demonstrate the need, consider this problem,

The Problem

Below is template list box with Data Template that renders two text boxes; Arabic (Right to Left) and English (Left to Right).

  <ListBox x:Name="VerseListBox">
 <ListBox.ItemTemplate>
 <DataTemplate>
 <StackPanel Name="stackPanel">
 <TextBlock Text="{Binding VerseArabic}" TextAlignment="Right" TextWrapping="Wrap" Margin="0,0,5,0" />
 <TextBlock Text="{Binding VerseEnglish}" TextWrapping="Wrap" Margin="10,0,0,5" />
 </StackPanel>
 </DataTemplate>
 </ListBox.ItemTemplate>
 </ListBox>

Despite that we’ve set the Text Alignment property of TextBlock for Arabic towards Right, it appears that the text blocks don’t span entire width of the screen if the content is too small,

Solution

How good it would be if I can live debug the scenario and play around with XAML properties? To do so, launch XAML Spy, go to apps > Windows Phone and “add app”. Select Windows Phone, Local XAP and browse the .xap package,

Note: Before adding a XAP please make sure you go to settings and select the target device that matches your XAP package (7.1 or 8.0 specific). I’m using Windows Phone 7.1 emulator.

XAML Spy will start the selected emulator and launch your app.


Once the app launches I go to my desired page and select the required list box item. Now I can focus on XAML Spy and expand the Visual Tree from the left hand panel and it appears I can actually traverse to whatever depth I require. As soon as you select a particular element or control, on the right hand panel you can actually inspect all of its properties, preview its corresponding XAML, see Statistics or Events bound to that control.


In my case I need to play around with properties and after playing a bit it appears that if I select Horizontal Content Alignment for desired List Box Item control the UI renders as desired,

It concludes that to fix the above issue all I need is to set HorizontalContentAlignment of the ListBoxItem container,

  <ListBox.ItemContainerStyle>
 <Style TargetType="ListBoxItem">
 <Setter Property="HorizontalContentAlignment"
 Value="Stretch" />
 </Style>
 </ListBox.ItemContainerStyle>

Moving Forward

This tool is extremely handy as it lets you play with Visual Tree as otherwise not easily understood by newbie developers. I actually encourage you to spend some time and preview how the XAML for controls like list and long list selector is rendered in form of Visual Tree Hierarchy. XAML Spy also offers isolated storage explorer and more capabilities. I hope knowledge of XAML Spy will surely help if you happen to drop by some deep Visual Truee Hierarchy or XAML rendering issues.