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.

CapturedImage-Geeks

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.

 

Pic1

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.

Pic2

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 (2) -

Very good info. Lucky me I recently found your site by accident (stumbleupon). I've saved it for later!  my blog;  clash of clans hack online generator - http://lukejacksonautism.com/now/

Vantagens de um site responsivo
3/13/2016 6:24:00 PM #

Normalmente, isso será realizado por ajustes e dimensionamento do conteúdo e das funcionalidades de um website existente para torná-lo visível em um dispositivo móvel.

Blair
4/15/2016 6:05:33 AM #

Assim como eles, muitas outras empresas se enganam ao pensar que só publicidade é capaz de fazer de qualquer produto um sucesso.

Que deveria ser ensinado é que a ASSINATURA de uma empresa é composta por LOGOTIPO (tipografia) e LOGOMARCA (simbologia).

criação de logomarca gratis
7/31/2016 1:20:50 AM #

Uma dica que sugerimos é que você crie uma versão da logo em preto e branco com fundo preto e fundo branco, uma em escala de cinza, e em cores inversas.

los angeles vision correcti
1/3/2017 7:55:33 PM #

I am glad to be a visitant of this consummate site, thank you for this rare info!

options strike price explained
2/12/2017 11:31:48 AM #

Howdy! This article couldn't be written much better! Looking through this post reminds me of my previous roommate! He continually kept talking about this. I will forward this post to him. Fairly certain he will have a very good read. Thanks for sharing!

consulter une voyante
3/19/2017 9:36:12 AM #

Hi there this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I'm starting a blog soon but have no coding know-how so I wanted to get advice from someone with experience. Any help would be greatly appreciated!

BHW
4/15/2017 8:15:07 AM #

Heya are using Wordpress for your blog platform? I'm new to the blog world but I'm trying to get started and set up my own. Do you need any coding knowledge to make your own blog? Any help would be really appreciated!

BHW
4/16/2017 2:31:44 PM #

A motivating discussion is worth comment. I do believe that you need to write more about this topic, it may not be a taboo matter but generally people don't discuss these topics. To the next! Best wishes!!

BHW
4/16/2017 3:25:24 PM #

Admiring the persistence you put into your blog and detailed information you provide. It's awesome to come across a blog every once in a while that isn't the same outdated rehashed information. Great read! I've bookmarked your site and I'm including your RSS feeds to my Google account.

manicure
4/24/2017 8:15:48 AM #

Do you have a spam issue on this website; I also am a blogger, and I was wondering your situation; we have created some nice methods and we are looking to trade strategies with other folks, why not shoot me an email if interested.

Add comment