Creating Top-Level Menus in Visual Basic

From Techotopia
Revision as of 14:12, 24 July 2007 by Neil (Talk | contribs)

Jump to: navigation, search

Despite Microsoft's move towards so called Ribbon based navigation, every other application still relies on menus to provide an easy way for users to navigate around a user interface. In fact, the jury is still out on whether Ribbon style interfaces of the type found in Microsoft Office 2007 are actually easier to use than menus.

Since it is almost impossible creat an application without needing a menu of some sort, this chapter is dedicated entirely to the topic of creating both top-level and context menus in Visual Basic. As you will see as we work through this topic, Visual Basic combined with Visual Studio make the creation of menus extremely easy.

Creating a Top-Level Menu

Top-level menus (the type of menus that run across the top of forms) are created using the Menu Strip control. The first step in creating a menu, therefore, is to add a Menu Strip control to the form. With your Visual Studio project loaded, and the Form to which you wish to add the menu selected, double click on the Menu Strip control in the Menus and Toolbars section of the Visual Studio Toolbox. You will notice that the Menu Strip object is added to the panel beneath the form, and that a Type Here field appears at the top of the form as follows:

File:Exampl.jpg

Use the Properties panel to change the name of the Menu Strip object to mainMenu. Click in the Type Here field at the top of the form and enter &File. This as the effect of creating a menu item object labeled "File". The ampersand (&) is added to instruct Visual Basic to use the 'F' at the beginning of the file as the accelerator key for this menu item. As such, pressing Alt+F when the application is running will be equivalent to clicking on the menu item with the mouse pointer. The location of the ampersand in the menu item Text property dictates the accelerator key. For example H&elp will declare 'e' as the accelerator for this particular men item. Windows indicates the accelerator for a menu item by underlining the letter (as you will see by the underlined 'F' on your File menu item).

Once the File menu item has been added, Visual Studio will create both a drop down menu and a field to add another menu item as follows:

File:Exampl.jpg

Click on the Type Here field and type &Open File.... When you have entered this text Visual Studio will add another Type Here field beneath the "Open File" entry. Click in this field and enter &Read File.... Once again, Visual Studio provide the opportunity to add another item. This time, however, we are going to add a different type of item to the menu. As you move the mouse pointer over the Type Here field, the field will highlight and a down arrow will appear to the right of the Type Here text. Clicking on this arrow drops downb a menu of items to add to the menu:

File:Exampl.jpg

The options available are as follows:

  • MenuItem - Creates a sub-menu (also known as a pull-right menu) which essentially pops up a new menu to the right of the currently displayed menu.
  • ComboBox - Adds a ComboBox control to the menu. Although you have the option of adding a ComboBox to your menu, you should resist the urge to do so. The placing of a ComboBox in a menu is not considered to be good user interface design.
  • Separator - Places a separator after the last menu item to be added. Separators in menus are useful for distinguishing between groups of menu items.
  • TextBox - Adds a TextBox control to the menu. As with the ComboBox, you should resist the temptation to add such a control to a menu as it violates GUI design convention.

For our example we will add a separator to our File menu. To do so, simply click on the separator option in the menu.

As the final entry in the File menu, add an E&xit item.

We will now create a second drop down menu. Click in the Type Here field next to the File menu and enter &Edit to create an Edit menu. Use the same technique outlined above to add Cut, Copy and Paste items to the Edit menu. Once completed the form layout should appear as follows:

File:Exampl.jpg

The last task in creating our top-level menu is to add a Checked menu item. A checked menu items maintained a state in that when they are selected a check mark appears and when they are unselected the check mark disappears.