Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Navigating through a complex tree of controls in a real world application can be a frustrating ordeal. If you have a design that has hundreds of nested controls, it can be a lot of work just to find the control and select it in the designer. To aid in this kind of navigation, Visual Studio includes a Document Outline window. I am inside a project inside Solution Explorer called UsingDocOutline. It contains three projects: an ASP.NET application, a Windows Form application, and a WPF application.
In order to navigate through this HTML page over here in the ASP.NET application, I need to have my Document Outline window opened. It may not be showing up on your machine. In order to make it visible, you need to choose View > Other Windows. Then on this sub-menu, choose Document Outline. This window usually lives on the left edge of the screen. As you can see in my computer, it's over here, and it's docked at the bottom half of the screen.
I have selected the body tag inside my HTML document, and you can see that it's selected over here in the Document Outline. Naturally, I can navigate to the HTML element by clicking on it here inside the Document Outline. And notice that it selects the entire set of sub-elements by doing that. As you might guess, clicking on title will only select that one child element. There is also a nice little Navigation bar down here in the bottom in HTML documents where I can see HTML node as well.
That's not part of the Document Outline, but it's another handy navigation tool. Next, I'm going to switch over to the Windows Forms application and open this Form1.cs. I probably need to make my window a little bit wider over here to see what's going on. In this UI, I've got the Tab Control that contains some group boxes and within the group boxes are some radio buttons and checkboxes. So of course, I can select this radio button in the group box and see what happens in the Document Outline? It shows up as selected over here.
I can then click on this check box here, and it will automatically select it in the second group box. This is what I mean by when you have a complex nested UI. Sometimes you can't even get your mouse to the point where you can click on something in the designer. But with this Document Outline, I can select it and then see it. I can also move items from one element to another. For instance, I can take this check box and drag it and drop it inside this group box. Now, it has become a child of that group box.
In WPF, I can do the same thing. Here, I'm in the WPF application. I am going to open the MainWindow.xaml file. Again, this is a complex UI here. WPF has added one extra twist. When you hover over the item in the Document Outline, you get a Preview window that pops up that's showing all the children elements of this grid and what they'll look like. It's like a miniature thumbnail. And as I drill down into my object model, let's say I click on this TreeView here or hover over it, you see that I'm seeing a subset of that UI.
Now, I'm only seeing the TreeView. I'll click here. It gets selected in my designer and selected in my XAML view. Also, if I select the items in the designer, you see that they are selected over here in the Document Outline. So as you can see, the Document Outline window is a simple concept, but it provides a handy way to navigate complex UI in many different project types.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100226 Viewers
56 Video lessons · 113206 Viewers
71 Video lessons · 82090 Viewers
131 Video lessons · 39390 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.