Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


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 contains all logical elements including all visual elements of the template of each element. 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);
 
 




Last modified: 2010-06-29 08:34:41
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
Rahul Kumar
Commented on 19.May 2009
Fantastic!
jasmeet
Commented on 29.May 2009
I am not getting the essence of Logical Tree Visual Tree. Further the responsibilities of them either.
doHkO
Commented on 4.June 2009
kewl. Pero este tema si me ocasionó confusiones. Gracias anyway.
hari
Commented on 20.June 2009
Hi.I appreciate you writing this WPF Tutorial for Beginners like me.
Can you please explain the difference between Logical and Visual Tree a little more clearly.
anonimo
Commented on 20.June 2009
si, puedes detallarlo un poco mejor?
Christian Moser
Commented on 21.June 2009
Hi Hari,
I added an explanation to the article that answers the question "why does WPF differ two types of trees?".
I hope this brings a bit more clarity.

Greetings
Christian
K. Feroz
Commented on 22.June 2009
Dear Christian, Thanks for this article. The articles are super fantastic, and I am truly clearing my duobts about WPF here !!!. Could you please let us all know how to implement the code \"Find Ancestor in the visual tree\".
Jay Hombal
Commented on 22.June 2009
Thanks for putting together great material.
channa abeetha
Commented on 11.August 2009
Great!!!!!! Channa Abeetha
Joel
Commented on 18.August 2009
With C# 3.0 in .NET Framework 3.5 and later, we now have Extension Methods, so could not that FindAncestors helper be rewritten as an Extension Method?
krishna...
Commented on 27.August 2009
Really cool...keep it up..!!!!!!!!!
Rine
Commented on 23.September 2009
For those with limited C# language skills, the following might help in understanding this code.

* Type Parameter usage and constraint in C#:
public static T FunctionName<T>(ObjectType objectName)
The required return object type is specified to the function using the <T> parameter. In the sample, this is 'Grid'
The parameter type is constrained by the following:
where T : class
Using 'class', the argument must be a reference type; this applies also to any class, interface, delegate, or array type.
'Grid' is a valid reference type.

* DependencyObject Class (System.Windows)
Represents an object that participates in the dependency property system.

* VisualTreeHelper Class (System.Windows.Media)
Provides utility methods that perform common tasks involving nodes in a visual tree.
ie. GetParent()

Confused
Commented on 12.October 2009
Why is it a tree ?

I thought we are looking at controls, control inheritance and attributes or properties...where did the trees come from ?
Christian Moser
Commented on 13.October 2009
Hi Confused ;-),
When you create a screen in WPF, it typically consists of multiple controls that even are nested within each other (buttons within a panel, radios within a group box). This structure of controls can also be drawn as a hierarchical tree.
Where in other technologies this hierarchical relation is only for layout purpose, in WPF it is also used for value propagation and ressource lookup.

With inheritance I do not mean deriving from a base class. It's about value inheritance from parent to child controls along the hierarchical tree.

I hope this clarifies a bit.

Greetings
Christian
Satya Dev...
Commented on 25.October 2009
My two cents for the puzzled people. I am a learner of WPF, not an expert. So don't shoot me if I am wrong in my understanding or explanation :)

Okay In the cavemen days i.e. in the days of MFC & VB days this is how we used to layout our GUI.

1. We have a dialog or a Window. We drag drop *controls* like buttons, labels etc. where each control is independent.

2. In a control at the most what were only able to do is to use the methods (not even properties) given by those *controls* and configure them to suite to our needs and were living happy simple life.

3. For example: Most of the time we were calling "setText" or "getText" type methods on Buttons and Labels and felt happy about that

4. If some one could put an icon in a button, we adore that person as a hero (or heroin and making ourself hero)

5. But if we think back now that *drag-drop* of control on a window or a dialog is like working with dead people. No *control* knows what other control is doing.

5. For example if a dialog is re sizable and if we increase the size of dialog all those controls stay where they are with same sizes and used to look at us with shame faces

6. Things are changed with Java and with its Layout System especially with Grid bag layout, where Java GUI J*controls* are automatically responsive for the changes that happened to their parent or to the fellow components based on the layout.

7. For example unlike in a MFC dialog box, when we resize a Java dialog box (provided it is resizable) all (or some depending up on how they layed out) of its components changes size.

8. It was a great wonder for me first time when I saw that happend in 1998/1999 time frame

