Logical- and Visual Tree

Introduction

Elements of a WPF user interface are hierarchically related. This relation is called the LogicalTree. The template of one element consists of multiple visual elements. This tree is called the VisualTree. WPF differs between those two trees, because for some problems you only need the logical elements and for other problems you want all elements.

 
<Window>
    <Grid>
        <Label Content="Label" />
        <Button Content="Button" />
    </Grid>
</Window>
 
 

Why do we need two different kind of trees?

A WPF control consists of multiple, more primitive controls. A button - for example - consists of a border, a rectangle and a content presenter. These controls are visual children of the button.
When WPF renders the button, the element itself has no appearance, but it iterates through the visual tree and renders the visual children of it. This hierarchical relation can also be used to do hit-testing, layout etc.
But sometimes you are not interested in the borders and rectangles of a controls' template. Particulary because the template can be replaced, and so you should not relate on the visual tree structure! Because of that you want a more robust tree that only contains the "real" controls - and not all the template parts. And that is the eligibility for the logical tree.

The Logical Tree

The logical tree describes the relations between elements of the user interface. The logical tree is responsible for:

• Inherit DependencyProperty values
• Resolving DynamicResources references
• Looking up element names for bindings
• Forwaring RoutedEvents

The Visual Tree

The visual tree is responsible for:

• Rendering visual elements
• Propagate element opacity
• Propagate Layout- and RenderTransforms
• Propagate the IsEnabled property.
• Do Hit-Testing
• RelativeSource (FindAncestor)

Programmatically Find an Ancestor in the Visual Tree

If you are a child element of a user interface and you want to access data from a parent element, but you don't know how many levels up that elemens is, it's the best solution to navigate up the tree until it finds an element of the requested type.

This helper does excactly this. You can use almost the same code to navigate through the logical tree.

 
public static class VisualTreeHelperExtensions
{
    public static T FindAncestor<T>(DependencyObject dependencyObject)
        where T : class
    {
        DependencyObject target = dependencyObject;
        do
        {
            target = VisualTreeHelper.GetParent(target);
        }
        while (target != null && !(target is T));
        return target as T;
    }
}
 
 

The following example shows how to use the helper. It starts at this and navigates up the visual tree until it finds an element of type Grid. If the helper reaches the root element of the tree, it returns null.

 
var grid = VisualTreeHelperExtensions.FindAncestor<Grid>(this);
 
 

 Comments on this article

Show all comments

Nawaz	Commented on 1.April 2010 Hey, the author of this article! You're saying that the logical tree is responsible for "Forwaring RoutedEvents", but what MSDN is saying is different. Here is an excerpt from MSDN: "One exposure of the visual tree as part of conventional WPF application programming is that event routes for a routed event mostly travel along the visual tree, not the logical tree. This subtlety of routed event behavior might not be immediately apparent unless you are a control author. Routing events through the visual tree enables controls that implement composition at the visual level to handle events or create event setters." http://msdn.microsoft.com/en-us/library/ms753391.aspx Or, did I understand you incorrectly? :-/ Regards, Nawaz .
sahand	Commented on 11.April 2010 im need wpf now
sumit rathee	Commented on 15.April 2010 simply excellent...
dreamnight	Commented on 3.May 2010 greate !
Kumar	Commented on 5.May 2010 Its Brilliant ! great job mate. Thank u soo much
vinoth	Commented on 24.May 2010 good...
lkl	Commented on 27.May 2010
lkl	Commented on 27.May 2010 Nothing to say!!!!!!!!!! Hmmmmmm!
aks	Commented on 1.June 2010 feeling comfortable but still have to see whether its really a good one......
rsm	Commented on 13.June 2010 good one!
Hasmukh	Commented on 24.June 2010 Really Good
mohan	Commented on 26.June 2010 go0ddddddddddd
Vijay	Commented on 7.July 2010 You people are idiots for applauding such a basic article to this extent. Nutty Indians!
Sharuk	Commented on 8.July 2010 This is great article on the internet. owsome...
Panima	Commented on 8.July 2010 Hay Vijay you asshole.
Jerem	Commented on 24.July 2010 Vijay, why don't you give us a link to an article you wrote ???
Adarsh kumar	Commented on 8.August 2010 Nice and Knowledgable artical,learn a lot of more
Alok Kadu	Commented on 9.August 2010 Good article for beginners.. But One can easily learn when he can see animal first then description of its various parts.
W-tus	Commented on 12.August 2010 Vijays right. The articles good, consistant and covers all about a tree. But these are basics. And you people get so excited would give a Noble for sth about ... a visual tree. Calm down, stop overexagerating, dk what makes you to..
actual WPF...	Commented on 17.August 2010 silly binders.
Gary	Commented on 18.August 2010 Nice article...i have a small question...whether Grid is Logical Tree element or Visual tree element. I guess it is a Logical Tree element. If yes, then how come it is returning the Grid control correctly?
gg	Commented on 20.August 2010
Vijayagopal	Commented on 31.August 2010 This is the best explanation for beginners level.
Ram Mohan	Commented on 1.September 2010 Excellent one !! very intresting to read...
Fuk*r	Commented on 2.September 2010 F*** ing crap this one

Name
E-Mail (optional)
Comment