Menus and Toolbars

How many Windows applications can you think of that do not contain a menu or toolbar of some kind? The chances are that the number is very close to none. Menus and toolbars are, therefore, likely to be important parts of any application you will write for the Windows operating system.

To assist you in creating them for your applications, Visual Studio 2005 provides two controls that let you create, with very little difficulty, menus and toolbars that look like the menus you find in Visual Studio and Office.

Two Is One

The two controls you are going to look at over the following pages are new to Visual Studio 2005 and they represent a handsome boost of power to the casual developer and professional alike. Building applications with professional-looking toolbars and menus used to be reserved for those who would take the time to write custom paint handlers and those who bought third-party components. Creating what previously could take weeks is now a simple task that quite literally can be done in seconds.

Visual Studio 2005 introduces a family of controls that has the suffix Strip. They are the ToolStrip, MenuStrip, and StatusStrip. You return to the StatusStrip later in the chapter. If you want to look at it in its purest form, the ToolStrip and the MenuStrip are in fact the same control as MenuStrip derives directly from the ToolStrip. This means that anything the ToolStrip can do, the MenuStrip can do. Obviously, it also means that the two work really well together.

Before you examine the controls any more closely, I want to mention another control that you may find in your Toolbox in Visual Studio 2005: the MainMenu control. This is the control that was used to create menus in Visual Studio prior to 2005. The control is retained in this edition of Visual Studio for backward compatibility and for the rare occasion when you want to use a control that uses the Windows API menus. For most applications, you will be using the new controls and will focus on them, but to give you an idea of how the controls have improved, the File menu, using the MainMenu control, is shown in Figure 15-1 and the MenuStrip control is shown in Figure 15-2.

Figure 15-1

Figure 15-2

Using the MenuStrip Control

In addition to the MenuStrip control, there are a number of additional controls that are used to populate a menu. The three most common of these are the ToolStripMenuItem, ToolStripDropDown, and the ToolStripSeparator. All of these controls represent a particular way to view an item in a menu or toolbar. the ToolStripMenuItem represents a single entry in a menu, the ToolStripDropDown represents an item that when clicked displays a list of other items, and the ToolStripSeparator represents a horizontal or vertical dividing line in a menu or toolbar.

Note

There is another kind of menu that is discussed briefly after the discussion of the MenuStrip — the ContextMenuStrip. A context menu appears when a user right-clicks on an item, and will typically display information relevant to that item.

Without further ado, in the following Try It Out, you create the first example of the chapter.

Try It Out – Professional Menus in Five Seconds

This first example is very much a teaser, and you are simply going to introduce an aspect of the new controls that is truly wonderful if you want to create standard menus with the right look and feel.

1. Create a new Windows application and name it Professional Menus in the directory C:\BegVCSharp\Chapter15.

2. Draw an instance of the MenuStrip control from the Toolbox onto the design surface.

3. Click the triangle to the far right of the MenuStrip at the top of the dialog to display the Actions window.

4. Click the Insert Standard Items link.

That's it. If you drop down the File menu, you will see menu that was shown in Figure 15-2. There is no functionality behind the menu yet — you will have to fill that in. You can edit the menu as you see fit, and in order to do so, please read on.

Create Menus Manually

When you drag the MenuStrip control from the Toolbox to the design surface, you will see that this control places itself both on the form itself and in the control tray, but it can be edited directly on the form. To create new menu items, you simply place the pointer in the box marked Type Here in Figure 15-3.

Figure 15-3

When you enter the caption of the menu in the highlighted box, you may include an ampersand (&) in front of a letter that you want to function as the shortcut key character for the menu item — this is the character that appears underlined in the menu item and that can be selected pressing Alt and the key together.

Note that it is quite possible to create several menu items in the same menu with the same shortcut key character. The rule is that a character can be used for this purpose only once for each pop-up menu (for example, once in the Files pop-up menu, once in the View menu and so on). If you accidentally assign the same shortcut key character to multiple menu items in the same pop-up menu, you'll find that only the one closest to the top of the control will respond to the character.

When you select the item you will notice that the control automatically displays items under the current item and to the right of it. When you enter a caption into either of these controls, you create a new item in relation to the one you started out with. This is how you create drop-down menus.

To create the horizontal lines that divide menus into groups you must use the ToolStripSeparator control instead of the ToolStripMenuItem, but you don't actually insert a different control. Instead, you simply type a "-" (dash) as the only character as the caption of the item and Visual Studio will then automatically assume that the item is a separator and change the type of the control.

Finally, if you click the image icon to the far left of the item, you are presented with a dialog that allows you to select and import images to associate with the menus.

It is now time for you to try to create a menu without using Visual Studio to generate the items on it, in the following Try It Out.

Try It Out – Creating Menus from Scratch

In this example, you are going to create the File and Help menus from scratch, leaving the Edit and Tools menus for you to do by yourself.

1. Create a new Windows Application project, name it Manual Menus and save it to the C:\ BegVCSharp\Chapter15 folder.

2. Drag a MenuStrip control from the Toolbox onto the design surface.

3. Click in the text area of the MenuStrip control where it says Type Here and type &File and press the Enter key.

