Document Outline Window

Provides an outline view of elements and scripts in the current document.

Using the Document Outline Window in Visual Web Developer

In Visual Web Developer, on the View menu, click Document Outline. (If you are using the General settings in Visual Studio, on the View menu, click Other Windows and then click Document Outline.) 

For Visual Web Developer, you can use the document outline to perform these tasks:

• View the logical structure of your document.

• Determine which elements are HTML elements and which ones are Web server controls.

• Navigate to specific elements, in Design view and in Source view.

The list of elements that is displayed in the Document Outline window depends on the view you are using. In Design view, the outline displays elements in the body of the document. In Source view, the outline shows the body element and the child elements of the head element, the page directive, and any script elements and code elements.

Using the Document Outline Window for Windows Forms

In Visual Studio, on the View menu, click Other Windows and then click Document Outline.

For Windows Forms applications in Visual Studio, you can use the document outline to perform these tasks:

• View the logical structure of a Form or a UserControl.

• Put user input focus on deeply nested controls that may be hard to select on the Form itself or the UserControl itself.

• Move controls from one parent to another parent.

• Locate controls that may be visually hidden by other controls.

For Windows Forms applications, a document outline is displayed only in Design view for a Form or a UserControl. Nothing is displayed in Code view.

The outline is most useful when you have to put design focus on controls that are deeply embedded in other controls, or on controls that might be difficult to select by using a mouse or the TAB key. For example, you might have a SplitContainer control in which the Dock property is set to Fill, and in which two or more SplitterPanel sections are defined. In this case, it may be difficult to select the SplitContainer itself so that you can visually resize the panels. When you select the SplitContainer in the document outline, the control also is selected on the form so that you can move the pointer over the splitter you want to resize.

Using the Document Outline Window for Silverlight and WPF

In Visual Studio, on the View menu, click Other Windows and then click Document Outline.

For Silverlight and Windows Presentation Foundation (WPF) applications, you can use the document outline to perform these tasks:

• View the logical structure of elements in your XAML.

• View a thumbnail preview of an element in a pop-up window.

• Navigate to specific elements, in Design view and in XAML view.

• Put user input focus on deeply nested elements that may be hard to select on the design surface itself.

• Locate controls that may be visually hidden by other controls.

The Document Outline window displays the hierarchy of the document in a tree-style view that has the root window or user control at the top and the child elements underneath. You can expand or collapse the child elements. The name of an element is displayed in parentheses next to the element. When you move the pointer over an element, a thumbnail preview of that element is displayed in a pop-up window.

When you select an element in the document outline, the element is also selected in Design view and in XAML view in the WPF Designer.

See Also

Tasks

How to: Navigate in the HTML Editor in Visual Web Developer

Reference

Source View

Concepts

HTML Editor Tag Navigation in Visual Web Developer