Menus

Menus provide groups of related commands for Windows applications. Although these commands depend on the program, somesuch as Open and Saveare common to many applications. Menus are an integral part of GUIs, because they organize commands without "cluttering" the GUI.

In Fig. 14.1, an expanded menu from Visual Studio lists various commands (called menu items), plus submenus (menus within a menu). Notice that the top-level menus appear in the left portion of the figure, whereas any submenus or menu items are displayed to the right. The menu that contains a menu item is called that menu item's parent menu. A menu item that contains a submenu is considered to be the parent of that submenu.

Figure 14.1. Menus, submenus and menu items.

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. Then more Type Here TextBoxes appear, allowing you to add items underneath or to the side 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 (e.g., -F9) 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 dropdown 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 label. To press the button by using its access key in the running application, the user presses Alt and the underlined character.

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

In addition to text, Visual Studio allows you to easily add TextBoxes and ComboBoxes (drop-down lists) as menu items. When adding an item in Design mode, you may have noticed that before you 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 properties. Common menu properties and a common event 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.
Index	Specifies an item's position in its parent menu. A value of 0 places the MenuItem at the beginning of the menu.
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 (e.g., -F9 is equivalent to clicking a specific item).
ShowShortcutKeys	Indicates whether a shortcut key is shown beside 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. This is the default event when the menu is double clicked in the designer.

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...). Menu items that produce an immediate action without prompting the user for more information (e.g. Save) should not have an ellipsis following their name.

