Covers Exam Objective: 70-526 – Create and configure a MenuStrip component on a Windows Form.

One of the challenges with designing graphical user interfaces is to present the controls and information when the user needs them and at the same time not clutter the interface. Most applications however, include a wide variety of options and functions that need to be within reach at all times. A familiar way to allow users access to common functions in Windows applications is to use menus.

There are many different types of menus being used in today’s software of which several are available as components in the .NET framework. By creating custom controls, extending existing controls, and/or by using GDI+, you can create an endless range of menus that differ in look and functionality. In this article, I will cover the two exam objectives listed above, so in particular the MenuStrip component.

The MenuStrip represents the most common menus in Windows apps – the main menu at the top that often starts with a File menu option. It is derived from the ToolStrip component. Just to make sure we all know up front what we’re talking about, the following image depicts the menu in Visual Studio VB Express edition:

As we all know, most of Microsoft’s own software often includes a huge amount of menu options. There is a good chance the first app(s) you create do not contain that many options and then a MenuStrip may seem like overkill. However, besides being a familiar component for users, it can give the GUI some weight and it can easily be extended because of its hierarchical structure. So if the functionality of your application is likely to expand over time, using a MenuStrip from the start can prevent you from having to make major changes to the GUI.

The MenuStrip itself is just an empty container similar to a Panel. To create menu options, you can add the following objects to the MenuStrip.

ToolStripMenuItem – This is the most commonly used control in the MenuStrip. It can execute an action directly, or function as a parent for a submenu with more MenuStrip objects.

ToolStripComboBox – Just like a regular ComboBox, the ToolStripComboBox has a property called Items, which is a string collection that holds the items that appear in the dropdown list.

ToolStripTextBox – This is an object you won’t find in most MenuStrips because it’s not a typical ‘menu’ item. Menus generally allow you to choose options, while a TextBox allows the user to enter text. It can be used to allow the user to enter formulas, type in search strings, or to set properties for example.

ToolStripSeparator – Besides arranging menu items in a hierarchical structure by creating submenus, items in a menu can also be logically grouped together by using separators.

In the rest of this article, I will walk you through an example project creating a Form with a MenuStrip and explore some of the common properties. Finally, we will have a look at the second exam objective listed above, and see how we can change the displayed menu structure programmatically.

MenuStrip Example Project

1. Start Visual Studio and start a new project with the name MenuStripExample. Drag a MenuStrip from the Menus & Toolbars section of the Toolbox to Form1. The Dock property of a MenuStrip is set to Top by default so you should now have a light gradient strip at the top of the form. Additionally, below the Form1 in Designer mode should now appear an icon for MenuStrip1, which provides an easy method to select it and modify its properties.

There are several different ways you can add one of the earlier mentioned objects to the MenuStrip. Programmatically, for example at runtime as we’ll cover later on, or at design time. A mentionable advantage of creating menu options by typing directly in the ‘Type Here’ field is that the ToolStripMenuItem will automatically be named accordingly. For example, if you type ‘File’ as the in the ‘Type Here field’, a new ToolStripMenuItem will be created with its Name set to FileToolStripMenuItem and its Text property to ‘File’. If you would right-click on the menu and choose Insert to add an item, it will get the name of the item and a sequence number, for example ToolStripMenuItem1.

2. Let’s add some ToolStripMenuItem controls to the MenuStrip to give it some shape. Select the MenuStrip, type ‘&File’ in the ‘Type Here’ field and press Enter. This will create the FileToolStripMenuItem. Adding a ‘&’ in the text of a ToolStripMenuItem allows a user to use the ALT key and the character following the ‘&’, which will be underlined, to choose the menu option.

3. Select the File ToolStripMenuItem you just created. A ‘Type Here’ field will now be available next to the File menu and also one below it. Click on the one below it, and type ‘New’. Repeat this process to create ‘&Open…’, ‘&Save As…’, and ‘E&xit’. Right-click the Exit menu item, choose Insert and then Separator. You’re menu should now look like the one shown on the right:

Although it is not a rule all developers live by, it’s common practice to add three dots to menu items that open a dialog. For example, the Open… and Save As… menu items usually open a FileDialog allowing the user to select and enter a path and file name.

As I mentioned earlier, the ToolStripMenuItem can be used as a menu option that performs an action directly, or can function as a parent for a submenu with more MenuStrip objects. For example, you could click on the menu item New and make it a parent for a new submenu by adding menu items to it.

