Thursday, August 9, 2012

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

Eric Reid
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.)

Tuesday, August 7, 2012

Visual Studio Tips and Tricks, Part II: Format Spacing

Eric ReidThis is part 2 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.

Visual Studio products will typically help with formatting the spacing of your code (including C#, HTML, CSS, etc.) by adding its form of standard spacing as you add line breaks or spaces within certain common structures – nesting indents for nested code blocks or tags, or adding spaces after some characters. However, it's easy (with copy-and-paste or tinkering) to get these out of whack.

To apply Visual Studio's standard spacing to your code you can use the Format Document or Format Selection features to update either the entire document or just your selected code.

The HTML code above is clearly using non-standard spacing.

Format Selection

To quickly format the spacing for the selected code:
  1. Select the code to format.
  2. Format the selection's spacing by either using the menus or shortcut keys:
    • Menu system Edit menu, Advanced submenu, Format Selection
    • OR Shortcut keys CTRL+K, then release and CTRL+F
Using Visual Studio's Format Selection feature.

The HTML code after the Format Selection feature has been applied. (Note that only the selected code, and those lines immediately before and after, have been updated.)

Format Document

To quickly format the spacing for the whole document, by using either the menus or shortcut keys:
  • Menu system Edit menu, Advanced submenu, Format Document
  • OR Shortcut keys CTRL+K, then release and CTRL+D

The HTML code after the Format Document feature has been applied. (Note all lines have been updated.)

Saturday, August 4, 2012

Visual Studio Tips and Tricks, Part I: Surround With

Visual Studio software products are a common and fundamental tool for most ASP.NET developers (and can also be used by developers and web designers for many environments). The following 3-part series illustrates a few quick tips and tricks that may help you with your work using these applications. These features are available in various versions of the Visual Studio family, including Visual Web Developer and Visual C# Express.




In this series, we'll look at the following quick-use features to speed up your code work:
  • Surround With
  • Format Document/Selection
  • Collapsible sections (and the #region)

Surround With

A common coding conundrum is the need to "wrap" some tag or code block around another section of code. The manual approach to this would be to type the opening tag or code block before the section to be surrounded; then scroll down to the end of that section and type the closing tag or code block afterwards.

A shortcut for these steps is to use the Surround With feature of Visual Studio:
  1. Select the code to surround with some other common tag or code block (such as an HTML div or a C# if block).
  2. Right-click on the selection and choose "Surround With…"
    • Alternative methods:
      • Menu system Edit menu, IntelliSense submenu, Surround With…
      • Shortcut keys CTRL+K, then release and CTRL+S
  3. Below the selected code, a pop-up menu will either display folders for different types of snippets (double-click the folder to enter), or it will display allowable snippets for that context.
  4. Double-click the desired tag or code block to surround the selected area.

Code before Surround With
In this example, the C# code should only be run if the number2 variable does not equal zero. It's a prime candidate to Surround With a C# if statement.


Applying Surround With to code, step 1
The C# code after it's been selected and right-clicked for the Surround With feature.


Applying Surround With to code, step 2
After selecting Surround With, the pop-up menu offers various snippets for surrounding the code.


Code after applying Surround With for an IF statement
The C# code after using Surround With to wrap the if statement around the code, and updating the statement's condition to only run when the number2 variable doesn't equal 0.

In the case of adding a standard if block for C#, be sure to choose the 2nd if listed (not the first one preceded by the # sign).