Section 14.2. Menus

14.2. Menus

Menus provide groups of related commands for Windows applications. Although commands vary between applications, somesuch as Open and Save are common to many applications. Menus organize commands without "cluttering" the application's user interface.

In Fig. 14.1, an expanded menu from Visual Basic 2005 Express lists various commands (called menu items), plus submenus (menus within a menu). Menu items are typically displayed down and indented to the right of the top-level menu, but they can be displayed to the left if there is not enough space to the right. The menu that contains a menu item is called the menu item's parent menu. A menu item that contains a submenu is considered to be the parent of the submenu.

Figure 14.1. Menus, submenus, menu items and menu icons.

All menu items can have Alt key shortcuts (also called access shortcuts or hotkeys), which are accessed by pressing Alt and the underlined letter (for example, Alt F typically expands the File menu). Menus that are not top-level menus can have shortcut keys as well (combinations of Ctrl, Shift, Alt, F1, F2, letter keys, etc.). Some menu items display check marks, usually indicating that multiple options on the menu can be selected at once.

To create a menu, open the Toolbox and drag a MenuStrip control onto the Form. This creates a menu bar across the top of the Form (below the title bar) and places a MenuStrip icon in the component tray. To select the MenuStrip, click this icon. You can now use Design mode to create and edit menus for your application. Menus, like other controls, have properties and events, which can be accessed through the Properties window.

To add menu items to the menu, click the Type Here TextBox (Fig. 14.2) and type the menu item's name. This action adds an entry to the menu of type ToolStripMenuItem. After you press the Enter key, the menu item name is added to the menu. Additional Type Here TextBoxes appear, allowing you to add items underneath or to the right of the original menu item (Fig. 14.3).

Figure 14.2. Editing menus in Visual Studio.

Figure 14.3. Adding ToolStripMenuItems to a MenuStrip.

To create an access shortcut (or keyboard shortcut), type an ampersand (&) before the character to be underlined. For example, to create the File menu item with the letter F underlined, type &File. To display an ampersand, type & &. To add other shortcut keys (like those shown in Fig. 14.1) for menu items, set the ShortcutKeys property of the appropriate ToolStripMenuItems. To do this, select the down arrow to the right of this property in the Properties window. In the window that appears (Fig. 14.4), use the CheckBoxes and drop-down list to select the shortcut keys. When you are finished, click elsewhere on the screen. You can hide the shortcut keys by setting property ShowShortcutKeys to False, and you can modify how the control keys are displayed in the menu item by modifying property ShortcutKeyDisplayString.

Figure 14.4. Setting a menu item's shortcut keys.

Look-and-Feel Observation 14.1

Buttons can have access shortcuts. Place the & symbol immediately before the desired character in the Button's text. To press the button by using its access key in the running application, press Alt and the underlined character.

You can remove a menu item by selecting it and pressing the Delete key. Menu items can be grouped logically by separator bars, which are inserted by right clicking a menu item and selecting Insert > Separator or by typing "-" for the text of a menu item.

You can also add TextBoxes and ComboBoxes (drop-down lists) as menu items. When adding an item in Design mode, you may have noticed that before you click to enter text for a new item, you are provided with a drop-down list. Clicking the down arrow (Fig. 14.5) allows you to select the type of item to addMenuItem (of type ToolStripMenuItem, the default), ComboBox (of type ToolStripComboBox) and TextBox (of type ToolStripTextBox). We focus on ToolStripMenuItems. [Note: If you view this drop-down list for menu items that are not on the top level, a fourth option appears, allowing you to insert a separator bar.]

Figure 14.5. Menu item options.

ToolStripMenuItems generate a Click event when selected. To create an empty Click event handler, double click the menu item in Design mode. Common actions in response to these events include displaying dialogs and setting application properties. Common menu properties and a common event of MenuStrip and ToolStripMenuItem are summarized in Fig. 14.6.

Figure 14.6. MenuStrip and ToolStripMenuItem properties and an event.

