12/19/13

WPF Tutorial | Logical- and Visual Tree

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. < W i n d o w > < G r i d > < L a b e lC o n t e n t = " L a b e l "/ > < B u t t o nC o n t e n t = " B u t t o n "/ > < / G r i d > < / W i n d o w >

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
wpftutorial.net/LogicalAndVisualTree.html 1/3

12/19/13

WPF Tutorial | Logical- and Visual Tree

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 D y n a m i c R e s o u r c e sreferences 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 I s E n a b l e dproperty. 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. p u b l i cs t a t i cc l a s sV i s u a l T r e e H e l p e r E x t e n s i o n s { p u b l i cs t a t i cTF i n d A n c e s t o r < T > ( D e p e n d e n c y O b j e c td e p e n d e n c y O b j e c t ) w h e r eT:c l a s s { D e p e n d e n c y O b j e c tt a r g e t=d e p e n d e n c y O b j e c t ; d o { t a r g e t=V i s u a l T r e e H e l p e r . G e t P a r e n t ( t a r g e t ) ; } w h i l e( t a r g e t! =n u l l& &! ( t a r g e ti sT ) ) ; r e t u r nt a r g e ta sT ; } }

The following example shows how to use the helper. It starts at t h i sand navigates up the visual tree until it finds an element of type G r i d . If the helper reaches the root element of the tree, it returns n u l l .
wpftutorial.net/LogicalAndVisualTree.html 2/3

12/19/13

WPF Tutorial | Logical- and Visual Tree

v a rg r i d=V i s u a l T r e e H e l p e r E x t e n s i o n s . F i n d A n c e s t o r < G r i d > ( t h i s ) ;

Last modified: 2010-06-29 08:34:41

Copyright (c) by Christian Moser, 2011.

wpftutorial.net/LogicalAndVisualTree.html

3/3