Class MenuTestForm (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: MenuTestForm.cs
 2 // Using Menus to change font colors and styles.
 3 using System;
 4 using System.Drawing;
 5 using System.Windows.Forms;
 6
 7 // our Form contains a Menu that changes the font color
 8 // and style of the text displayed in Label
 9 public partial class MenuTestForm : Form
10 {
11 // default constructor
12 public MenuTestForm()
13 {

14 InitializeComponent(); 15 } // end constructor 16 17 // display MessageBox when About ToolStripMenuItem is selected 18 private void aboutToolStripMenuItem_Click( object sender, EventArgs e ) 19 { 20 MessageBox.Show( 21 "This is an example of using menus.", 22 "About", MessageBoxButtons.OK, MessageBoxIcon.Information ); 23 } // end method aboutToolStripMenuItem_Click 24 25 // exit program when Exit ToolStripMenuItem is selected 26 private void exitToolStripMenuItem_Click( object sender, EventArgs e ) 27 { 28 Application.Exit(); 29 } // end method exitToolStripMenuItem_Click 30 31 // reset checkmarks for Color ToolStripMenuItems 32 private void ClearColor() 33 { 34 // clear all checkmarks 35 blackToolStripMenuItem.Checked = false; 36 blueToolStripMenuItem.Checked = false; 37 redToolStripMenuItem.Checked = false; 38 greenToolStripMenuItem.Checked = false; 39 } // end method ClearColor 40 41 // update Menu state and color display black 42 private void blackToolStripMenuItem_Click( object sender, EventArgs e ) 43 { 44 // reset checkmarks for Color ToolStripMenuItems 45 ClearColor(); 46 47 // set Color to Black 48 displayLabel.ForeColor = Color.Black; 49 blackToolStripMenuItem.Checked = true; 50 } // end method blackToolStripMenuItem_Click 51 52 // update Menu state and color display blue 53 private void blueToolStripMenuItem_Click( object sender, EventArgs e ) 54 { 55 // reset checkmarks for Color ToolStripMenuItems 56 ClearColor(); 57 58 // set Color to Blue 59 displayLabel.ForeColor = Color.Blue; 60 blueToolStripMenuItem.Checked = true; 61 } // end method blueToolStripMenuItem_Click 62 63 // update Menu state and color display red 64 private void redToolStripMenuItem_Click( object sender, EventArgs e ) 65 { 66 // reset checkmarks for Color ToolStripMenuItems 67 ClearColor(); 68 69 // set Color to Red 70 displayLabel.ForeColor = Color.Red; 71 redToolStripMenuItem.Checked = true; 72 } // end method redToolStripMenuItem_Click 73 74 // update Menu state and color display green 75 private void greenToolStripMenuItem_Click( object sender, EventArgs e ) 76 { 77 // reset checkmarks for Color ToolStripMenuItems 78 ClearColor(); 79 80 // set Color to Green 81 displayLabel.ForeColor = Color.Green; 82 greenToolStripMenuItem.Checked = true; 83 } // end method greenToolStripMenuItem_Click 84 85 // reset checkmarks for Font ToolStripMenuItems 86 private void ClearFont() 87 { 88 // clear all checkmarks 89 timesToolStripMenuItem.Checked = false; 90 courierToolStripMenuItem.Checked = false; 91 comicToolStripMenuItem.Checked = false; 92 } // end method ClearFont 93 94 // update Menu state and set Font to Times New Roman 95 private void timesToolStripMenuItem_Click( object sender, EventArgs e ) 96 { 97 // reset checkmarks for Font ToolStripMenuItems 98 ClearFont(); 99 100 // set Times New Roman font 101 timesToolStripMenuItem.Checked = true; 102 displayLabel.Font = new Font( 103 "Times New Roman", 14, displayLabel.Font.Style ); 104 } // end method timesToolStripMenuItem_Click 105 106 // update Menu state and set Font to Courier 107 private void courierToolStripMenuItem_Click( 108 object sender, EventArgs e ) 109 { 110 // reset checkmarks for Font ToolStripMenuItems 111 ClearFont(); 112 113 // set Courier font 114 courierToolStripMenuItem.Checked = true; 115 displayLabel.Font = new Font( 116 "Courier", 14, displayLabel.Font.Style ); 117 } // end method courierToolStripMenuItem_Click 118 119 // update Menu state and set Font to Comic Sans MS 120 private void comicToolStripMenuItem_Click( object sender, EventArgs e ) 121 { 122 // reset checkmarks for Font ToolStripMenuItems 123 ClearFont(); 124 125 // set Comic Sans font 126 comicToolStripMenuItem.Checked = true; 127 displayLabel.Font = new Font( 128 "Comic Sans MS", 14, displayLabel.Font.Style ); 129 } // end method comicToolStripMenuItem_Click 130 131 // toggle checkmark and toggle bold style 132 private void boldToolStripMenuItem_Click( object sender, EventArgs e ) 133 { 134 // toggle checkmark 135 boldToolStripMenuItem.Checked = !boldToolStripMenuItem.Checked; 136 137 // use logical exlusive OR to toggle bold, keep all other styles 138 displayLabel.Font = new Font( 139 displayLabel.Font.FontFamily, 14, 140 displayLabel.Font.Style ^ FontStyle.Bold ); 141 } // end method boldToolStripMenuItem_Click 142 143 // toggle checkmark and toggle italic style 144 private void italicToolStripMenuItem_Click( 145 object sender, EventArgs e ) 146 { 147 // toggle checkmark 148 italicToolStripMenuItem.Checked = !italicToolStripMenuItem.Checked; 149 150 // use logical exclusive OR to toggle italic, keep all other styles 151 displayLabel.Font = new Font( 152 displayLabel.Font.FontFamily, 14, 153 displayLabel.Font.Style ^ FontStyle.Italic ); 154 } // end method italicToolStripMenuItem_Click 155 } // end class MenuTestForm

(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 (courierToolStripMenuItem), Comic Sans (comicToolStripMenuItem), a separator bar (dashToolStripMenuItem), Bold (boldToolStripMenuItem) and Italic (italicToolStripMenuItem).

The About menu item in the File menu displays a MessageBox when clicked (lines 1823). The Exit menu item closes the application through static method Exit of class Application (line 28). Class Application's static 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 method handler for color Black is blackToolStripMenuItem_Click (lines 4250). Similarly, the event handlers for colors Blue, Red and Green are blueToolStripMenuItem_Click (lines 5361), redToolStripMenuItem_Click (lines 6472) and greenToolStripMenuItem_Click (lines 7583), respectively. Each Color menu item must be mutually exclusive, so each event handler calls method ClearColor (lines 3239) 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, even when the Checked property is true. You must program this behavior.

The Font menu contains three menu items for fonts (Courier, Times New Roman and Comic Sans) 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 TimesRoman, Courier and ComicSans are timesToolStripMenuItem_Click (lines 95104), courierToolStripMenuItem_Click (lines 107117) and comicToolStripMenuItem_Click (lines 120129), 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 font menu items by calling method ClearFont (lines 8692), then sets the Checked property of the menu item that raised the event to TRue. 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 132154) use the bitwise logical exclusive OR (^) operator to combine font styles, as we discussed in Chapter 13.

MonthCalendar Control