MenuStrip and ToolStripMenuItem properties and an event	Description
MenuStrip Properties
MenuItems	Contains the top-level menu items for this MenuStrip.
HasChildren	Indicates whether MenuStrip has any child controls (menu items).
RightToLeft	Causes text to display from right to left. This is useful for languages that are read from right to left.
ToolStripMenuItem Properties
Checked	Indicates whether a menu item is checked. The default value is False, meaning that the menu item is unchecked.
CheckOnClick	Indicates that a menu item should appear checked or unchecked as the item is clicked.
MenuItems	Lists the submenu items for a particular menu item.
ShortcutKeyDisplayString	Specifies text that should appear beside a menu item for a shortcut key. If left blank, the key names are displayed. Otherwise, the text in this property is displayed for the shortcut key.
ShortcutKeys	Specifies the shortcut key for the menu item.
ShowShortcutKeys	Indicates whether a shortcut key is shown beside the menu item text. The default is true, which displays the shortcut key.
Text	Specifies the menu item's text. To create an Alt access shortcut, precede a character with & (e.g., &File to specify a menu named File with the letter F underlined).
Common ToolStripMenuItem Event
Click	Generated when an item is clicked or a shortcut key is used to select a menu item.

Look-and-Feel Observation 14.2

It is a convention to place an ellipsis (...) after the name of a menu item that, when selected, displays a dialog (e.g. Save As...). A menu item that causes an immediate action without prompting the user for more information (e.g., Save) should not have an ellipsis following its name.

Class FrmMenuTest (Fig. 14.7) creates a simple menu on a Form. The Form has a top-level File menu with menu items About (which displays a MessageBox) and Exit (which terminates the program). The program also includes a Format menu, which contains menu items that change the format of the text on a Label. The Format menu has submenus Color and Font, which change the color and font of the text on a Label.