9. Well, as we all know *MS* is big copy master of ideas and improvising things by stealing ideas, same thing happened with WPF

10. WPF extended Java's layout mechanism to next level

11. Not only a WPF control (Say Button) can understand and adjust its size if its neighbor or Owner's (Container) size changes, but also can become a Container by it self.

12. This is a very interesting concept. This means technically you can have
Button inside a Button. And that Button can contain another and so on until your energy gets drained out.

13. If we think now all controls now become a big family.

14. That means For example a top level Window/Dialog contains a Grid. A Grid contains Button1, List1, Button2 (Just examples only) and List1 Can contain more Buttons. Those Buttons contains, Icons and Labels. and so on.

15. So every *Control* is either contains some thing in it and contained in some thing (could be a another *Control* or a top level Window

16. For now I think a Window a top level thing. May be in future A Window might be contained in OS Window list so that we an embed on application in another, I don't know. May be this is an interesting idea or may be over thinking. I don't know though

17. But the gist here is that All this containment leads us to think of using only data structure that is *Trees*

18. Or in other words in WPF all controls form a family like Grand Parent (main Window) Sons and Daughers (Grids, Lists etc.) Grand kids (Buttons) etc. Actually top level person (Main Window) could be Great-Great-Great-Great Grant Parent depending up on how many decedent it has.

19. Lastly how do you represent your whole family? I know what you are thinking. *Family Tree*
Shanky
Commented on 29.October 2009
Hi,
It's not 2 cents, it is actually more than a dollar,thank you,
behdad
Commented on 2.November 2009
thanks for this tutorial
anon
Commented on 29.November 2009
Thank you Satya! I like your comment. It helps me a lot to see this tree thing in a bigger context.
Samant
Commented on 12.December 2009
I liked the hierarchical concept and the work division between the trees. But I couldn't understand how a visual tree element would propagate the IsEnabled property. Shouldn't it be the Logical tree element to do that? It's a button that gets enabled, not its border or content, I guess.
AR
Commented on 17.December 2009
Excellent tutorial for the beginners.
SatyaDev Bulusu
Commented on 1.January 2010
Here is my understanding

Logical tree is the chain of user interface element conceptual behaviors as a tree (I will explain this in a little bit)

Visual tree is the chain of user interface element look & feel represented as a tree.

OK I defined enough. Let me explain this.

To understand the representation of Logical & Visual trees, it is important to know why we need to have two trees.

One of the main goals of WPF user interface technology is to separate the Behavior (Logical) from its Look & Feel(Visual).

This means logically a button is always a button that has following states of behaviors

1. Not Focused: When a button is not in focus even if we press Enter key nothing happens (I deliberately did not use Mouse click here, because with Mouse Click we always has the option of setting focus to the button, if the click happens in the button area)

2. Button in Focus: If we press Enter on the key board or Mouse Click with in the region of the button we move button to next (Pushed Down) state

3. Button Pushed Down: Button starts the process if any thing is associated with it.

4. Button Pressed State: Process is going on (if one attached)

5. Button Popped up: Process completed (if a process is there)

If you look carefully for all the above 5 states Visually a button look different (Not HTML button)

1. Not focus state: In this state a normal Windows Vista button looks gray (in other OS model this may be different)

2.Button in Focus: In the state a light blue to white gradient flow animation is shown in a Vista button (in other OS models this may be different)

3. Button Pushed Down: In this state an animation occurs for to make it appear like it is pushed (Note nothing gets pushed in your screen even if it is a LCD monitor:) (in other OS model this may be different)

4. Button Pressed State: In this state there appears like a small dent on the screen (Not a real dent, if it is real dent blame it on your kid) (in other OS model this may be different)

5. Button Popped up: An animation that appears like button comes back to its original Button Focus state (State 2) (in other OS model this may be different)

If we observe closely, the five (5) behaviors given above appear like they are tied to the look and feel of the button, button actually they are not and they need to be in fact. Look at the "Post Comment" button at the end of this page that I clicked to post this comment. Visually it is a frigid button as if the states I named above are not implemented by it, again only visually. But when I clicked it, in fact that click does exhibit all the behaviors I mentioned above.

So this means no matter how a GUI element look like different if it exhibits all the 5 behaviors I mentioned above it is technically a button, even if it looks like a rectangle (normal button) or a circle or triangle or any other shape. So in order to separate behavior from look & feel, WPF defines two different trees for every component.

1. Logical tree: That contains components that define the behaviors

2. Visual Tree: That contain components that are used for displaying (rendering the button).

So we should not count on the physical shape of a GUI component in WPF.

My understanding is that all Dependency properties uses only Logical Tree not Visual Tree
Satya Dev...
Commented on 1.January 2010
Hi I am posting my comments to hear to convey my understanding so that some one correct me if I am wrong. Currently I am learning WPF, so there is a some chance that I could be wrong. - Satya
Harendra kumar
Commented on 4.January 2010
Hare is my understanding.

The Logical Tree is a tree structure that represents the hierarchy of controls and elements that constitute a piece of user interface in WPF, but without their inner parts.

For example, if a DockPanel contains a ListBox which contains a list of Buttons, the Logical Tree will consist of the following:


DockPanel
+ListBox
+Button
+Button
+Button


The Visual Tree is a tree structure that represents the fine-grained hierarchy of Visuals that constitute what appears on the screen. It contains the same elements as the Logical Tree, but includes all the Visuals that are used to compose the Logical Tree's controls and elements, like the ControlTemplates and DataTemplates.

The Visual Tree of the previous example would therefore be as follows:


DockPanel
+ListBox
+Border
+...
+VirtualizingStackPanel
+ListBoxItem
+Button
+Border
+....
pooja
Commented on 4.January 2010
hey.. really gud..
gwang
Commented on 6.January 2010
Really learned a lot! Simple and clear. Thanks.
ibrar shah
Commented on 19.January 2010
nice article
Nnamdi Onubogu
Commented on 20.January 2010
For those ho are having problems differentiating Logical Tree items from those of Visual Tree, I think Visual Tree elements are components that constitue Logical Tree items/objects. So in essence, a Logical Tree element (Like the example of the button) consists of numerous visual tree elements...

I hope this is accurate, and/or useful...





























Henry
Commented on 29.January 2010
Very nice tutorial. Nice and easy to follow
Sharif
Commented on 29.January 2010
Very good tutorial. Thanks.
anon
Commented on 1.February 2010
Satya Dev,
Your explanations (both of them), fully accurate or not, were very helpful in getting a layman's overview. The style of bullet points to explain steps of explanations is very helpful. You should write a book this way !
Thanks !
sathya
Commented on 10.February 2010
Really nice work, i am a beginner, i am feeling happy by reading this article,friends please give me the links for WCF, Silverlight and Webservices.
Mannras
Commented on 19.February 2010
I must admit that the contents presented here in WPF tutorial is easy and self explanatory and covers almost all features of it.
Jeremy
Commented on 18.March 2010
Wow, there are some people who should really be tackling some more basic C# language/compsci constructs before taking on something as large and difficult as WPF. I'm seeing some really funny questions here!!!!
Luciano
Commented on 18.March 2010
Very good explanations Satya! Thanks!
Bhavesh Darji
Commented on 22.March 2010
Good for all beginner\'s. Bhavesh
Vijay
Commented on 31.March 2010
Great Satya, Keep going..!
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?
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
rahul
Commented on 8.September 2010
Wt's bool shit man
sp
Commented on 11.September 2010
@W-tus and @Vijay..this is for beginners not for you a******s..be calm when you dont get anything out of it.
Vijay Joshi
Commented on 14.September 2010
Great article. Keep this tempo up.
Vijay
Commented on 20.September 2010
really good article !
RAVI
Commented on 21.September 2010
Excellent article for beginners
Abhishek
Commented on 23.September 2010
Having interest in this Website. Nice One :-)
maran
Commented on 29.September 2010
hi
Gurvinder
Commented on 1.October 2010
Does the routed event traverses only logical tree or visual tree of an element also?
prabu
Commented on 18.October 2010
all coments r true
siva
Commented on 18.October 2010
very nice
Akanksha
Commented on 19.October 2010
Nice Article easy to understand for beginners..!!!!!
User
Commented on 20.October 2010
@dd That is a very interesting point.
John
Commented on 21.October 2010
Very nice article even for experienced programmers
NJ_coder
Commented on 2.November 2010
This individual just copied from you. Here is the link.
http://www.c-sharpcorner.com/UploadFile/jitendra1987/4046/Default.aspx
Coder
Commented on 12.November 2010
Awesome article
a***
Commented on 17.November 2010
gud one
aisha
Commented on 3.December 2010
Good Article
Mauro
Commented on 3.December 2010
Very good article
Yathish
Commented on 5.December 2010
I found it useful. Thank you Christian!
blueskin
Commented on 6.December 2010
I am QT programmer for the past 3 years and this tutorial does give a me a basic understanding. But am still trying to understand the hierarchical relation in terms of OO programming concepts. If have a link that provides understanding on how these trees work that'd be great. I prefer understanding the lower level concepts rather than remembering them. Thank you.
Karthick
Commented on 19.January 2011
Nice article
prabhu
Commented on 10.February 2011
nice article. Good for beginners.

