34,333
edits
Changes
New page: Since it is almost impossible create an application without needing a menu of some sort, this chapter is dedicated entirely to the topic of creating top-level menus. The next chapter will ...
Since it is almost impossible create an application without needing a menu of some sort, this chapter is dedicated entirely to the topic of creating top-level menus. The next chapter will cover([[Creating Context Menus in C Sharp|Creating Context Menus in C#]]). As you will see as we work through this topic, C# 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:
[[Image:c_sharp_new_menu.jpg| Visual Studio Add New Menu]]
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 C# 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:
[[Image:c_sharp_drop_down_menu.jpg|C# New Menu Item]]
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 down a menu of items to add to the menu:
[[Image:c_sharp_menu_item_types.jpg| Visual Studio Menu Item Types]]
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.
The last task in creating our top-level menu is to add a ''Checked'' menu item. A checked menu item maintains state of being either set or unset. When a Checked item is set, a check mark appears and when they are unset the check mark disappears. Once completed the form layout should appear as follows:
[[Image:visual_basic_menu_checked.jpg]]
To created a ''Checked'' item in the menu enter ''Save on Exit'' in the ''Type Here'' field and then right click on the item to display the popup menu. From the menu, select ''Checked''. The menu item will now be displayed with a check mark next to it. In the property panel for the checked menu item, change the ''Name'' property to ''SaveOnExitMenu''.
The menu is now ready to be tested. Press the '''F5'' key to build and run the application. When it appears, click on the File and Edit menus to confirm that they appear as you intended.
== Deleting and Moving Menu Items ==
To delete a menu item in Visual Studio, simply right click on the item and select ''Delete'' from the popup menu. To move an item within the same menu, click and drag the item to the new position by holding down the mouse button. Release the button when the mouse pointer reaches the new location. To move an item from one menu to another, first right click over the menu item, select ''Cut'' from the popup menu. Next, click on the new menu to which you wish to move the item and, with the mouse position on the menu item you wish to appear ''below'' the new item, right click and select ''Paste''.
== Assigning Keyboard Shortcuts to Menu Items ==
It is conventional to allow menu items to be selected using the keyboard using what are know as ''keyboard shortcuts''. These are key sequences that typically involve pressing a key whilst holding down the ''Ctrl'', ''Alt'' or ''Shift'' key.
Keyboard shortcuts are defined by setting the ''ShortcutKeys'' property of a menu item object. For example, to configure the Exit menu item to use ''Ctrl-X'' select the menu item and click in the value field of the ''ShortcutKeys'' property in the Visual Studio Properties panel. A panel will appear providing the option to select ''Ctrl'', ''Shift'' or ''Alt'' and also the key to be pressed in conjunction. Use this panel to configure the ''Ctrl+X'' key sequence for this menu item.
== Programming Menu Items in C# ==
Now that we have designed a menu system in Visual Studio, the next step is to make the menu items do something when they are selected by a user. This is achieved using the event procedures of the individual menu options. We will demonstrate this using our example by wiring up the Exit menu option so that it closes the application, and by writing an event procedure for the ''Save on Exit'' menu option to change the checked status of the ''Checked'' menu item.
We will begin by writing a C# event procedure for when the Exit menu option is selected. In Visual Studio click on the ''File'' menu so that the menu drops down and double click on the ''Exit'' menu option. Visual Studio will subsequently display the ''Click'' event procedure for this menu item. All we need to do is add a Close() call to this procedure to exit the application:
<pre>
private void exitToolStripMenuItem_Click(object sender, EventArgs e)
{
Close();
}
</pre>
Having made the appropriate change, press the '''F5''' key to build and run the application. Selecting the ''Exit'' option from the File menu should now cause the application to close. Restart the application and try the ''Ctrl+X'' keyboard shortcut to Exit the application.
The final step is to write some C# code to change the setting of the ''SaveOnExitMenu'' object such that selecting the option in the menu changes the checked status. To achieve this, double click on the ''Save On Exit'' in the ''Edit'' menu to display the ''Click'' event procedure for this object. Enter the following C# code to invert the current setting of the ''Checked'' property of the ''SaveOnExitMenu'' object:
<pre>
private void SaveOnExitMenuItem_Click(object sender, EventArgs e)
{
SaveOnExitMenuItem.Checked = !SaveOnExitMenuItem.Checked;
}
</pre>
Press '''F5''' to build and run the application once again. When ''Save on Exit'' is clicked, the checked status will change to either, set or unset depending on the current setting.
== 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:
[[Image:c_sharp_new_menu.jpg| Visual Studio Add New Menu]]
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 C# 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:
[[Image:c_sharp_drop_down_menu.jpg|C# New Menu Item]]
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 down a menu of items to add to the menu:
[[Image:c_sharp_menu_item_types.jpg| Visual Studio Menu Item Types]]
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.
The last task in creating our top-level menu is to add a ''Checked'' menu item. A checked menu item maintains state of being either set or unset. When a Checked item is set, a check mark appears and when they are unset the check mark disappears. Once completed the form layout should appear as follows:
[[Image:visual_basic_menu_checked.jpg]]
To created a ''Checked'' item in the menu enter ''Save on Exit'' in the ''Type Here'' field and then right click on the item to display the popup menu. From the menu, select ''Checked''. The menu item will now be displayed with a check mark next to it. In the property panel for the checked menu item, change the ''Name'' property to ''SaveOnExitMenu''.
The menu is now ready to be tested. Press the '''F5'' key to build and run the application. When it appears, click on the File and Edit menus to confirm that they appear as you intended.
== Deleting and Moving Menu Items ==
To delete a menu item in Visual Studio, simply right click on the item and select ''Delete'' from the popup menu. To move an item within the same menu, click and drag the item to the new position by holding down the mouse button. Release the button when the mouse pointer reaches the new location. To move an item from one menu to another, first right click over the menu item, select ''Cut'' from the popup menu. Next, click on the new menu to which you wish to move the item and, with the mouse position on the menu item you wish to appear ''below'' the new item, right click and select ''Paste''.
== Assigning Keyboard Shortcuts to Menu Items ==
It is conventional to allow menu items to be selected using the keyboard using what are know as ''keyboard shortcuts''. These are key sequences that typically involve pressing a key whilst holding down the ''Ctrl'', ''Alt'' or ''Shift'' key.
Keyboard shortcuts are defined by setting the ''ShortcutKeys'' property of a menu item object. For example, to configure the Exit menu item to use ''Ctrl-X'' select the menu item and click in the value field of the ''ShortcutKeys'' property in the Visual Studio Properties panel. A panel will appear providing the option to select ''Ctrl'', ''Shift'' or ''Alt'' and also the key to be pressed in conjunction. Use this panel to configure the ''Ctrl+X'' key sequence for this menu item.
== Programming Menu Items in C# ==
Now that we have designed a menu system in Visual Studio, the next step is to make the menu items do something when they are selected by a user. This is achieved using the event procedures of the individual menu options. We will demonstrate this using our example by wiring up the Exit menu option so that it closes the application, and by writing an event procedure for the ''Save on Exit'' menu option to change the checked status of the ''Checked'' menu item.
We will begin by writing a C# event procedure for when the Exit menu option is selected. In Visual Studio click on the ''File'' menu so that the menu drops down and double click on the ''Exit'' menu option. Visual Studio will subsequently display the ''Click'' event procedure for this menu item. All we need to do is add a Close() call to this procedure to exit the application:
<pre>
private void exitToolStripMenuItem_Click(object sender, EventArgs e)
{
Close();
}
</pre>
Having made the appropriate change, press the '''F5''' key to build and run the application. Selecting the ''Exit'' option from the File menu should now cause the application to close. Restart the application and try the ''Ctrl+X'' keyboard shortcut to Exit the application.
The final step is to write some C# code to change the setting of the ''SaveOnExitMenu'' object such that selecting the option in the menu changes the checked status. To achieve this, double click on the ''Save On Exit'' in the ''Edit'' menu to display the ''Click'' event procedure for this object. Enter the following C# code to invert the current setting of the ''Checked'' property of the ''SaveOnExitMenu'' object:
<pre>
private void SaveOnExitMenuItem_Click(object sender, EventArgs e)
{
SaveOnExitMenuItem.Checked = !SaveOnExitMenuItem.Checked;
}
</pre>
Press '''F5''' to build and run the application once again. When ''Save on Exit'' is clicked, the checked status will change to either, set or unset depending on the current setting.