Customizing the VS studio IDE

      In today post we will Customizing the V studio IDE Although the standard setup of Visual Studio and its tool windows is pretty useful, there’s a fair chance you want to customize the IDE to your liking. You may want to move some of the windows to a location where they are easier to reach, or you may want to open additional windows you frequently use. Visual Studio is fully customizable and enables you to tweak every little detail of the IDE. In the next section, you learn how to perform the most common customization tasks. Rearranging Windows To give each window the location it deserves, you can drag and drop them in the main IDE. Simply grab a window’s title bar or its bottom tab and drag it in the direction of the new location. Once you start dragging, you see that Visual Studio gives you visual cues as to where the window will end up (see Figure 1-14). If you drag the window over one of the four square indicators at the sides of the middle indicator, the window will be docked next to the existing window. Once you drop it, the window pops to its new location. If you drop the window on the square in the middle of the large indicator, the window docks with that window, sharing the same screen space. Each window has its own tab, as you can see with the windows at the bottom of Figure 1-14. In addition to docking windows with others in the IDE, you can also have floating windows. To change a docked window into a floating one, drag it away from its current location and drop it somewhere in the IDE without hitting one of the visual cues on the screen. You can also choose Window ➪ Float from the main menu or right-click the

window’s title bar and choose Float.

To restore a floating panel to its previous docked location, right-click its title bar and choose Dock or choose Window ➪ Dock from the main menu. Make sure you don’t choose Dock as Tabbed Document for the tool windows, like the Toolbox or the Solution Explorer, or they’ll end up in the main Document Window. This makes it difficult to use these tool windows together with an open file because the two windows will share the same space. Modifying the Toolbox You can modify the Toolbox as well.

By default, the items are sorted alphabetically, but you can reorder them using drag and drop. To do this, open the Toolbox (press Ctrl+Alt+X) and drag an item (such as the TextBox under the Standard category) to a different location. You can also delete items from the Toolbox by right-clicking them and choosing Delete from the context menu. Don’t worry about items getting lost forever; you can reset the Toolbox again by choosing Reset Toolbox from the same menu. You can also add your own items to the Toolbox. The most common use for this is code snippets. Simply highlight some text or code in the Document Window and drag it to the Toolbox. You can then right-click the item and choose Rename Item to give it a more meaningful name that you can easily recognize. To avoid cluttering up the Toolbox with your own code snippets, consider creating a separate category for them. You can do this by choosing Add Tab from the Toolbox’s right-click menu. Enter a name and press Enter, and your Toolbox tab is ready for use. In the next Try It Out exercise, you get the chance to play around with the Visual Studio IDE so you can customize it to your liking.

Customizing the IDE

In this exercise you practice opening and rearranging the windows in the VS IDE. Don’t be afraid to mess things up. A little later in this chapter, instructions are given on how to reset the IDE to the way it was when you opened it the first time.

1. If you closed your website since the previous Try It Out, open it again, or create a new one using the File menu.

2. From the View menu, choose Error List to open the Error List window. If you don’t see the Error List item directly, choose Tools ➪ Settings ➪ Expert Settings first. Notice how the Error List gets docked below the Document Window by default.

3. From the same View menu, choose Task List. By default, it is docked in the same space as the Error List, with the tabs for both windows next to each other.

4. Click the tab of the Task List and, while holding down your mouse button, drag the Task List away from its location in the direction of the Document Window. Once you release the window, it appears as a floating window in the IDE. To restore the window, drag it back on the center square of the Error List. To change the order in which tabs appear in a tab group, drag a tab over the


other tabs and release it at the desired location
5. If you want, you can repeat the previous steps for other windows that are visible in the IDE by default or for the ones you find under the View menu. Spend some time familiarizing yourself with all the different windows and how you can arrange them on-screen. Because you’ll be working a lot with these windows in the remainder of this book, it’s good to be familiar with their locations.

6. Next, open the ControlsDemo.aspx page (or add a new ASPX first if you created a new website) from the Solution Explorer by double-clicking it. When the page opens, the Toolbox becomes visible automatically. If it doesn’t, press Ctrl+Alt+X to open it.

7. Right-click the Toolbox and choose Add Tab. Type HTML Fragments as its new name and press Enter. This adds a new category to the Toolbox that behaves just like all the others.

8. With the Document Window showing your ASPX page in Markup View, type <h1> directly after the opening <div> tag. Note that Visual Studio automatically inserts the closing </h1> for you. You should end up with code in Markup View looking like this:

<form id="form1" runat="server">

<div>

<h1></h1>

</div>

9. Highlight the opening and closing <h1> tags, and then drag the selection from the Markup View window onto the new Toolbox tab you created in step 7. The selection shows up as Text: <h1></h1>.

10. Right-click the Toolbox item you just created, choose Rename Item, and type Heading 1 as the name.

11. Put your cursor in the Document Window again and press Ctrl+K directly followed by Ctrl+D to format the document in the Document Window. Alternatively, choose Edit ➪ Format Document from the main menu. This formats the document according to the rules you have set in the Text Editor Options dialog box. Formatting is also available for a number of other document types, including C# and VB.NET code, and CSS and XML files. From now on, whenever you need a heading in your document in Markup View, simply place the cursor in the Document Window where you want the heading to appear and double-click the appropriate heading in the Toolbox.

Note This exercise serves as an example of adding code to the Toolbox. For
an <h1> element, you might prefer to type the code directly in the code editor.
Alternatively, you could use a code snippet. Enter h1 in the editor and then
press Tab. Visual Studio expands the code for the heading to <h1></h1> and
positions your cursor between the two tags so you can start typing the heading
right away How It Works
Most of the steps in this Try It Out are self-explanatory. You started off by opening a few windows that you frequently need when building websites. You then used the drag-and-drop features of the IDE to rearrange the window layout according to your personal preferences. You then added an HTML fragment to a custom tab in the Toolbox. When you drag any markup to the Toolbox, Visual Studio creates a Toolbox item for it that contains the selected markup.

Whenever you need a copy of that markup in your page, simply double-click the item or drag it from the Toolbox into Markup View. This is a great time saver for HTML fragments that you frequently use. You typically use this technique for larger blocks of code; for elements like the <h1>, Visual Studio has a better tool called Code Snippets, which you’ll learn more about later in this book. At the end you used Visual Studio’s document formatting option to change the layout of the code in the document. This helps to keep the code organized and easier to read. You can fully change how the code is formatted by using the Options dialog box accessible through Tools ➪ Options. Then expand the path Text Editor ➪ HTML (Web Forms) ➪ Formatting, and click Tag Specific Options.


=================================================


Besides the window layout and the Toolbox, Visual Studio enables you to customize a lot more in the IDE. The following section explains how to customize three other important IDE features: the Document Window, toolbars, and keyboard shortcuts.

NEXT:Customizing the Document Window