4.8 Document Outline工具窗口

使用可视化设计器或代码视图编辑HTML文件从来都不是很容易的工作，尤其是在有大量的嵌套元素时，就更难了。Visual Studio .NET最先提供了一个功能，即文档大纲（Document Outline），至少部分解决了这个问题。实际上，这个功能在处理HTML文件方面非常成功，因此用于处理非Web窗体和控件。本节介绍Document Outline窗口，解释它在处理HTML文档、窗体和控件方面的高效表现。

4.8.1 HTML大纲

Document Outline窗口的主要目的是展示HTML页面的一个可浏览视图，以便用户轻松地查看不同的HTML元素和元素所在的容器。因为正确获取HTML布局是非常困难的，特别是当页面包含大量.NET组件时（ASP.NET页面可包含此类组件），Document Outline视图提供了一个便捷的方法，可以给某个特定的组件查找合适的位置。

图4-28展示了一个典型的HTML页面。在没有Document Outline窗口的情况下，在设计器中选择一个元素时，如果该元素很小，或者在设计器中不可见，这就是比较困难的操作。而图4-28左边的Document Outline窗格（View | Other Windows | Document Outline）可以轻松地在层次结构中选择元素，确定元素位于页面的什么地方，并允许设置它们的属性。

Visual Studio分析当前活动文件的内容，并用一个包含页面层次结构中每个元素的树视图填充它。每个命名元素的Name或ID值显示在树视图中，而未命名元素仅列出其HTML标记。

选择Document Outline窗口的每个输入字段时，将更新Design视图，以选择组件及其子组件。在图4-28的Document Outline窗口中，选择了http://asp.net页面的超链接标记，于是该控件在Design视图中突出显示，从而允许用户查看它位于页面的什么地方。同样，在Design视图中选择控件或元素， Document Outline窗口也会选择页面层次结构中的对应标记（但需要把焦点设置回Document Outline窗口，才能更新该窗口）。

4.8.2 控制大纲

HTML页面在本质上是可视和不可视元素的分层集合——其结构由内到外依次是控件、容器、窗体、文档。大多数情况下，开发人员可以很清楚地区分这种层次结构。然而在一些情况下，了解层次结构的详情并不是那么容易。

例如，考虑如图4-29所示的一种典型的复杂窗体，该窗体使用了大量的面板来提供UI结构，并使用控件提供可视化元素。如何通过查看其是否实现为HTML表或一组停靠面板来轻松地区分该窗体？如果要驻留这些面板，或将控件从一个容器移到另一个容器，那么应该如何做？我们确实可以完成这些工作，却并不轻松。在查看菜单时，是否可以区分哪些选项位于Tool菜单下？

为应对此类情况，Document Outline工具窗口应运而生。通过组件名称和组件类型表示Document Outline中的每个组件。现在可以在不同的容器之间拖动元素。由于在Document Outline中选择了各个项，因此对应的可视化元素被选中并在Design视图中显示。

这就意味着，当某项出现在菜单中时（如图4-29中的例子所示），Visual Studio将会自动打开菜单，并选择要编辑的菜单项。这种方式在定位窗体布局方面毫无疑问是有用的，它还常提供定位各个项的快捷方式。

Document Outline窗口在Control Outline（控制大纲）模式下使用时有更多的功能，而不是一个简单的导航工具。右击一个输入字段会打开一个上下文操作菜单，其中的菜单项可以对所选的项执行操作。最明显的是访问Properties窗口。

在窗体中添加组件后，一项繁杂的工作是对组件重命名。可以依次选择每个组件，并在Properties窗口中设置Name属性，但是使用Document Outline窗口，可在上下文菜单中选择Rename选项， Visual Studio就会自动在设计代码中重命名组件，并更新Name属性，而无须滚动Properties列表。

复杂窗体设计有时可能会产生意外的结果。当某个组件放在不正确或不合适的容器控件中时，就会经常发生这种情形。这种情况下，需要将组件移至正确容器。当然，必须在出问题之前发现问题。

Document Outline窗口在下面两个活动中有帮助意义。首先，使用层次视图可以轻松地定位每个组件，并检查它的父容器元素。图4-29展示的例子表示，treeView1控件位于panel1中。通过这种方式，很容易确定某个控件何时在窗体的设计布局中处于错误的位置。

当需要移动某个组件时，使布局正确是比较困难的。在Document Outline窗口中这种操作非常简单，只需要将控件拖放到层次结构中的合适位置即可。例如，将treeView1控件拖放到panel2上， treeView1控件就与richTextBox1控件共享panel2区域。

使用右键上下文菜单，可以剪切、复制和粘贴单个元素或整个容器组及其内容。复制和粘贴功能在这里特别有用，因为可以使用这个功能把整个窗体设计复制到当前窗体的其他位置，而不需要不断摸索以在Design视图中选择正确的元素，也不需要在Designer.vb隐藏代码文件中复制它们。