4. Type the following into the text areas below the File item:

   • &New

   • &Open

   • -

   • &Save

   • Save &As

   • -

   • &Print

   • Print Preview

   • -

   • E&xit

   Your menu should look like that in Figure 15-4 now. Notice how the dashes are automatically changed by Visual Studio to a line that separates the elements.

   
   Figure 15-4

5. Click in the text area to the right of Files and type &Help.

6. Type the following into the text areas below the Help item:

   • Contents

   • Index

   • Search

   • -

   • About

7. Your menu now looks like that in Figure 15-5.

   
   Figure 15-5

8. Now, return to the File menu and set the shortcut keys for the items. To do this, select the item you want to set, and find the ShortcutKeys property in the properties panel. When you click the drop-down arrow, you are presented with a small window where you can set the key combination you want to associate with the menu item. Because this menu is a standard menu, you should use the standard key combinations, but if you are creating something else, please feel free to select any other key combination. Set the ShortcutKeys properties in the File menu as shown in the following table.

   Item Name	Properties and Values
   &New	Ctrl + N
   &Open	Ctrl + O
   &Save	Ctrl + S
   &Print	Ctrl + P

9. Now for the finishing touch: the images. Select the New item in the File menu and click on the ellipse (...) to the left of the Image property in the properties panel to bring up the Select Resource dialog.

   Arguably the most difficult thing about creating these menus is obtaining the images you want to display. In this case, you can get the images by downloading the source code for this book at www.wrox.com, but normally you are going to have to draw them yourself or get them in some other way.

10. Because there are currently no resources in the project, the Entry list box is empty, so click Import. The images for this example can be found in the source code for this book under Chapter15\Manual Menus\Manual Menus\Images. Select all of the files there, and click Open. Remember that you are currently editing the New item, so select the New image in the Entry list and click OK.

11. Repeat step 10 for the images for the Open, Save, Save As, Print, and Print Preview buttons.

12. Run the project. Note that you can select the File menu by clicking it or by selecting Alt+F and the Help menu by hitting Alt+H.

Additional Properties of the ToolStripMenuItem

There are a few additional properties of the ToolStripMenuItem that you should be aware of when you are creating your menus. The list in the table that follows is in no way exhaustive — if you require a complete listing, please refer to .NET Framework SDK documentation.

Name	Description
Checked	This indicates whether the menu is checked.
CheckOnClick	When this property is true a check mark is placed in or removed from the position to the left of the text in the item that is otherwise occupied by an image. Use the Checked property to determine the state of the menu item.
Enabled	An item with Enabled set to false will be grayed and cannot be selected.
DropDownItems	This property returns a collection of items that is used as a drop-down menu in relation to the menu item.

Adding Functionality to Menus

Now, you are able to produce menus that look every bit as good as the ones you find in Visual Studio and Word, so the only thing left is to make something happen when you click on them. Obviously, what happens is pretty much up to you, and in the following Try It Out, you just create a very simple example that builds on the example you've just been through.

To respond to selections made by the user you should implement handlers for one of two events that the ToolStripMenuItems sends.

Event Name	Description
Click	This event is sent whenever the user clicks on an item. In most cases this is the event you want to respond to.
CheckedChanged	This event is sent when an item with the CheckOnClick property is clicked.

You are going to extend the Manual Menus example from the previous Try It Out by adding a text box to the dialog and implementing a few event handlers. You are also going to add another menu between Files and Help called Format.

Try It Out – Handling Menu Events

1. Drag a RichTextBox onto the design surface and change its name to richTextBoxText. Set its Dock property to Fill.

2. Select the MenuStrip and then enter Format into the text area next to the Help menu item and press the Enter key.

3. Select the Format menu item and drag it to a position between Files and Help.

4. Add a menu item to the Format menu with the text Show Help Menu.

5. Set the CheckOnClick property of the Show Help Menu to true. Also set its Checked property to true.

6. Change the name of these five menu items:

   Menu Item	Name
   New	MenuItemNew
   Open	MenuItemOpen
   Save	MenuItemSave
   Show Help Menu	MenuItemShowHelpMenu
   Help	MenuItemHelp

7. Select MenuItemShowHelpMenu and add an event handler for the CheckedChanged event by double-clicking the event in the Events part of the properties panel.

8. The event handler for this event should set the Visible property of the MenuItemHelp to true if the Checked property is true, otherwise it should be false. Add this code to the event handler:

   private void MenuItemShowHelpMenu_Click(object sender, EventArgs e) { ToolStripMenuItem item = (ToolStripMenuItem)sender; MenuItemHelp.Visible = item.Checked; }

9. Double-click MenuItemNew, MenuItemSave and MenuItemOpen. Double-clicking a ToolStripMenuItem in Design View causes the Click event to be added to the code. The three event handlers clear the text in the rich text box, save the text in the rich text box to a predetermined file, and open said file, respectively. Enter this code:

   private void MenuItemNew_Click(object sender, EventArgs e) { richTextBoxText.Text = ""; }     private void MenuItemOpen_Click(object sender, EventArgs e) { try { richTextBoxText.LoadFile(@".\Example.rtf"); } catch { // Ignore errors } }     private void MenuItemSave_Click(object sender, EventArgs e) { try { richTextBoxText.SaveFile(@".\Example.rtf"); } catch { // Ignore errors } }

10. Run the application. When you click the Show Help Menu, the Help menu disappears or appears, depending on the state of the Checked property, and you should be able to open, save, and clear the text in the text box.