Wpf 简明教程

WPF - Elements Tree

许多技术的元素和组件都按树形结构组织起来，这样程序员便可以轻松地处理对象和更改应用程序的行为。Windows Presentation Foundation (WPF) 使用对象形式的综合树形结构。在 WPF 中，对完整对象树的理解有两种方式——

There are many technologies where the elements and components are ordered in a tree structure so that the programmers can easily handle the object and change the behavior of an application. Windows Presentation Foundation (WPF) has a comprehensive tree structure in the form of objects. In WPF, there are two ways that a complete object tree is conceptualized −

  1. Logical Tree Structure

  2. Visual Tree Structure

借助这些树形结构，你可以轻松地创建和识别 UI 元素之间的关系。在大多数情况下，WPF 开发人员和设计师要么使用过程语言来创建应用程序，要么在 XAML 中设计应用程序的 UI 部分，并牢记对象树形结构。

With the help of these tree structures, you can easily create and identify the relationship between UI elements. Mostly, WPF developers and designers either use procedural language to create an application or design the UI part of the application in XAML keeping in mind the object tree structure.

Logical Tree Structure

在 WPF 应用程序中，XAML 中的 UI 元素结构表示逻辑树形结构。在 XAML 中，UI 的基本元素由开发人员声明。WPF 中的逻辑树定义了以下内容——

In WPF applications, the structure of the UI elements in XAML represents the logical tree structure. In XAML, the basic elements of UI are declared by the developer. The logical tree in WPF defines the following −

  1. Dependency properties

  2. Static and dynamic resources

  3. Binding the elements on its name etc.

让我们来看一下这个示例，其中创建了一个按钮和一个列表框。

Let’s have a look at the following example in which a button and a list box are created.

<Window x:Class = "WPFElementsTree.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604">

   <StackPanel>
      <Button x:Name = "button" Height = "30" Width = "70" Content = "OK" Margin = "20" />

      <ListBox x:Name = "listBox" Height = "100" Width = "100" Margin = "20">
         <ListBoxItem Content = "Item 1" />
         <ListBoxItem Content = "Item 2" />
         <ListBoxItem Content = "Item 3" />
      </ListBox>

   </StackPanel>

</Window>

如果你看 XAML 代码，你会看到一个树形结构，即根结点是窗口，在根结点内部只有一个子项，即 StackPanel。但是，StackPanel 包含两个子元素，按钮和列表框。列表框还有三个子列表框项。

If you look at the XAML code, you will observe a tree structure, i.e. the root node is the Window and inside the root node, there is only one child, that is StackPanel. But StackPanel contains two child elements, button and list box. List box has three more child list box items.

Visual Tree Structure

在 WPF 中，视觉树的概念描述了视觉对象的结构，如 Visual Base Class 所表示的。它包含渲染到输出屏幕上的所有 UI 元素。

In WPF, the concept of the visual tree describes the structure of visual objects, as represented by the Visual Base Class. It signifies all the UI elements which are rendered to the output screen.

当程序员要为特定控件创建一个模板时，他实际上是在渲染该控件的视觉树。对于出于性能和优化原因要绘制较低级别控件的人来说，视觉树也非常有用。

When a programmer wants to create a template for a particular control, he is actually rendering the visual tree of that control. The visual tree is also very useful for those who want to draw lower level controls for performance and optimization reasons.

在 WPF 应用程序中，视觉树用于——

In WPF applications, visual tree is used for −

  1. Rendering the visual objects.

  2. Rendering the layouts.

  3. The routed events mostly travel along the visual tree, not the logical tree.

为了查看包含一个按钮和一个列表框的上述简单应用程序的视觉树，让我们编译并执行 XAML 代码，你将会看到以下窗口。

To see the visual tree of the above simple application which contains a button and a list box, let’s compile and execute the XAML code and you will see the following window.

visual tree structure

当应用程序正在运行时，你可以在 Live Visual Tree 窗口中看到正在运行的应用程序的视觉树，它显示了此应用程序的完整层次结构，如下所示。

When the application is running, you can see the visual tree of the running application in Live Visual Tree window which shows the complete hierarchy of this application, as shown below.

logical tree

视觉树通常是逻辑树的超集。你可以在此看到所有逻辑元素也都存在于视觉树中。因此，这两棵树实际上只是组成 UI 的同一组对象的两种不同视图。

The visual tree is typically a superset of the logical tree. You can see here that all the logical elements are also present in the visual tree. So these two trees are really just two different views of the same set of objects that make up the UI.

  1. The logical tree leaves out a lot of detail enabling you to focus on the core structure of the user interface and to ignore the details of exactly how it has been presented.

  2. The logical tree is what you use to create the basic structure of the user interface.

  3. The visual tree will be of interest if you’re focusing on the presentation. For example, if you wish to customize the appearance of any UI element, you will need to use the visual tree.