THANK YOU....
Janynne Gomes
Commented on 14.February 2011
Awesome explanation. Helped me a lot!

Tnx!
Dennis
Commented on 17.February 2011
Hey, I'm a beginner and really appreciate your efforts. Thank you. Some day this may seem old hat, but for now, it's all new to me. Thanks again and know your efforts are appreciated.
spencer
Commented on 22.February 2011
Really Nice Article for Beginners. Thanks for this helpful article . Thank you guys..
nightrider
Commented on 23.February 2011
good one for beginner
Amogh
Commented on 23.February 2011
You have explained things in all your articles in a very nice way. MSDN has got all of this but their way of explaining is mechanical and lot difficult and time consuming to understand.
Thanks for this stuff bro, it helps understand things quickly.
Mohamed...
Commented on 15.March 2011
Hi Im new to WPF and this article reaaly helps me alot....Its easy to understand and guide is given properly .Thnx dude.....Keep it up
Ratkiia
Commented on 20.March 2011
Very nice article and nicely explained.
Amihai
Commented on 21.March 2011
wonderful article
Sanjay Patolia
Commented on 24.March 2011
It was good but still it needed few practicle examples to elaborate Visual Trees
Simon
Commented on 2.April 2011
7 years ago I have felt that .design file in the classic C# is a worst practice of
design. For a number of projects I've developed and XML based mechanism of controls layout is universal for C#, MFC and run time visual object builders. Microsoft in Hertzlya(Israel ) sent us to...
XAML is like we have done, but does not suppose distribution of C# objects in assemblies and their dynamic link.What is about the example it could be done simple more if using XPATH and its reflection in tree of objects.
madhav
Commented on 28.April 2011
chengila
mangesh joshi
Commented on 7.May 2011
very very nice &amp; simple....
Con
Commented on 8.June 2011
Funny how I found your site (I mean the way i searched through the net). I've spent more than half of the day looking for tutorials in wpf. Thanks, this really helped me a lot in my school project. By the way I'm a Computer Science student and i wish to build some site like this someday. Thank you again!
Vivek...
Commented on 26.June 2011
Thanks for your great work..for me the following explanation is more clear

