Understanding Visual Tree and Logical Tree

When talking about WPF applications, you will often hear about the Logical Tree and the Visual Tree. The Logical Tree is basically a tree representation of the .NET classes for user interface controls. Consider the following XAML code:

This code makes use of .NET objects within a hierarchical structure that can be refigured in a Logical Tree, as shown in Figure 31.8.

Figure 31.8 The Logical Tree provides a hierarchical view of the UI elements.

Starting from Visual Studio 2008 SP 1, you can investigate the Logical Tree in a more convenient way, with the Document Outline tool window (you find it in View, Other Windows) that provides a hierarchical view of the interface with previews (see Figure 31.9).

Figure 31.9 Investigating the Logical Tree with the Document Outline tool.

The Visual Tree is a little bit more complex concept that is important. As explained in the next chapters, WPF controls are the result of the aggregation of primitive elements, and they can be completely redefined with control templates. For example, a default Button is made of Chrome, ContentPresenter, and TextBlock controls. The combination of these elements creates a Visual, which represents a visual element in the user interface. The Visual Tree is thus the representation of all the visual elements in the UI that are rendered to the screen, plus their components. Consider the following simple XAML:

The visual tree representation is reported in Figure 31.10.

Figure 31.10 The Visual Tree representation for UI elements.

Understanding the Visual Tree is important for understanding another key concept in the WPF development, routed events, which are described just after introducing how you handle events in WPF.