To have a menu item actually perform an action, you need to add code to the Click event of the menu item. The easiest way to do this is to double-click on a menu item. For example, double-clicking on the menu item Exit will open Code view and add the following code to Form1:

    Private Sub ExitToolStripMenuItem_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles ExitToolStripMenuItem.Click

    End Sub

In this case, you could simply add the following code in the sub to enable to make the Exit menu item functional:

        'close this form
        Me.Close()

Shortcut Keys

In addition to the characters marked with the ‘&’ to enable ALT key combinations, you can assign custom shortcut key combinations to menu options by setting the ShortcutKeys property. When the user presses this key combination, the Click event of the menu item will be executed, so you don’t need to write any code to capture key presses. The shortcut keys are displayed in the menu by default, but you can prevent this by setting the ShowShortcutKeys property to True. The ShortcutKeyDisplayString property allows you to specify text to display instead of the shortcut keys.

Images

Another way to make your menu more appealing is to add icons to the menu options. You can do this by right-clicking a menu item and clicking Set Image or by setting the ToolStripMenuItem’s Image property directly. PNG is reliable image format for providing good and consistent results.

Checked Menu Items

Most menu items perform an action such as opening a dialog or running a method or function, but some menu items are more like settings that can be turned on and off. The ToolStripMenuItem has two properties that allow you to implement this type of behavior:

CheckOnClick – As the name implies, setting this property to True will check the menu item when the users clicks on it.

Checked – This property allows you to set the default, and read whether the menu item is checked or not after the user clicked.

Instead of using the Click event, you can use the CheckedChanged event of the menu item to execute code when the user checks/unchecks the menu item.

ComboBox and TextBox items

The two other objects that can be added to a MenuStrip are the ComboBox and the TextBox. Both can be used to display information to the user, but also to allow the user to edit information and choose options by typing them. Click on the dropdown arrow next to the ‘Type Here’ item and choose TextBox or ComboBox to add them to the menu.

Common use for ComboBoxes in menus is allowing a user to select a value from a dynamic list. For example, a ComboBox could be used to show the Fonts installed and available on the local computer. (For each font on the computer, add its name to the ComboBox.Items collection.) Another example is a list of custom Styles created by the users.

Comboxes and Textbox MenuStrip objects do not have a label. To indicate the function of the menu items to users when the user hovers over them, you can use a ToolTip. An easy way to do that is setting the MenuStrip property ShowItemTooltips to True and specify the text in the ToolTipText property of the menu items for which you want to provide a ToolTip. Instead of setting the ToolTipText property, you can set a menu items’ AutoToolTip property to True, which will cause the value of the Text property to show up in the ToolTip.

Appearance

Unless you are creating a form with custom graphics and/or GDI to get your own unique look, it is usually best to leave settings related to appearance to the default because it ensures your app will look good and as expected on all Windows supported Windows versions, including Vista. That said, there are several ways you can change the appearance of a MenuStrip and its items:

• Setting the BackgroundImage or BackColor property for the MenuStrip or items in it. Try ‘tiling’ an image of 24 pixels high and 1 pixel wide for example.
• Setting the RenderMode property to standard will remove the XP style and show a simple flat MenuStrip instead.
• Setting the LayoutStyle allows you to create vertical menus for example.
• Setting the GripStyle to True will add a small grip to the MenuStrip indicating it can be dragged to another position.
• Painting the MenuStrip and/or menu items using GDI.

Merging Menus

Just like the ToolStrip component, from which the MenuStrip is actually derived, you can Merge menus together programmatically – even different types of menus. To merge one MenuStrip with another, use the ToolStripManager.Merge method.

ToolStripManager.Merge(sourceMenuStrip, targetMenuStrip)

The above will attempt to merge the menu items of sourceMenuStrip with the targetMenuStrip, however, how and whether they are actually merged depends on the MergeAction property of the menu items. Following lists the valid values for the MergeAction property:

• Append – Appends the item from the source MenuStrip to the end of the target MenuStrip.
• Insert – Inserts the item on the target MenuStrip at the position specified in the MergeIndex property of the menu item on the source MenuStrip.
• Replace – If a matching item is found in the target MenuStrip, replaces the target with the source item.
• Remove – If a matching item is found in the target MenuStrip, it is removed.
• MatchOnly – Looks for a match but doesn’t take any action. As the Replace and Remove actions, a match occurs when the Text property of the source menu item is the same for the target menu item.

If you want to prevent a MenuStrips from being merged, set the AllowMerge property of the MenuStrip to False.