Logical tree and visual tree

Content of this Chapter

L logical tree and visual tree

L dependency attributes

L routing event

We are about to complete the first part of this book. Before starting some really interesting topics, it is useful to review some of the main concepts introduced earlier. net programmers are not familiar. Some topics in this chapter are the most important things in the WPF steep learning curve. With these concepts familiar, you will be able to confidently learn the rest of the book (or any other WPF document ).

Some concepts in this chapter are brand new (such as logical and visual trees), while others are extensions of common concepts (such as attributes and events ). When learning every concept, you will see how to apply them to a simple user interface-The about dialog box. Many programs need this interface.

3.1 logical and visual trees

XAML is designed to present user interfaces, because it has hierarchical features. In WPF, the user interface is built by an object tree, which is called a logic tree.

Code listing 3-1 defines the prototype of the hypothetical about dialog box and uses window as the root node of the logic tree. Window has a stackpanel sub-element (which will be explained in chapter 6th). It includes some simple controls and another stackpanel, which also contains some button controls.

Code List 3-1 A simple about dialog box in the form of XAML

Figure 3-1 listing by code 3-1
Displayed dialog box

"Heatace =" 12 "src =" http://book.csdn.net/BookFiles/677/img/image072.gif "width =" 150 "align =" Left "> Figure 3-1 shows the displayed dialog box (by pasting the contents of code listing 3-1 in tools like xamlpad, it is easy to make a dialog box). Figure 3-2 shows the logic tree of the dialog box.

Note that the logic tree of the WPF user interface is not created using XAML. The code list 3-1 can be fully implemented using procedural code, while the logic tree is consistent.

The logic tree concept is intuitive, but why do you need to pay attention to it? Because almost every aspect of WPF (attributes, events, resources, etc.) has behaviors associated with the logic tree. For example, attribute values are automatically transmitted along the tree to subelements, And the triggered events can traverse the tree from bottom to top or down. These two actions will be explained later in this chapter.

Figure 3-2 logic tree of code listing 3-1

"Hspace =" 12 "src =" http://book.csdn.net/BookFiles/677/img/image073.gif "width =" 430 "align =" Left "> A concept similar to the logical tree is the visual tree. The visual tree is basically an extension of the logic tree. In the visual tree, nodes are scattered and distributed to the core visual components. The visual tree provides some detailed visualization implementation, rather than treating each element as a "black box ". For example, although ListBox is logically a separate control, its default visual rendering is composed of more original WPF elements: A border object, two scrollbars, and other elements.

Not all logical Tree nodes appear in the visual tree. Only elements derived from system. Windows. Media. Visual or system. Windows. Media. visual3d are included. Other elements (and some simple string content, such as the content in code listing 3-1) are not included because they are not inherently rendered.

Figure 3-3 shows the default visual tree generated after running the aero topic in Windows Vista in code listing 3-1. This chart provides some internal invisible UI components, for example, the two scrollbar elements of ListBox and the border elements of each label. This also tells us that the three elements, button, label, and listboxitem, are the same except that the button uses a fuzzy buttonchrome element rather than the border element. (Because these controls have different default attribute values, they may have some other differences in appearance. For example, a button has a default boundary width of margin of 10, which is available in the top, bottom, and left directions, the default margin value of the label is 0 .)

The prompt is displayed in the toolbar of xamlpad. A button can display any rendered visual tree (and attribute values) of XAML ). When XAML is put into a window object (in case of 3-1), you cannot see its visual tree, but you only need to change the window element to the page element (and delete the sizetocontent attribute ), you can enjoy the benefits of this function.

Because this feature allows you to observe the composition of WPF elements in a deeper level, the visual tree may become quite complex. Fortunately, although the visual tree is the core component of the WPF architecture, you usually do not have to worry about it unless you are completely remodeling the controls (as described in Chapter 10th) or do some underlying rendering (explained in section 11.1 ). Write code based on the visual tree of a button. For example, if you want to break one of WPF's core principles, the visible part and the logical part are separated. When the technology in Chapter 1 is used to change the style of controls such as button, the entire visual tree will be replaced by something completely different.

Therefore, some symmetric classes such as system. Windows. logicaltreehelper and system. Windows. Media. visualtreehelper can be used to traverse the logical and visual trees conveniently. Code List 3-2 contains a code hidden file in code list 3-1. When it is run under the debugger, the logic tree and visual tree of the depth-first about dialog box are output. (Add X: class = "aboutdialog" and the corresponding xmlns: X tag to the code listing 3-1 to associate it with procedural code .)

Do not write code based on the specific visual tree!

The logic tree is static and will not be disturbed by programmers (such as dynamically adding/deleting elements), but the visual tree will change as long as users switch to different windows themes.

Code List 3-2 traverse and print the logical and visual trees

Recursively call each logical subnode

Sometimes, leaf nodes are not dependencyobject, such as string

Print the object and use a leading space to indicate the depth

Recursively call each visible subnode

Print the object and use a leading space to indicate the depth

When you use depth = 0 and the current window instance to call these methods, the result is a text-based tree. the nodes in the tree are exactly the same as those in Figure 3-2 and Figure 3-3. Although the logic tree can be traversed in the window constructor, the visible tree does not have nodes until the window layout is completed at least once. Otherwise, it is null. This is why printvisualtree is called in oncontentrendered, because oncontentrendered is called only after the layout is complete.

In some cases, you can operate on the two trees using the element's own instance method. For example, the visual class contains three protected members (visualparent, visualchildrencount, and getvisualchild) to verify its visual parent and child nodes. Frameworkelement is a general control base class (such as button and label are derived from frameworkelement). It has a common parent attribute used to present a logical parent node. Some frameworkelement child classes provide their logical child elements in different ways. For example, some classes provide children sets, and other classes (such as button and label) provide the content attribute, which indicates that the element can only have one logical subnode.

The visual tree displayed in Figure 3-3 is generally simplified to an element tree because it contains both elements in the logical tree and some elements in the visual tree. The term "visual Tree" is used to describe any subtree containing visual elements (these elements are not logical elements. For example, most people would say that the default visual tree of the window element is composed of a border, an adornerdecorator, two adornerlayers, and a contentpresenter. In Figure 3-3, the top stackpanel does not act as the visual sub-element of contentpresenter. However, the fact is that visualtreehelper uses stackpanel as a visual sub-element.

Secrets from WPF