WPFAQS – Logical and Visual Trees in WPF

WPFAQS – is a series on WPF frequently asked questions (FAQS). Today we will discuss about one of the most important and mostly overlooked areas of WPF, Logical and Visual trees.

WPFAQS(002) – What are logical and visual trees in WPF?

One of the main reason of adaptation of WPF by the developers is that it has an inherent support of “separation of concerns”, like the domain/model and its presentation in the form of user interfaces or views. How it is achieved is by introducing two new concepts apart from lots of others – logical trees and visual trees and they are based on a very powerful concept of composition, that means the developers/designers can now compose these trees as they want. “WOW” cool stuff right. First thing first, lets discuss the WPF trees and there types, logical and visual trees. Trees is the basic data structure behind XAML and WPF composition model. When you compose an application with the existing controls or your own custom controls to create your application this means you are creating a logical tree of the controls. Not clear?? I know its a little bit involved to get a hold of it. Let me give you an example – I  have created a very simple application of drawing random blocks, called “LegoDraw”  Here is how it looks like.


And now if you look at the logical tree below, of  this application, you notice that The Window is composed of a grid control that is further composed of Menus and Stackpanel and that further composed of comoboboxes and another Grid, that actually contains a Mainboard user control.



This logical tree can now very easily map to the XAML hierarchal view. What are the benefits of using this type of composition. The benefits will become more obvious when you understand the design pattern behind this data structure that is the famous composite design pattern. That mean you are creating a parent child relationship where children knows their parents and the parent knows the where about of their children. So what does it mean, It means that parents can iterate through the children as defined in the strategy and controlling their layouts etc etc.

Lets now talk about the deferred discussion of look and feel, actually i was waiting for this moment. The logical tree is great in defining controls by composing them etc, etc. but limited to some default look and feel – as provided by the framework or so. How about I don't need a rectangular button instead i need a circular button, what are the options we have in this case??? We have limitless options available with the introduction of visual tree. A visual tree is basically a mare expansion of a logical tree, where the child nodes/elements that are derived from “System.Windows.Media.Visual or System.Windows.Media.Visual3D “ are broken down into their core visual components, known as visual tree. That's the foundation of the template mechanism provided in the WPF, that is, when you write a template for a control, you are defining or redefining the visual tree that applies for that control. Here is an example of a Template of a combobox apart from lots of other things that you can redefine for its appearance.


The visual tree provides you extreme level of control in composing different types of controls, when it comes to performance and  optimization  or even defining the event routing strategy between the parents and the child controls. You can also read more details about them here[Ms001]

That's all for now folks, will discuss next time the different types of templates with some examples. See you next time, Enjoy :)

If you enjoyed reading this blog, leave your valuable feedback and consider subscribing to the RSS feed. You can also subscribe to it by email. Also, you can follow me on Twitter. Thank you!
Comments are closed