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.
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.
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.
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
.
|
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 | |
|
|
|
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 & 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ür Ihre tolle Arbeit bei den Tutorials. Sehr gut gemacht und sehr verstä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?
|
|
|