Document Outline Window

Switch View :
ScriptFree
Visual Studio 2010
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.) 

Note Note

Commands and options in General settings might be different from those in Web Development settings. Web Development settings optimize the integrated development environment (IDE) to provide convenient access to commands and options for Web development activities, regardless of the programming language you use. For more information, see Working with Settings.

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.

Note Note

If you switch views, the Document Outline window might not be updated immediately because it is updated as a background task.

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.

Note Note

Elements in the hierarchy in the Document Outline window cannot be repositioned.

See Also

Tasks

Reference

Concepts

Community Content

Dyna Mike
Document Outline in code view shows would be very useful!

I spend a lot of time paging up and down to find locations in code.  Here's some ideas for the Document Outline when focus is on a code. I hope MS can consider and add in later versions as it is obvious that this will be very useful. If no tin Doc Outline then how about in Solution Explorer tree:

1. Show a (collapsible tree) of all events, subs and functions. Use ellipsing "..." if it doesn't fit it the Document Outline window.  When you hover mouse over an ellipsed item in the tree, show the full line in a tool-tip.

2. Let me enter a DEBUG key marker on any line in the code like #KEY1. It would show up in the Doc Outline under that sub for easy jumping to. In the Doc Outline let me right-click on that key marker and rename or delete it.

3. When debugging, in the Doc Outline hilight the sub (in a certain color like red) in which execution is currently halted at a breakpoint or if an execution error occurs!

4. When debugging, in the doc outline hilight the event (in a certain color like yellow?) that is currently executing?! That way I don't have to add a breakpoint in that event. Very useful to see of a MouseMove, Timer or bubbling event is firing for example...!

5. In the Options, Fonts and Color, allow user to customize what I said in 3. and 4.

I am sure others can think of more useful things to show in the Doc Outline.....................

DynaMike


DaVince
Why is nothing displayed in code view?
Why not display a quick list of all the program subroutines and functions allowing you to quickly jump to a place in your program?  I want a way to do this with a minimum of keystrokes.  Would others think this might be useful?