Wpf 简明教程

WPF - Elements Tree

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

  1. Logical Tree Structure

  2. Visual Tree Structure

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

Logical Tree Structure

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

  1. Dependency properties

  2. Static and dynamic resources

  3. 按其名称等绑定元素。

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

<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 包含两个子元素，按钮和列表框。列表框还有三个子列表框项。

Visual Tree Structure

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

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

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

  1. Rendering the visual objects.

  2. Rendering the layouts.

  3. 路由事件主要沿着视觉树而非逻辑树传播。

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

visual tree structure

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

logical tree

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

  1. 逻辑树去掉了许多细节，让你能够专注于用户界面的核心结构，而忽略它如何被呈现的确切细节。

  2. 逻辑树是你用于创建用户界面的基本结构。

  3. 如果你关注呈现，那么视觉树将会很有用。例如，如果你希望自定义任何 UI 元素的外观，那么你需要使用视觉树。