#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
About these ads

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

3 Responses to #111 – The Visual Tree

  1. Pingback: Tweets that mention #111 – The Visual Tree « 2,000 Things You Should Know About WPF -- Topsy.com

  2. Pingback: #451 – Data Binding Elements in a Collection to a Grid, Part IV « 2,000 Things You Should Know About WPF

  3. Pingback: #994 – Viewing the Visual Tree from within Visual Studio | 2,000 Things You Should Know About WPF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 377 other followers

%d bloggers like this: