WPF Logical vs Visual Tree, in Plain English

There’re many discussions and articles on this subject – What I’m trying to do here is to deliver the explanation more Concisely and Intuitively.

1.Visual and Logical Tree serves different purposes.
With JQuery you can navigate up/down DOM tree in HTML. With WPF, it’s similar. Every WPF application has one Visual Tree, and one/more Logical Tree. You can navigate up/down XAML via Visual/LogicalTreeHelper – http://borsukmsdcrm.blogspot.hk/2011/04/wpf-visualtreehelper-findchild.html

The Logical Tree
The logical tree describes the relations between elements of the user interface. The logical tree is responsible for:
Inherit DependencyProperty values
Looking up element names for bindings
Forwarding RoutedEvents
Resolving DynamicResources references
The Visual Tree
The visual tree contains all logical elements including all visual elements of the template of each element. The visual tree is responsible for:
Rendering visual elements
Do Hit-Testing
Propagate Layout- and RenderTransforms
Propagate element Opacity
Propagate the IsEnabled property.
RelativeSource (FindAncestor)

And when will you need Visual/LogicalTreeHelper? For example, you have a grid of rows, user check a checkbox in one row. From code behind, you execute some business logic – and based on this logic, you set Visibility of another parent/child element in the same row. Of course, you can also do by way of Data Binding – really depends on which is easier, and which gives cleaner code.

 

2. Visual Tree as Elaboration/Extension of Logical Tree.
For example, http://tutorials.csharp-online.net/WPF_Concepts%E2%80%94Logical_and_Visual_Trees
Say for example, you navigate down from root Window, down the branch to some container (DockPanel, StackPanel, Grid, Canvas…etc), down to label.
With Logical Tree, “Label” element contains “string”.
With Visual Tree, “Label” element contains “Border”, then “ContentPresenter”, then “TextBlock”.

 

3. Logical Island? Why one WPF application has one Visual Tree and one/more Logical Tree?
Adding to complexity, when you navigate down from Window to branch, down to some container (DockPanel, StackPanel, Grid, Canvas…etc), Logical Tree stops when it hits anything that doesn’t derive from Visual/FrameworkElement.
For example, a Grid, contains a FlowDocument (derived from ContentElement). Further assume you have If you a ComboBox nested inside this FlowDocument.
With LogicalTree, you can navigate down from Window, to the Grid, and stops as you hit the FlowDocument. This FlowDocument however, contains a ComboBox – starts of another, separate, Logical Tree.
With VisualTree on the other hand, you can starts from Windows node, and continue all the way to the bottom.

Example:

<Window>
<Grid>
<ToggleButton TextElement.FontSize=”10″ Margin=”45,96,60,95″>
<FlowDocument> (First Logical Tree starts from Window tag, and stops here)
<Paragraph>
<Run Typography.Variants=”Superscript”>This text is Superscripted.</Run> This text isn’t.

</Paragraph>
<Paragraph>
<ComboBox Width=”125″ SelectedValue=”A”> (Start of another/separate Logical Tree)
<ComboBoxItem>A</ComboBoxItem>
<ComboBoxItem>B</ComboBoxItem>
<ComboBoxItem>C</ComboBoxItem>
</ComboBox>
</Paragraph>
</FlowDocument>
</ToggleButton>
</Grid>

</Window>

 

References
http://soumya.wordpress.com/2010/01/10/wpf-simplified-part-10-wpf-framework-class-hierarchy/
http://www.codeproject.com/Articles/21495/Understanding-the-Visual-Tree-and-Logical-Tree-in
WPF Inspector: http://wpfinspector.codeplex.com/

 

Advertisements

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