Visual Studio Tips and Tricks, Part III: Outlining with Collapsible Sections and #region

This is part 3 of a 3-part series on Visual Studio Tips and Tricks. These features are available in various versions of the Visual Studio family, including Visual Web Developer and Visual C# Express.

Collapsible Sections

If you aren't taking advantage of various outlining features available in Visual Studio, you are missing out.  In C# and HTML/ASP code, some blocks of code are automatically marked as collapsible by a + symbol in the far left margin of the code block's opening line. (It's just to the right of the line number if you have those enabled).

The C# code block with a plus sign at line 66, indicating a collapsible region for the method block.

If you click on the + symbol, it will collapse the code block to display a much-abbreviated version of the block on one line. The abbreviated code block will be shown with ellipses (…) to denote the change in display. And if you're using line numbers, you'll see there is a jump from the starting line down to the next line number where the code block leaves off. Also, the + symbol changes to a - symbol. Clicking the - symbol will expand the code block back to its original size.

The C# code after collapsing the section. Note the line jump from 66 to 79, and the … abbreviation.

The benefit is being able to see the bigger picture with your code after that block is collapsed within the greater structure.

Note that collapsing code blocks in this way does absolutely nothing to affect the functionality of the code – it will still run as written. Instead, its job is to help you view the code you want at a glance. This can also help to see where a large code block ends or to help verify your opening and closing syntax.

#region Directive

In addition to the built-in collapsible sections you'll find in your code in Visual Studio, you can also manually add your own in C# (and even give them a "comment-style name") using the #region directive.

The C# code before adding a collapsible #region directive.

To add your own collapsible sections in C#:

1. Place your cursor in the line above the section of code you want to make collapsible.
2. Type #region
   • Optionally, type additional text to act as a comment-style name on the same line. (This additional text will not be compiled, but will be displayed when you collapse the region).
3. Place your cursor at the end of the section you are making collapsible.
4. Type #endregion

The C# code after adding a collapsible #region directive. This one also includes an optional comment-style name of "Variables Declaration" on the same line as the opening #region.

You can now collapse the #region directive area like any other collapsible section:

• Click the + symbol in the left margin to collapse the region.
• OR click the - symbol in the left margin to expand it again to its full size.

The C# code after collapsing the #region directive. (Note that because we added a comment-style name after the region, that is what is displayed after the collapse.)