#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