Figure 14.7. Menus for changing text font and color.

  1  ' Fig. 14.7: FrmMenuTest.vb  2  ' Using Menus to change font colors and styles.  3  Public Class FrmMenuTest  4  5     ' display MessageBox when About MenuItem is selected  6     Private Sub aboutToolStripMenuItem_Click( _  7        ByVal sender As System.Object, ByVal e As System.EventArgs) _  8        Handles aboutToolStripMenuItem.Click  9 10        MessageBox.Show( "This is an example" & vbCrLf & "of using menus.", _ 11           "About" , MessageBoxButtons.OK, MessageBoxIcon.Information) 12     End Sub ' aboutToolStripMenuItem_Click 13 14     ' exit program when Exit MenuItem is selected 15     Private Sub exitToolStripMenuItem_Click( _ 16        ByVal sender As System.Object, ByVal e As System.EventArgs) _ 17        Handles exitToolStripMenuItem.Click 18 19        Application.Exit() 20     End Sub ' exitToolStripMenuItem_Click 21 22     ' reset checkmarks for Color MenuItems 23     Private Sub ClearColor() 24        ' clear all checkmarks 25        blackToolStripMenuItem.Checked = False 26        blueToolStripMenuItem.Checked = False  27        redToolStripMenuItem.Checked = False   28        greenToolStripMenuItem.Checked = False  29     End Sub ' ClearColor 30 31     ' update Menu state and color display black 32     Private Sub blackToolStripMenuItem_Click( _ 33        ByVal sender As System.Object, ByVal e As System.EventArgs) _ 34        Handles blackToolStripMenuItem.Click 35 36        ClearColor() ' reset checkmarks for Color MenuItems 37        lblDisplay.ForeColor = Color.Black ' set Color to Black 38        blackToolStripMenuItem.Checked = True 39     End Sub ' blackToolStripMenuItem_Click 40 41     ' update Menu state and color display blue 42     Private Sub blueToolStripMenuItem_Click( _ 43        ByVal sender As System.Object, ByVal e As System.EventArgs) _ 44        Handles blueToolStripMenuItem.Click 45 46        ClearColor() ' reset checkmarks for Color MenuItems 47        lblDisplay.ForeColor = Color.Blue ' set Color to Blue 48        blueToolStripMenuItem.Checked = True 49     End Sub ' blueToolStripMenuItem_Click 50 51     ' update Menu state and color display red 52     Private Sub redToolStripMenuItem_Click( _ 53        ByVal sender As System.Object, ByVal e As System.EventArgs) _ 54        Handles redToolStripMenuItem.Click 55 56        ClearColor() ' reset checkmarks for Color MenuItems 57        lblDisplay.ForeColor = Color.Red ' set Color to Red 58        redToolStripMenuItem.Checked = True 59     End Sub ' redToolStripMenuItem_Click 60 61     ' update Menu state and color display green 62     Private Sub greenToolStripMenuItem_Click( _ 63        ByVal sender As System.Object, ByVal e As System.EventArgs) _ 64        Handles greenToolStripMenuItem.Click 65 66        ClearColor() ' reset checkmarks for Color MenuItems 67        lblDisplay.ForeColor = Color.Green ' set Color to Green 68        greenToolStripMenuItem.Checked = True 69     End Sub ' greenToolStripMenuItem_Click 70 71     ' reset checkmarks for Font MenuItems 72     Private Sub ClearFont() 73        timesToolStripMenuItem.Checked = False 74        courierToolStripMenuItem.Checked = False 75        comicToolStripMenuItem.Checked = False 76     End Sub ' ClearFont 77 78     ' update Menu state and set Font to Times New Roman 79     Private Sub timesToolStripMenuItem_Click( _ 80        ByVal sender As System.Object, ByVal e As System.EventArgs) _ 81        Handles timesToolStripMenuItem.Click 82 83        ClearFont() 'reset checkmarks for Font MenuItems 84        timesToolStripMenuItem.Checked = True 85 86        ' set Times New Roman font 87        lblDisplay.Font = _ 88           New Font("Times New Roman", 14, lblDisplay.Font.Style) 89     End Sub ' timesToolStripMenuItem_Click 90 91     ' update Menu state and set Font to Courier New 92     Private Sub courierToolStripMenuItem_Click( _ 93        ByVal sender As System.Object, ByVal e As System.EventArgs) _ 94        Handles courierToolStripMenuItem.Click 95 96        ClearFont() ' reset checkmarks for Font MenuItems 97        courierToolStripMenuItem.Checked = True 98 99        ' set Courier font 100       lblDisplay.Font = _ 101          New Font("Courier New" , 14, lblDisplay.Font.Style) 102    End Sub ' courierToolStripMenuItem_Click 103 104    ' update Menu state and set Font to Comic Sans MS 105    Private Sub comicToolStripMenuItem_Click( _ 106       ByVal sender As System.Object, ByVal e As System.EventArgs) _ 107       Handles comicToolStripMenuItem.Click 108 109       ClearFont() ' reset checkmarks for Font MenuItems 110       comicToolStripMenuItem.Checked = True 111 112       ' set Comic Sans MS font 113       lblDisplay.Font = _ 114          New Font("Comic Sans MS" , 14, lblDisplay.Font.Style) 115    End Sub ' comicToolStripMenuItem_Click 116 117    ' toggle checkmark and toggle bold style 118    Private Sub boldToolStripMenuItem_Click( _ 119       ByVal sender As System.Object, ByVal e As System.EventArgs) _ 120       Handles boldToolStripMenuItem.Click 121       ' toggle menu item checkmark 122       boldToolStripMenuItem.Checked = Not boldToolStripMenuItem.Checked 123 124       ' use Xor to toggle bold, keep all other styles 125       lblDisplay.Font = New Font(lblDisplay.Font.FontFamily, 14, _ 126          lblDisplay.Font.Style Xor FontStyle.Bold) 127    End Sub ' boldToolStripMenuItem_Click 128 129    ' toggle checkmark and toggle italic style 130    Private Sub italicToolStripMenuItem_Click( _ 131       ByVal sender As System.Object, ByVal e As System.EventArgs) _ 132       Handles italicToolStripMenuItem.Click 133       ' toggle menu item checkmark 134       italicToolStripMenuItem.Checked = _    135          Not italicToolStripMenuItem.Checked 136 137       ' use Xor to toggle italic, keep all other styles 138       lblDisplay.Font = New Font(lblDisplay.Font.FontFamily, 14, _ 139          lblDisplay.Font.Style Xor FontStyle.Italic) 140    End Sub ' italicToolStripMenuItem_Click 141 End Class ' FrmMenuTest 

