Logical Tree & Visual Tree

The existing documentation about the visual tree and logical tree in the Windows SDK leaves much to be desired. Ever since I started with WPF, I have felt unsure about what exactly differentiates the two. Here I will use a simple diagram to make a comparison between them.

<Window>

    <Grid>

        <Label Content="xuning"/>

        <Button>

            <TextBlock Text="pfs"/>

        </Button>

    </Grid>

</Window>

Following is the logical and visual tree of the above xaml codes:

 

There may be several questions come into your mind after seeing this picture:

• Why those red elements are chosen to be part of logical tree? 

The secret is behind a property called LogicalChildren. Panel, ItemsControl, ContentControl, and Decorator, which are the most common base classes, all define this property make the logical tree operate already.  For example, if you create a custom Button that subclasses ContentControl, your Content property will pick up your button as the logical parent without you doing anything.

At the end of this article, a table lists the classes that have special support for logical children, and under which property they implement that support.

•  Why there is a TextBlock under Label’s visual tree?

Unlike the button, we didn’t declare a TextBlock as the Content of Label, instead we only used a string “Xuning” there. Who created a TextBlock for us? Apparently, it’s created by WPF framework. When WPF starts to render an object, it will first check whether there is a template defined for that type, either control template or data template, if it cannot find one, it will simply call the object’s ToString method and put the return value into a TextBlock.

• Why Label’s logical child is a string?

The element in logical tree doesn’t have to be a UIElement or Visual object, it can be any type. Label is a ContentControl which take its Content property as logical child, here it happens to be string “xuning”.

 

Related Resources:

Trees in WPF 

Logical and Visual Tree 

Of logical and visual trees in WPF

Understanding the Visual Tree and Logical Tree in WPF

Appendix:

Class	Property(ies)
System.Windows.Controls
AdornedElementPlaceholder	Child property
ContentControl	Content
Decorator	Child
Grid	Children (inherited from Panel), Columns, Rows
HeaderedContentControl	Content (inherited from ContentControl), Header
HeaderedItemsControl	Items (inherited from ItemsControl), Header
InkCanvas	Children
ItemsControl	Items
Page	Content
Panel	Children
RichTextBox	Document
TextBlock	Text
TextBox	Text
ToolBarTray	ToolBars
ViewBox	Child
System.Windows.Controls.Primitives
BulletDecorator	Bullet and Child
DocumentViewerBase	Document
Popup	Child
System.Windows.Documents
FixedDocument	Pages
FixedPage	Children
FlowDocument	Blocks
FlowDocumentReader	Document
FlowDocumentScrollViewer	Document
PageContent	Child
Table	RowGroups, Columns
Span	Inlines