Context Menu in C#

ContextMenuStrip Control

The ContextMenuStrip control provides functionality of context menus in Visual Studio 2010 and .NET 4.0. A context menu is also known as a popup menu. A context menu appears when you right click on a Form or on a control.

In the previous versions of .NET, the context menu functionality was provided by the ContextMenu control. In .NET 4.0, the ContextMenu control is replaced with the ContextMenuStrip control.

In this article, we will discuss how to build context menu enabled Windows applications using ContextMenuStrip control in Visual Studio 2010.

Creating a Context Menu

To create a ContextMenuStrip control at design-time, you simply drag and drop a ContextMenuStrip control from Toolbox onto a Form in Visual Studio. After you drag and drop a ContextMenuStrip on a Form, the ContextMenuStrip1 is added to the Form and looks like Figure 1. Once a ContextMenuStrip is on the Form, you can add menu items and set its properties and events. If you noticed in Figure 1, first item of the ContextMenuStrip has text Type Here. You can actually start typing here.

 

Figure 1

If you notice in Figure 2, I type couple of menu items. As soon as you select a menu item, you will see automatically sub menu items areas are editable and you can keep going as many levels you like. I add two menu items and two sub menu items.

Figure 2

We can also create context menus at run-time. Even though you can create a ContextMenuStrip at run-time, it is recommended you create at design-time and then set the properties and methods at run-time.

First step to create a dynamic ContextMenuStrip is to create an instance of ContextMenuStrip class. The following code snippet creates a ContextMenuStrip control object.

C# Code:

ContextMenuStrip PopupMenu = new ContextMenuStrip();

 

VB.NET Code:

 

Dim PopupMenu As New ContextMenuStrip()

 

In the next step, you may set properties of a ContextMenuStrip control. The following code snippet sets background color, foreground color, Text, Name, and Font properties of a ContextMenuStrip.

C# Code:

PopupMenu.BackColor = Color.OrangeRed;

PopupMenu.ForeColor = Color.Black;

PopupMenu.Text = "File Menu";

PopupMenu.Font = new Font("Georgia", 16);

 

VB.NET Code:

 

PopupMenu.BackColor = Color.OrangeRed

PopupMenu.ForeColor = Color.Black

PopupMenu.Text = "File Menu"

PopupMenu.Font = New Font("Georgia", 16)

 

Once the ContextMenuStrip control is ready with its properties, the next step is to add the ContextMenuStrip to a Form. To do so, first we set ContextMenuStrip property and then use call the Show method to display the ContextMenuStrip.

 

The following code snippet adds a ContextMenuStrip control to the current Form and displays it when you right click on the Form.

 

C# Code:

this.ContextMenuStrip = PopupMenu;

PopupMenu.Show();

 

VB.NET Code:

 

Me.ContextMenuStrip = PopupMenu

PopupMenu.Show()

Setting ContextMenuStrip Properties

After you place a ContextMenuStrip control on a Form, the next step is to set properties.

The easiest way to set properties is from the Properties Window. You can open Properties window by pressing F4 or right click on a control and select Properties menu item. The Properties window looks like Figure 2.

Figure 2

Name

Name property represents a unique name of a ContextMenuStrip control. It is used to access the control in the code. The following code snippet sets and gets the name and text of a ContextMenuStrip control.

C# Code:

PopupMenu.Name = "PopupMenu";

 

VB.NET Code:

 

PopupMenu.Name = "PopupMenu"

Font

Font property represents the font of text of a ContextMenuStrip control. If you click on the Font property in Properties window, you will see Font name, size and other font options. The following code snippet sets Font property at run-time.

C# Code:

PopupMenu.Font = new Font("Georgia", 16);

 

VB.NET Code:

 

PopupMenu.Font = New Font("Georgia", 16)

Background and Foreground

BackColor and ForeColor properties are used to set background and foreground color of a ContextMenuStrip respectively. If you click on these properties in Properties window, the Color Dialog pops up.

Alternatively, you can set background and foreground colors at run-time. The following code snippet sets BackColor and ForeColor properties.

C# Code:

PopupMenu.BackColor = Color.OrangeRed;

PopupMenu.ForeColor = Color.Black;

 

VB.NET Code:

 

PopupMenu.BackColor = Color.OrangeRed

PopupMenu.ForeColor = Color.Black

 

The new ContextMenuStrip with background and foreground looks like Figure 4.

 

Figure 4

ContextMenuStrip Items
 

A Menu control is nothing without menu items. The Items property is used to add and work with items in a ContextMenuStrip. We can add items to a ContextMenuStrip at design-time from Properties Window by clicking on Items Collection as you can see in Figure 5.

Figure 5

When you click on the Collections, the String Collection Editor window will pop up where you can type strings. Each line added to this collection will become a ContextMenuStrip item. See Figure 6.

Figure 6

Now you may notice from Figure 6, each of the menu items have its own properties and you can set them anyway you like. For example, you can have a background, foreground or images setup for each item or you can also add a CheckBox and add a tooltip to an item.

There is a new feature added the ContextMenuStrip that was not available in previous version. Now you can add a MenuItem, ComboBox, Separator, or a TextBox controls to a ContextMenu. You can also give these menu items their Names and control from the code the way you like. How cool is that? We will discuss these controls in more details in the following section in this chapter.

A ToolStripMenuItem represents a menu items. The following code snippet creates a menu item at run-time and sets its properties.                        

C# Code:

// Create a Menu Item

ToolStripMenuItem FileMenu = new ToolStripMenuItem("File");

FileMenu.BackColor = Color.OrangeRed;

FileMenu.ForeColor = Color.Black;

FileMenu.Text = "File Menu";

FileMenu.Font = new Font("Georgia", 16);

FileMenu.TextAlign = ContentAlignment.BottomRight;

FileMenu.ToolTipText = "Click Me";

 

VB.NET Code:

 

Dim FileMenu As New ToolStripMenuItem("File")

FileMenu.BackColor = Color.OrangeRed

FileMenu.ForeColor = Color.Black

FileMenu.Text = "File Menu"

FileMenu.Font = New Font("Georgia", 16)

FileMenu.TextAlign = ContentAlignment.BottomRight

FileMenu.TextDirection = ToolStripTextDirection.Vertical90

FileMenu.ToolTipText = "Click Me"

 

Once a menu item is created, we can add it to the main menu by using ContextMenuStrip.Items.Add method. The following code snippet adds FileMenu item to the PopupMenu.

 

C# Code:

PopupMenu.Items.Add(FileMenu);

 

VB.NET Code:

 

PopupMenu.Items.Add(FileMenu)

 

Adding Menu Item Click Event Handler

The main purpose of a menu item is to add a click event handler and write code that we need to execute on the menu item click event handler. For example, on File >> New menu item click event handler, we may want to create a new file.

 

The simplest way to add an event handler, you double click on a menu item and the designer will add a click event handler for that menu item. You can also see and update it in the Events window as you can see in Figure 7.

 

Figure 7

 

We can also define and implement an event handler dynamically. The following code snippet defines and implements these events and their respective event handlers.

 

C# Code:

FileMenu.Click += new System.EventHandler(this.FileMenuItemClick);

 

private void FileMenuItemClick(object sender, EventArgs e)

{

    MessageBox.Show("File menu item clicked");

}

 

 

VB.NET Code:

 

Dim FileMenuItem As New ToolStripMenuItem("File", Nothing, _

                New EventHandler(AddressOf FileMenuItemClick))

 

Private Sub FileMenuItemClick (ByVal sender As Object, ByVal e As EventArgs)

        MessageBox.Show("File menu item clicked!")

End Sub

 

Display Image in a Menu Item

The Image property is used to set an image as part of a menu item with the text. If you go to the designer and select Image property, you will be asked to add an image to the application and the selected image will be displayed in the menu item before the text.

A menu item with an image looks like Figure 8.

Figure 8

We can also set the Image property at run-time. The following code snippet sets an image as a part of a menu item.

C# Code:

FileMenu.Image = Image.FromFile("C:\\Images\\Garden.jpg");

 

VB.NET Code:

 

FileMenu.Image = Image.FromFile("C:\Images\Garden.jpg")

Setting Image a Menu Item Background

The BackgroundImage property is used to set an image as background of a menu item. The BackgroundImageLayout is used to set the layout of the image. The following code snippet sets an image as background of a menu item.
 

C# Code:

FileMenu.BackgroundImage = Image.FromFile("C:\Images\Garden.jpg");

FileMenu.BackgroundImageLayout = ImageLayout.Tile;

 

VB.NET Code:

 

FileMenu.BackgroundImage = Image.FromFile("C:\Images\Garden.jpg")

FileMenu.BackgroundImageLayout = ImageLayout.Tile

Vertical Text in Menu Items

By default, the text of a menu is horizontal. You can change the direction of menu items by setting TextDirection property that is a type of ToolStrupTextDirection. The following code snippet sets the text direction of a menu item to vertical.

C# Code:

FileMenu.TextDirection = ToolStripTextDirection.Vertical90;

 

VB.NET Code:

 

FileMenu.TextDirection = ToolStripTextDirection.Vertical90

Set Tooltip of a Menu Item

The ToolTipText property is used to set the tooltip of a menu items.

C# Code:

FileMenu.ToolTipText = "Click Me";

 

VB.NET Code:

 

FileMenu.ToolTipText = "Click Me"

Menu Grip

By default, menus do not have a grip but we can show a grip by setting GripStyle property to visible. The following code snippet makes a menu grip visible.

C# Code:

PopupMenu.GripStyle = ToolStripGripStyle.Visible;

 

VB.NET Code:

 

PopupMenu.GripStyle = ToolStripGripStyle.Visible

 

Summary

In this article, we discussed discuss how to create menus using the ContextMenuStrip control. First we discussed how to create menus at design-time and run-time. After that we saw, how to set menus properties and click event handlers.