(a)

(b)

(c)

(d)

(e)

(f)

To create this GUI, begin by dragging the MenuStrip from the ToolBox onto the Form. Then use Design mode to create the menu structure shown in the sample outputs. The File menu (fileToolStripMenuItem) has menu items About (aboutToolStripMenuItem) and Exit (exitToolStripMenuItem); the Format menu (formatToolStripMenuItem) has two submenus. The first submenu, Color (colorToolStripMenuItem), contains menu items Black (blackToolStripMenuItem), Blue (blueToolStripMenuItem), Red (redToolStripMenuItem) and Green (greenToolStripMenuItem). The second submenu, Font (fontToolStripMenuItem) contains menu items Times New Roman (timesToolStripMenuItem), Courier New (courierToolStripMenuItem), Comic Sans MS (comicToolStripMenuItem), a separator bar (dashToolStripMenuItem), Bold (boldToolStripMenuItem) and Italic (italicToolStripMenuItem).

The About menu item in the File menu displays a MessageBox when clicked (lines 612). The Exit menu item closes the application through Shared method Exit of class Application (line 19). Class Application's Shared methods control program execution. Method Exit causes our application to terminate.

We made the items in the Color submenu (Black, Blue, Red and Green) mutually exclusivethe user can select only one at a time (we explain how we did this shortly). To indicate that a menu item is selected, we will set each Color menu item's Checked property to true. This causes a check to appear to the left of a menu item.

Each Color menu item has its own Click event handler. The event handler for color Black is blackToolStripMenuItem_Click (lines 3239). Similarly, the event handlers for colors Blue, Red and Green are blueToolStripMenuItem_Click (lines 4249), redToolStripMenuItem_Click (lines 5259) and greenToolStripMenuItem_Click (lines 6269), respectively. The Color menu items must be mutually exclusive, so each event handler calls method ClearColor (lines 2329) before setting its corresponding Checked property to TRue. Method ClearColor sets the Checked property of each color MenuItem to False, effectively preventing more than one menu item from being selected at a time. In the designer, we initially set the Black menu item's Checked property to true, because at the start of the program, the text on the Form is black.

Software Engineering Observation 14.1

The mutual exclusion of menu items is not enforced by the MenuStrip. You must program this behavior.

The Font menu contains three menu items for fonts (Times New Roman, Courier New and Comic Sans MS) and two menu items for font styles (Bold and Italic). We added a separator bar between the font and font-style menu items to indicate that these are separate options. A Font object can specify only one font at a time but can set multiple styles at once (e.g., a font can be both bold and italic). We set the font menu items to display checks. As with the Color menu, we must enforce mutual exclusion of these items in our event handlers.

Event handlers for font menu items Times New Roman, Courier New and Comic Sans MS are timesToolStripMenuItem_Click (lines 7989), courierToolStripMenuItem_Click (lines 92102) and comicToolStripMenuItem_Click (lines 105115), respectively. These event handlers behave in a manner similar to that of the event handlers for the Color menu items. Each event handler clears the Checked properties for all the font menu items by calling method ClearFont (lines 7276), then sets to true the Checked property of the menu item that raised the event. This enforces the mutual exclusion of the font menu items. In the designer, we initially set the Times New Roman menu item's Checked property to true, because this is the original font for the text on the Form. The event handlers for the Bold and Italic menu items (lines 118127 and 130140) use the Xor operator to combine font styles, as we discussed in Chapter 13.