Creating menus

Almost all the windows applications have a menu system. The menus contain commands that perform various operations. Building a menu system in .NET 2.0 is a simple and easy task. The Visual C# IDE contains the necessary features to implement a menu system.

1. Create a new windows application project. Click on the form and then, using the following table, set the properties of the form using the properties window.

Property	Value
Text	My TextPad
MaximizeBox	False
FormBorderStyle	Fixed3D

2. Look for the MenuStrip control in the Menus & Toolbars section of the Toolbox. Drag the control and drop it on the form:

When we drop the control on the page, it is placed at the top of the form. Notice the white space labeled - `Type Here'. We can click inside this space and type the caption for the menu (File, Edit, Help etc.). We can use the `&' symbol to make a character as the shortcut key (used with the Alt key). For example, to make the character `F' as the shortcut in the `File' menu, we should type it as - &File. The menu will look like - File, with an underline below `F'. Now the user can access this menu by pressing Alt+F keys.

Similar menu options are often grouped together using a separator bar. For example, the `Save' and `Save As' options are grouped together in the `File' menu. To create a separator bar, just type the dash (-) symbol in the menu where the bar is needed. In our example, the first separator bar appears after the `Open' option in the `File' menu. To do this, in the `Type Here' blank space below the `Open' option, type a dash (-) symbol. Similar separators are used after the `Save As' and `Print Preview' options:

3. Next, we will assign shortcut keys to some frequently used menu options so that they can be accessed without opening the menus each time. We will use the following menu options and shortcut keys:

New	Ctrl + N
Open	Ctrl + O
Save	Ctrl + S
Print	Ctrl + P

To do this, select the menu option by clicking on it in the form. Open the properties window. Look for the ShortcutKeys property and click on the drop-down list in the cell next to it. Check the `Ctrl' checkbox in the Modifiers section and then scroll down the Keys drop-down list to select the required key:

4. To write code for the menu options, each menu option should have a name. This name is used to access the menu options in our code. The IDE provides a default name for each menu option. However, we can provide simple names if we want. This is done by typing the name in the (Name) property. Select the menu options by clicking on them and change their (Name) property in the properties window. We will use the following naming convention:

Menu	Name
File	mnuFile
- New	mnuFileNew
- Open	mnuFileOpen
- Save	mnuFileSave
- Save As	mnuFileSaveAs
- Print	mnuFilePrint
- Print Preview	mnuFilePrintPreview
- Exit	mnuFileExit
Options	mnuOptions
- Font	mnuOptionsFont
- Background	mnuOptionsBackGround

As we can see, the names start with the prefix `mnu', indicating a menu. This prefix is followed by the highest-level menu item and then the lower level menu options.

5. We are almost done with the menu design. To give our menus a professional look, we can add some images with them. We will use the same images for the toolbar we will create in the next section. Note that to use images; we must have some related icon files in our computer. Many free icon files are available on the internet and we can download and use them.

To attach an image file with a menu option, click and select the menu option. In the properties window, look for the Image property and click on the button in the cell next to it. This will open up the following dialog box:

Select the Local resource radio button and then click on the Import button. This will allow us to browse the folder where the image files are stored and select the appropriate image file. Once we select the image file, it will be displayed in the large gray box of this dialog box. Click OK to continue. Repeat this process for each menu option to attach an image file.

6. Save and run the application. Clicking on the File and Options menus will display the menu options with images and shortcut keys. Here is a sample:

We have designed the menu system for our application. However, it is not functional i.e. nothing will happen when the user clicks on a menu option. Later in this chapter, we will write the code to provide functionality to our menus. Right now, we will design a toolbar for our application.