4.8. Control Outline

The Document Outline window has been available in Visual Studio since the first .NET version for HTML files but has been of little use for other file views. When Visual Studio 2003 was released, an add-in called the Control view was developed that allowed a similar kind of access to Windows forms.

The tool was so popular that Microsoft incorporated its functionality into the Document Outline tool window, so now you can browse Windows forms in the same way.

Figure 4-17 shows a typical complex form, with many panels to provide structure and controls to provide the visual elements. Each component is represented in the Document Outline by its name and component type. As each item is selected in the Document Outline window, the corresponding visual element is selected and displayed in the Design view.

This means that when the item is in a menu (as is the case in Figure 4-17) Visual Studio will automatically open the menu and select the menu item ready for editing. As you can imagine, this is an incredibly useful way of navigating your form layouts, and it can often provide a shortcut for locating wayward items.

Figure 4.17. Figure 4-17

The Document Outline window has more functionality when used in Control Outline mode than just a simple navigation tool. Right-clicking an entry gives you a small context menu of actions that can be performed against the selected item. The most obvious is to access the Properties window.

One tedious chore is renaming components after you've added them to the form. You can select each one in turn and set its Name property in the Properties window, but using the Document Outline window you can simply choose the Rename option in the context menu and Visual Studio will automatically rename the component in the design code, thus updating the Name property for you without your needing to scroll through the Properties list.

Complex form design can sometimes produce unexpected results. This often happens when a component is placed in an incorrect or inappropriate container control. In such a case you'll need to move the component to the correct container. Of course, you have to locate the issue before you even know that there is a problem.

The Document Outline window can help with both of these activities. First, using the hierarchical view, you can easily locate each component and check its parent container elements. The example shown in Figure 4-17 indicates that the TreeView control is in Panel1, which in turn is in SplitContainer, which is itself contained in a ContentPanel object. In this way you can easily determine when a control is incorrectly placed on the form's design layout.

When you need to move a component it can be quite tricky to get the layout right. In the Document Outline window it's easy. Simply drag and drop the control to the correct position in the hierarchy. For example, dragging the TreeView control to Panel2 results in it's sharing the Panel2 area with the ListView control.

You also have the option to cut, copy, and paste individual elements or whole sets of containers and their contents by using the right-click context menu. The copy-and-paste function is particularly useful, as you can duplicate whole chunks of your form design in other locations on the form without having to use trial and error to select the correct elements in the Design view, or resort to duplicating them in the code-behind in the Designer.vb file.

When you cut an item, remember to paste it immediately into the destination location.