Lesson 4: Using Menus

Lesson 4: Using Menus

Menus allow your users to easily access critical application functions and tools. Proper menu design and planning ensure proper functionality and accessibility of your application.

After this lesson, you will be able to

• Explain the importance of menus in interface design

• Describe the process of creating a menu using the MainMenu component

• Describe the process of creating a context menu using the ContextMenu component

• Explain how to enable or disable a menu item

• Explain how to create shortcut keys for menu items

• Explain how to display a check mark or a radio button on a menu item

• Explain how to make menu items invisible

• Explain how to dynamically add items to a menu

• Explain how to dynamically clone a menu

Estimated lesson time: 30 minutes

Menus allow users to access top-level commands and functions in a familiar, easy-to-understand interface. A well-designed menu that exposes your application s functionality in a logical, consistent manner makes your application easier to learn and use. A poorly designed menu, on the other hand, will be avoided and used only when necessary.

When designing menus, you should consider the logical flow of the application. Menu items should be grouped according to related functionality. Using access keys to enable keyboard shortcuts to menu items also makes your application easier to use.

Creating Menus During Design

Main menus are created during the design stage with the MainMenu component. The MainMenu component contains and manages a collection of MenuItem controls, which form the visual element of a menu at run time. With the MainMenu component, you can rapidly and intuitively create menus for your forms.

Using the MainMenu Component

The MainMenu component allows you to do the following:

• Create new menus and menu bars

• Add new menu items to existing menus

• Modify the properties of menus and menu items via the Properties window

• Create event handlers to handle the Click event and other events for menu items

To create a new menu, all you have to do is add a MainMenu component to your form. The component appears in the component tray, and a box with the text Type Here appears in the menu bar of the form. To create a new menu item, type in the box where indicated. The menu appears on your form as it would at run time. As you type, additional boxes are created beneath and to the right of the first menu item. Submenus are created the same way. If you want to create a submenu, simply type an entry to the right of the menu item that you want to expand. Figure 2.9 shows how to use the MainMenu component to create menus.

Figure 2-9. Creating menus with the MainMenu component.

When an item is added to a menu, the designer creates an instance of a MenuItem object. Each MenuItem object has its own properties and members that can be set in the Properties window. The Text property represents the text that will be displayed at run time and is set to the text that you type. The Name property indicates how you will refer to this object in code and receives a changeable default value.

To create main menus at design time

1. In the Toolbox, add a MainMenu component to the form by double-clicking the MainMenu tool or by dragging it onto the form. A MainMenu component appears in the component tray.

2. In the designer, type the text for the first menu item in the box presented on the form s menu bar. As additional boxes appear, add additional menu items until the structure of your menu is complete. Note that the order in which you add menu items will be reflected in the menu layout.

3. In the Properties window, set any menu-item properties that you want to change, by first selecting the menu item in the designer, and then changing the desired properties.

4. In the Properties window of the form, make sure that the Menu property is set to the menu you want to display. If you have multiple menus on a form, only the designated menu will be displayed.

Separating Menu Items

You can separate menu items with a separator. A separator is a horizontal line between items on a menu. You can use separator bars to divide menu items into logical groups on menus that contain multiple items, as shown in Figure 2.10.

Figure 2-10. Separator bars on menus.

You can add a separator to your menus by entering a hyphen as the text of a menu item. The hyphen will be displayed as a separator.

To create a separator bar on your menu

1. Select the menu item that represents where you want to place a separator.

2. Type a hyphen (-). At run time, this hyphen will be displayed as a separator bar.

Menu Access and Shortcut Keys

You can enable keyboard access to your menus with access and shortcut keys.

Access Keys

Access keys allow users to open a menu by pressing the Alt key and typing a designated letter. When the menu is open, you can select a menu command by pressing the Alt key and the correct access key. For example, in most programs, the Alt+F key opens the File menu. Access keys are displayed on the form as an underlined letter on the menu items.

You can use the same access key for different menu items as long as the menu items are contained in different menu groups. For example, you can use Alt+C to access the Close command on the File menu group as well as the Copy command on the Edit menu group. You should avoid using the same access key for multiple items on a menu group for example, avoid using Alt+C for both the Cut and the Copy commands of an Edit menu group. If you do use the same access key combination for two items on a menu group, the access key lets you toggle your selection between the items, but you will be unable to select the item without first pressing the Enter key.

