享受代码,享受人生

SOA is an integration solution. SOA is message oriented first.
The Key character of SOA is loosely coupled. SOA is enriched
by creating composite apps.
posts - 213, comments - 2314, trackbacks - 162, articles - 45
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

Logical Tree & Visual Tree

Posted on 2010-06-04 21:14 idior 阅读(...) 评论(...) 编辑 收藏

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