#994 – Viewing the Visual Tree from within Visual Studio

A visual tree in WPF is the complete hierarchy of all visual elements that make up your user interface.  The visual tree will contain lower-level elements that are not necessarily part of the higher-level logical tree, as defined in your XAML.

You can view the visual tree for UI elements in an WPF application from within Visual Studio, as follows.

Add a breakpoint in the code for your main window that occurs after the application has loaded.  In the example below, we break after pressing a Button.

In the Locals window, find the object representing your main window.  In the Value column, hover over the magnifying glass and notice that it’s labeled WPF Tree Visualizer.

994-001

 

Click on the magnifying glass to open the WPF Tree Visualizer.  The WPF Tree Visualizer will open in a new window.  You can view the Visual Tree in the upper left corner of the window.

994-002

#113 – An Application for Viewing a WPF Visual Tree

Here’s a little WPF application that can load .xaml files and then display the underlying logical and visual trees. It uses the LogicalTreeHelper.GetChildren and VisualTreeHelper.GetChild methods to recursively descend through the logical and visual trees and display them in two TreeView controls.  (Currently only works if root element of the .xaml file is a <Window> element).

You can download an executable version of the application from: DisplayWpfTrees.zip

You can find a more detailed explanation of the application at: An Application to Let You View WPF Logical Trees

You can find full source code at the WPFLogicalTree project on Codeplex.

#112 – Navigating the Visual Tree in Code

You can use the VisualTreeHelper.GetChildrenCount and GetChild methods to enumerate all objects in a visual tree.

To get all of the children in a visual tree of a specified parent object, you can use a for loop:

            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
                Debug.WriteLine(VisualTreeHelper.GetChild(obj, i));

You could extend this example and descend down the visual tree by calling GetChild methods on the children returned from the first call.

#111 – The Visual Tree

A visual tree in WPF breaks down the logical tree into lower-level visual elements.  Where elements in a logical tree are typically controls, the visual tree contains all of the underlying visual elements that make up the control.  All elements in a visual tree derive from Visual or Visual3D.

As an example, the visual tree for the following XAML:

 <Window x:Class="WpfApplication4.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml>
     <StackPanel>
         <Button Content="Click Me" />
         <TextBox />
         <ListBox>
             <ListBoxItem Content="Barley"/>
             <ListBoxItem Content="Oats"/>
         </ListBox>
     </StackPanel>
 </Window>

looks like this:

Window
    Border
        AdornerDecorator
            ContentPresenter
                StackPanel
                    Button
                        ButtonChrome
                            ContentPresenter
                                TextBlock
                    TextBox
                        ListBoxChrome
                            ScrollViewer
                                Grid
                                    Rectangle
                                    ScrollContentPresenter
                                        TextBoxView
                                            TextBoxLineDrawingVisual
                                        AdornerLayer
                                    Scrollbar
                                    Scrollbar
                    ListBox
                        Border
                            ScrollViewer
                                Grid
                                    Rectangle
                                    ScrollContentPresenter
                                        ItemsPresenter
                                            VirtualizingStackPanel
                                                ListBoxItem
                                                    Border
                                                        ContentPresenter
                                                            TextBlock
                                                ListBoxItem
                                                    Border
                                                        ContentPresenter
                                                            TextBlock
                                        AdornerLayer
                                    ScrollBar
                                    Scrollbar
            AdornerLayer