To assign an access key to a menu item

1. In the designer, click the menu item to which you want to assign an access key.

2. Type an ampersand (&) in front of the desired letter for the access key.

Shortcut Keys

Shortcut keys enable instant access to menu commands, thus providing a keyboard shortcut for frequently used menu commands. Shortcut key assignments can be single keys, such as Delete, F1, or Insert, or they can be key combinations, such as Ctrl+A, Ctrl+F1, or Ctrl+Shift+X. When a shortcut key is designated for a menu item, it is shown to the right of the menu item. The shortcut key combination will not be displayed if the ShowShortcut property of the menu item is set to false.

To assign a shortcut key

1. Select the menu item for which you want to enable a shortcut key.

2. In the Properties window, select the Shortcut property.

3. Choose the appropriate shortcut key combination from the drop-down menu.

Using Menu Item Events

You can create event handlers for menu items in the same way that you create event handlers for other controls. The most frequently used event is the Click event. The Click event handler should contain the code to be executed when the menu item is clicked. This code will also execute when a shortcut key combination is pressed.

The Select event is raised when a menu item is highlighted, either with the mouse or with access keys. You might create an event handler that provides detailed help regarding use of a menu command when selected.

The Popup event is raised just before a menu item s list is displayed. You can use this event to enable and disable menu items at run time.

See Lesson 2 of this chapter for information on creating an event handler.

Creating Context Menus

Context menus are menus that appear when an item is right-clicked. Context menus are created with the ContextMenu component. The ContextMenu component is edited in exactly the same way as the MainMenu component is edited. The ContextMenu appears at the top of the form, and you can add menu items by typing them on the control.

Context menus are very similar to main menus in many respects. Both contain and manage a collection of menu-item controls. You can enable shortcut keys, but not access keys for menu items in a context menu. To associate a context menu with a particular form or control, set the ContextMenu property of that form or control to the appropriate menu.

To create a context menu

1. In the Toolbox, add a ContextMenu component to the form, either by double-clicking the ContextMenu tool or by dragging it onto the form. A ContextMenu component appears in the component tray.

2. In the designer, type the text for the first menu item in the box presented on the form s menu bar. As additional boxes appear, add additional menu items until your menu structure is complete.

