Saturday, September 17, 2011

C# - MenuStrip and ContextMenuStrip controls

1. Introduction to Menu Strips

Strip is a relatively narrow piece of something. Dot net has three important strip controls namely MenuStrip, StatusStrip and ToolStrip. In this article we will start with the menustrip control.

All the strips controls accommodate some other UI elements in it. A menu strips allows you to add Menu and Menu allows you to add menu items. Similarly the toolstrip control allows you add one or more tool bar buttons in it. OK, let us go to the MenuStrip. Look at the below screen shot:



A Menubar, dot net calls it Menu strip can accommodate multiple Menus. In the above picture only File menu is added to it. "Menu Items" are usually added to the menu. Say for example in the above picture, the Exit and Just for Demo are menu items. Menu items are usually linked to the command handler and when you click the menu item the corresponding handler gets called.

If a menu item is linked with one more menu, then the resulting menu is called as Sub-Menu. The above picture shows one such sub-menu with two menu items in it.

In this example, we will create the above shown form with menu and menu items. Then we will provide some simple handler for it.

2. Adding menu Strips control

The menu strip is grouped in the toolbox under the Menus & Toolbars group. This is shown in the below picture. To use menustrip in the form drag the menustrip from the toolbox and drop it to the form.



In the below video, a menu strip is added to the form. To add a separator in the menu just type the hyphen (-) for the menu name. The placement ampersand (&) in the menu item name displays underline for letter next to it. This under line is displayed at runtime when alt key is pressed and typing the letter with underline (alt key is still kept down) will call the menu item handler. The usage of ampersand in the menu item with alt key is shown below:



So in the above picture in place of clicking the Exit menu item, you can call the handler by using keys Alt+F,X

Video : Adding MenuStrip and setting the properties



3. Adding Shortcut key MenuItems

Short cut key is one more way to call the handler for menu item using the keyboard keys. This differs from the alt+key combination in such a way that Alt+key combination always opens the Menu to give a clue about the key combinations by displaying the underline for the letters. You may already observe it when doing Alt+FX combination. The short keys not even open the menu and when required combination met the handler for menu item gets called. The video shows adding the short cut key Ctrl+H to the menu item Say Hello. To assign the short cut key for the menu item, use the shortcutkeys property of the menu item.


Video: Adding Shortcut keys to MenuItem


4. Adding image to the MenuItem

You can find some useful images for menu items in the path (It may vary in your system based on your installation path) Program Files\Microsoft Visual Studio 8\Common7\VS2005ImageLibrary\VS2005ImageLibrary\bitmaps

To add the image first the required image is added to the resource. Then from the resource the image is picked and assigned to the menu item. The "Image Property" of the menu item is used to assign the image to a menu item.


Video: Adding Image to Menu Item



5. Adding context menu

The context menu can be added to the form the same way you added the MenuStrip control. This time we should add the "ContextMenuStrip Control" to the form. Unlike menu strip control, the context menu can have only one Menu with one or more menu items in it. Menu items to the context menu are added in the way you do it for the menu strips. The important step is assigning the context menu to the form and you can do that by using the contextmenu property of the windows form.

Once the context menu is assigned to the form, during the runtime it can be displayed by right clicking the mouse in the form area. This is shown below:



Note: Adding the handler code for menu item shown in the video is same for Menu strip also.


Video: Adding Context menu to form




Video : Adding Handler to Menu Item




6. Code for All handlers

Hope explanation is not required as it is just a piece of code to check the handler is called or not.


//001_MenuStrips : Handlers for Menu Strips
private void sayHaiToolStripMenuItem_Click(object sender, EventArgs e)
{
    MessageBox.Show("Hai");
}

private void sayHelloToolStripMenuItem_Click(object sender, EventArgs e)
{
    MessageBox.Show("Hello");
}

private void exitToolStripMenuItem_Click(object sender, EventArgs e)
{
    this.Close();
}

// 002_MenuStrips: Handler for Context Menu
private void mnuItemExit_Click(object sender, EventArgs e)
{
    MessageBox.Show("Sample going to exit");
    this.Close();
}
Source Code : Download
Like this site? Tell it to your Firend :)