The Logical Tree is a tree structure that represents the hierarchy of controls and elements that constitute a piece of user interface in WPF, but without their inner parts.

For example, if a DockPanel contains a ListBox which contains a list of Buttons, the Logical Tree will consist of the following:

DockPanel
+ListBox
+Button
+Button
+Button


The Visual Tree is a tree structure that represents the fine-grained hierarchy of Visuals that constitute what appears on the screen. It contains the same elements as the Logical Tree, but includes all the Visuals that are used to compose the Logical Tree's controls and elements, like the ControlTemplates and DataTemplates.

The Visual Tree of the previous example would therefore be as follows:

DockPanel
+ListBox
+Border
+...
+VirtualizingStackPanel
+ListBoxItem
+Button
+Border
+....
Marcus Galka
Commented on 30.June 2011
Hallo Herr Mosers, vielen Dank f&Atilde;&frac14;r Ihre tolle Arbeit bei den Tutorials. Sehr gut gemacht und sehr verst&Atilde;&curren;ndlich. Hat mir sehr geholfen.
Rajshekar...
Commented on 5.July 2011
This is very good article and explained in simple words and realy very good for beginners
Alexander
Commented on 7.August 2011
Good expanation and easy to understand. I liked it.
Ravi Kurapati
Commented on 13.August 2011
Thanks bro... you made my day :) please continue your good work....
Girish
Commented on 16.September 2011
Thanks a lot..! :)
ghiwany
Commented on 17.September 2011
your example ist very simple to understand
thanks for all
Ashish Dhyani
Commented on 19.September 2011
Nice one! But can u explain it step by step?

Name
E-Mail (optional)
Comment