3. In the Properties window, set any properties and events (for Visual C#) that you want to change for your menu items.

4. Select the form or control with which you want to associate the context menu. In the Properties window for the control, set the ContextMenu property to your context menu. The context menu is displayed at run time when the control is right-clicked. You can associate a single context menu with several controls, but only one context menu can be associated per control.

Modifying Menus at Run Time

You can manipulate your menus to dynamically respond to run-time conditions. For example, if your application is unable to complete a certain command, you can disable the menu item that calls that command. You can display a check mark or a radio button next to a menu item to provide information to the user. You can make menu items invisible at times when it would be inappropriate to choose them. You can add menu items at run time, and menus can be cloned or merged with one another at run time.

Enabling and Disabling Menu Commands

Every menu item has an Enabled property. When this property is set to false, the menu is disabled and cannot respond to user actions. Access and shortcut key actions are also disabled for this menu item, which appears dimmed on the user interface. The following example demonstrates how to disable a menu item at run time:

Visual Basic .NET

MenuItem1.Enabled = False

Visual C#

menuItem1.Enabled = false;

Displaying Check Marks on Menu Items

You can use the Checked property to display a check mark next to a menu item. You might display a check mark to indicate that a particular option has been selected. The following example demonstrates how to select and clear a menu item:

Visual Basic .NET

' Checks the menu item MenuItem1.Checked = True ' Unchecks the menu item MenuItem1.Checked = False

Visual C#

// Checks the menu item menuItem1.Checked = true; // Unchecks the menu item menuItem1.Checked = false;

Displaying Radio Buttons on Menu Items

You can display a radio button instead of a check mark. To display radio buttons, set the RadioCheck property for the menu item to true. The menu item will then display a radio button instead of a check mark. When the Checked property is false, neither a check mark nor a radio button will be displayed. Note that radio buttons frequently are used to display exclusive options, such as the choice of background colors. If you want to display radio buttons next to mutually exclusive options, you must write code that clears other options when one option is selected.

Making Menu Items Invisible

You can make your menu items invisible by setting the Visible property to false. You can use this property to modify your menus at run time in response to changing conditions. The following code demonstrates how to make a menu item invisible:

Visual Basic .NET

MenuItem1.Visible = False

Visual C#

menuItem1.Visible = false;

Note that making a menu item invisible at run time removes it from the menu bar. Any submenus contained by that menu item will also be inaccessible.

Cloning Menus

You can make a copy of existing menu items at run time. For example, you might want to clone an Edit menu item (and its associated submenus) from a main menu to serve as a context menu for a control. You can create a new menu item by using the CloneMenu method. The CloneMenu method creates a copy of the specified menu item and all of its members. This includes contained menu items, properties, and event handlers. Thus, all events that are handled by the original menu item will be handled in the same way by the cloned menu item. The newly created context menu can then be assigned to a control. The following example demonstrates how to clone a menu item as a new context menu at run time:

Visual Basic .NET

' The following example assumes the existence of a menu item called ' fileMenuItem and a control called myButton ' Declares and instantiates a new context menu Dim myContextMenu as New ContextMenu() ' Clones fileMenuItem and fills myContextMenu with the cloned item myContextMenu.MenuItems.Add(fileMenuItem.CloneMenu()) ' Assigns the new context menu to myButton myButton.ContextMenu = myContextMenu

Visual C#

// The following example assumes the existence of a menu item called // fileMenuItem and a control called myButton // Declares and instantiates a new context menu ContextMenu myContextMenu = new ContextMenu(); // Clones fileMenuItem and fills myContextMenu with the cloned item myContextMenu.MenuItems.Add(fileMenuItem.CloneMenu()); // Assigns the new context menu to myButton myButton.ContextMenu = myContextMenu;

Merging Menus at Run Time

There might be times when you want to display multiple menus as a single menu. The MergeMenu method allows you to combine menus and display them as a single menu at run time. You can merge multiple main or context menus with each other, merge menus with menu items, or merge multiple menu items.

To merge menus at run time

Call the MergeMenu method of the menu or menu item that will be displayed. Supply the menu or menu item to be incorporated as the argument.

Visual Basic .NET

fileMenuItem.MergeMenu(myContextMenu)

Visual C#

fileMenuItem.MergeMenu(myContextMenu);

Adding Menu Items at Run Time

You can dynamically add new items to an existing menu at run time. For example, you might add menu items that display the pathnames of the most recently opened files. New menu items will not have event handlers associated with them, but you can specify a method to handle the Click event as an argument to the constructor of the new menu item. This method must be a Sub (void) method and have the same signature as other event handlers. An example follows:

Visual Basic .NET

Public Sub ClickHandler (ByVal sender As Object, ByVal e As _ System.EventArgs) ' Implementation details omitted End Sub

Visual C#

public void ClickHandler (object sender, System.EventArgs e) { // Implementation details omitted }

To add menu items at run time

1. Declare and instantiate a new menu item. You can specify a method to handle the Click event at this time if you choose. For example:

   Visual Basic .NET

   ' This example assumes the existence of a method called ' ClickHandler which has the correct event handler signature Dim myItem As MenuItem myItem = New MenuItem("Item 1", _ New EventHandler(AddressOf ClickHandler))

   Visual C#

   // This example assumes the existence of a method called // ClickHandler which has the correct event handler signature MenuItem myItem; myItem = new MenuItem("Item 1", new EventHandler(ClickHandler));

2. Add the new method to the MenuItems collection of the menu you want to modify.

   Visual Basic .NET

   fileMenuItem.MenuItems.Add(myItem)

   Visual C#

   fileMenuItem.MenuItems.Add(myItem);

Lesson Summary

• Menus allow you to enable access to high-level commands of your application through an easy-to-use interface. The MainMenu control allows you to rapidly create menus for your applications. Features that enhance menus include separator bars, access keys, and shortcut keys.

• Context menus are useful for enabling access to commands in a variety of contextual situations. Context menus can be created with the ContextMenu control and are created at run time in the same manner as main menus.

• At run time, menus can dynamically provide customized interaction between your application and its users. You can enable and disable menu items, make menu items invisible, and display a check mark or a radio button next to a menu item. You can also dynamically change the structure of menus by creating new menus with the CloneMenu method, merging multiple existing menus, or adding new menu items to existing menus.