Tag Navigation
One problem with large or complex markup files, be they web forms, XAML files, or XML documents, is navigation through the multiple levels and layers of nested tags. Envision a web page containing a button within a table within a table within a table. When you are editing the HTML (through either the designer or the editor), how can you tell exactly where you are? Put another way, how can you tell where the current focus is within the markup hierarchy?
Using the Tag Navigator
The tag navigator is Visual Studio’s answer to this question. The navigator appears as a series of buttons at the bottom of the XAML, web, and XML Schema designers. A breadcrumb trail of tags is shown that leads from the tag that currently has focus all the way to the outermost tag. If this path is too long to display within the confines of the editor window, it is truncated at the parent tag side; a button enables you to display more tags toward the parent.
Figure 7.9 shows the tag navigator as implemented by the web designer. While you’re editing the OK button in the sample login page, the tag navigator shows the path all the way back to the parent enclosing <html> tag.
Each tag button displayed by the navigator can be used to directly select the inclusive or exclusive contents of that tag. A drop-down triggered by the tag button contains options for selecting the tag or selecting the tag content. The former causes the tag itself, in addition to all of its enclosed content, to be selected. The latter excludes the tag begin and end but still selects all its enclosed content.
The navigator is a great mechanism for quickly moving up and down within a large tag tree.
Using the Document Outline Window
The document outline window displays a tree-view representation of the elements on a web page, XAML window, or Windows form. This hierarchical display is a great navigation tool because it enables you to take in the entire structure of your document in one glance and immediately jump to any of the elements within the page.
To use the document outline window, choose Document Outline from the View, Other Windows menu. Figure 7.10 shows a sample outline for a window constructed with XAML.
Clicking an element navigates to that element (and selects it) within the designer window, and, of course, you can expand or collapse the tree nodes as needed.
The features and look and feel of the document outline window change by document type. For instance, the XAML document outline shows a thumbnail image of the UI element when you hover over the node in the outline window. It also toggles visibility of any line item by clicking the “eye” icon located to the right of every line in the outline. The Windows Forms outline window actually allows you to move and reparent items within the form. Using just the outline window, you could move a button from within one tab container and place it within another by dragging the corresponding node to the new parent in the outline.