享受代碼,享受人生

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.

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: