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 3
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.