Home

Visual Characteristics of Menu Items
 

Visual Assistance With Menu Items
 

Introduction

Here is an example of a starting menu:

 
#include <windows.h>

#using <System.dll>
#using <System.Drawing.dll>
#using <System.Windows.Forms.dll>

using namespace System;
using namespace System::Drawing;
using namespace System::Windows::Forms;

public ref class CExercise : public Form
{
    MenuStrip ^ mnuMain;

    ToolStripMenuItem ^ mnuFile;
    ToolStripMenuItem ^ mnuFileNew;

public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
        mnuMain = gcnew MenuStrip;
        Controls->Add(mnuMain);

        mnuFile = gcnew ToolStripMenuItem("File");
        mnuFileNew = gcnew ToolStripMenuItem("New");

        mnuFile->DropDownItems->Add(mnuFileNew);
        mnuMain->Items->Add(mnuFile);
    }
};

int APIENTRY WinMain(HINSTANCE hInstance,
		     HINSTANCE hPrevInstance,
		     LPSTR lpCmdLine,
		     int nCmdShow)
{
    Application::Run(gcnew CExercise());

    return 0;
}

This would produce:

Main Menu

After creating a menu (main menu and contextual menu), there are various actions you can perform to improve it and there are many ways you can enhance the user's experience with your application. Menus provide various features such as access keys and shortcuts. There are also other things you can do such as grouping menus. Although some of these actions are not required to make an application useful, they can be necessary to make it more professional.

ApplicationPractical Learning: Introducing Menu Appearance
  1. Start Microsoft Visual Studio
  2. Create a new Windows Forms Application named spr3 (spr stands for Solas Property Rental)
  3. Change the properties of the form as follows:
    Text: Solas Property Rental
    StartPosition: CenterScreen
  4. In the Solution Explorer, right-click Form1.h and click Rename
  5. Type SolasPropertyRental.h and press Enter
  6. In the Menus & Toolbars section of the Toolbox, click the MenuStrip button and click the form
  7. While the menu strip is still selected, in the Properties window, click (Name) and type mnuMain
  8. In the Menus & Toolbars section of the Toolbox, click the ContextMenuStrip button and click the form
  9. While the menu strip is still selected, in the Properties window, click (Name) and type cmsProperties
  10. On the form, click the list view
  11. In the Properties window, click ContextMenuStrip and select cmsProperties

Access Keys

You may notice that some menu items have a letter underlined. Using this letter allows the user to access the menu using a keyboard. For example, if the letter F is underline in a File menu as in File, the user can access the File menu by pressing the Alt, then the F keys. To create this functionality, choose a letter on the menu item and precede it with the & character. For example, &File would produce File. You can apply the same principle if you are programmatically creating the menu. Here are two examples:

#include <windows.h>

#using <System.dll>
#using <System.Drawing.dll>
#using <System.Windows.Forms.dll>

using namespace System;
using namespace System::Drawing;
using namespace System::Windows::Forms;

public ref class CExercise : public Form
{
private:
	ToolStripMenuItem ^ mnuFile;
	ToolStripMenuItem ^ mnuNew;

public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
	mnuFile = gcnew ToolStripMenuItem(L"&File");
	mnuNew  = gcnew ToolStripMenuItem(L"&New");
    }
};

Main Menu

Practical LearningPractical Learning: Using Access Keys
  1. Under the form, click mnuMain
  2. In the Properties window, click Items and click its ellipsis button
  3. In the Items Collection Editor, make sure MenuItem is selected in the Select Item And Add To List Below combo box and click Add
  4. While toolStripMenuItem1 is selected in the Members combo box, in the right list, change the following characteristics:
    Text: &File
    (Name): mnuFile
  5. Still in the right list, click DropDownItems and click its ellipsis button
  6. In the Items Collection Editor, make sure MenuItem is selected in the Select Item And Add To List Below combo box and click Add
  7. While toolStripMenuItem1 is selected in the Members combo box, in the right list, change the following characteristics:
    Text: &Open
    (Name): mnuFileOpen
  8. In the Items Collection Editor (mnuFile.DropDownItems), click OK
  9. In the Items Collection Editor, in the Select Item And Add To List Below combo box, make sure MenuItem is selected in the  and click Add
  10. While toolStripMenuItem1 is selected in the Members combo box, in the right list, change the following characteristics:
    Text: &Tools
    (Name): mnuTools
  11. Still in the right list, click DropDownItems and click its ellipsis button
  12. In the Items Collection Editor, make sure MenuItem is selected in the Select Item And Add To List Below combo box and click Add
  13. While toolStripMenuItem1 is selected in the Members combo box, in the right list, change the following characteristics:
    Text: &Flip
    (Name): mnuToolsFlip
  14. In the Select Item And Add To List Below combo box, make sure MenuItem is selected in the and click Add
  15. While toolStripMenuItem1 is selected in the Members combo box, in the right list, change the following characteristics:
    Text: &Mirror
    (Name): mnuToolsMirror
  16. In the Items Collection Editor (mnuTools.DropDownItems), click OK
  17. In the Items Collection Editor, click OK

Shortcuts

A shortcut is a key or a combination of keys that the user can press to perform an action that can also be performed using a menu item. When creating a menu, to specify a shortcut, use the ShortcutKeys property.

To visually specify a shortcut, in the menu designer, click the menu item. In the Properties window, click ShortcutKeys and click the arrow of the field, a window would come up:

Shortcuts

To specify just a letter for the shortcut, you can click the arrow of the combo box on the left side of the Reset button. A list would come up from which you can select the desired letter:

Shortcuts

You are probably more familiar with shortcuts made of combinations of keys, such as Ctrl + N, Alt + F6, or Ctrl + Alt + Delete. To visually create such a shortcut, click the check box(es) and select the desired letter.

If you have used applications like Microsoft Word or Adobe Photoshop, you may know that they don't show all of their shortcuts on the menu. If you want to hide a shortcut, after specifying it, in the Properties window, set the ShowShortcutKeys property to False.

To programmatically specify a shortcut, assign a key or a combination of keys to the ShortcutKeys property of the ToolStripMenuItem class. The ShortcutKeys property is of type Keys, which is an enumeration of the various keys of a keyboard recognized by Microsoft Windows. Here is an example:

public ref class CExercise : public Form
{
private:
    MenuStrip ^ mnuMain;
    ToolStripMenuItem ^ mnuFile;
    ToolStripMenuItem ^ mnuFileNew;
    ToolStripMenuItem ^ mnuFileExit;
    ToolStripMenuItem ^ mnuFormat;
    ToolStripMenuItem ^ mnuFormatFont;

public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
	mnuMain = gcnew MenuStrip;
	mnuFile = gcnew ToolStripMenuItem(L"&File");
	mnuFileNew = gcnew ToolStripMenuItem(L"&New");

	mnuFileExit = gcnew ToolStripMenuItem(L"E&xit");

	mnuFormat = gcnew ToolStripMenuItem(L"For&mat");
	mnuFormatFont = gcnew ToolStripMenuItem(L"Fo&nt");
	mnuFormatFont->ShortcutKeys = Keys::F4;

	mnuFile->DropDownItems->Add(mnuFileNew);
	mnuFile->DropDownItems->Add(mnuFileExit);
	mnuMain->Items->Add(mnuFile);

	mnuFormat->DropDownItems->Add(mnuFormatFont);
	mnuMain->Items->Add(mnuFormat);

	Controls->Add(mnuMain);
    }
};

This would produce:

To create a shortcut that is a combination of keys, use the bit manipulation operator OR operator represented by |. Here is an example:

#include <windows.h>

#using <System.dll>
#using <System.Drawing.dll>
#using <System.Windows.Forms.dll>

using namespace System;
using namespace System::Drawing;
using namespace System::Windows::Forms;

public ref class CExercise : public Form
{
private:
	MenuStrip ^ mnuMain;
	ToolStripMenuItem ^ mnuFile;
	ToolStripMenuItem ^ mnuFileNew;
	ToolStripMenuItem ^ mnuFileExit;
	ToolStripMenuItem ^ mnuFormat;
	ToolStripMenuItem ^ mnuFormatFont;

public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
	mnuMain = gcnew MenuStrip;
	mnuFile = gcnew ToolStripMenuItem(L"&File");
	mnuFileNew = gcnew ToolStripMenuItem(L"&New");
	mnuFileNew->ShortcutKeys = Keys::Control | Keys::N;

	mnuFileExit = gcnew ToolStripMenuItem(L"E&xit");

	mnuFormat = gcnew ToolStripMenuItem(L"For&mat");
	mnuFormatFont = gcnew ToolStripMenuItem(L"Fo&nt");
	mnuFormatFont->ShortcutKeys = Keys::F4;

	mnuFile->DropDownItems->Add(mnuFileNew);
	mnuFile->DropDownItems->Add(mnuFileExit);
	mnuMain->Items->Add(mnuFile);

	mnuFormat->DropDownItems->Add(mnuFormatFont);
	mnuMain->Items->Add(mnuFormat);

	Controls->Add(mnuMain);
    }
};

int APIENTRY WinMain(HINSTANCE hInstance,
		     HINSTANCE hPrevInstance,
		     LPSTR lpCmdLine,
		     int nCmdShow)
{
    Application::Run(gcnew CExercise());

    return 0;
}

This would produce:

Normally, when you have associated a shortcut with a menu item, when the user displays the menu, the shortcut would appear. In some applications, you may want to hide the shortcut. To support this, the ToolStripMenuItem class is equipped with the Boolean ShowShortcutKeys property. The default value of this property is true. If you want to hide the shortcut, you can set this property to false.

Practical LearningPractical Learning: Creating Shortcuts
  1. Under the form, click mnuMain.
    On the form, click File and click Open
  2. In the Properties window, click ShortcutKeys and click the arrow of its combo box
  3. In the window that appears, click the Ctrl check box
  4. Click the arrow of the combo box next to Reset, scroll down and select O
  5. On the form, click Tools
  6. In the Properties window, click DropDownItems and click its ellipsis button
  7. In the Members list of the Items Collection Editor, click mnuToolsFlip
  8. In the right list, click ShortcutKeys and click the arrow of its combo box
  9. In the window that appears, click the Ctrl check box
  10. Click the arrow of the combo box next to Reset, scroll down and select L
  11. In the Members list, click mnuToolsMirror
  12. In the right list, click ShortcutKeys, type Ctrl+M and press Enter
  13. In the Items Collection Editor (mnuTools.DropDownItems), click OK
     
    Menu Item Menu Item

Three Periods

When a user has clicked a menu item, an action is supposed to occur. In some cases, an intermediary action is necessary before performing or completing the action. To indicate that an intermediary action is needed for the action related to the menu item, Microsoft standards suggest that the menu's text be followed by three periods. For example, in WordPad, if you want to display the date or the time or both on a document, you must open a dialog box that would present various options for you to choose how the date/time should be displayed. To indicate that you will perform a primary action before displaying the value, the menu that leads to it shows three periods:

The 3-periods menu

In this case, when you click the menu item, a dialog box would come up for you to select the desired value.

There is no programmatic relationship between the application and the menu item that displays three periods. It is only a suggestion to show them. Therefore, when creating a menu item, if you know that an intermediary action will be used to perform or complete the actual action, add three periods on the right side of its text. Here is an example:

public ref class CExercise : public Form
{
private:
    MenuStrip ^ mnuMain;
    ToolStripMenuItem ^ mnuSelect;
    ToolStripMenuItem ^ mnuSelectColor;

public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
        mnuMain = gcnew MenuStrip;

	mnuSelect = gcnew ToolStripMenuItem(L"&Select");
	mnuSelectColor = gcnew ToolStripMenuItem(L"Background Color...");

	mnuSelect->DropDownItems->Add(mnuSelectColor);
	mnuMain->Items->Add(mnuSelect);

	Controls->Add(mnuMain);
    }
};

This would produce:

Because the three periods indicate to the user that an intermediary action will be performed, when implementing the code for the menu item, make sure you provide that intermediary action. Here is an example:

#include <windows.h>

#using <System.dll>
#using <System.Drawing.dll>
#using <System.Windows.Forms.dll>

using namespace System;
using namespace System::Drawing;
using namespace System::Windows::Forms;

public ref class CExercise : public Form
{
private:
	MenuStrip ^ mnuMain;
	ToolStripMenuItem ^ mnuSelect;
	ToolStripMenuItem ^ mnuSelectColor;

	void SelectBackgroundColor(Object ^ sender, EventArgs ^ e);

public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
        mnuMain = gcnew MenuStrip;

	mnuSelect = gcnew ToolStripMenuItem(L"&Select");
	mnuSelectColor = gcnew ToolStripMenuItem(L"&Background Color...");
	mnuSelectColor->Click +=
		gcnew System::EventHandler(this,
		&CExercise::SelectBackgroundColor);

	mnuSelect->DropDownItems->Add(mnuSelectColor);
	mnuMain->Items->Add(mnuSelect);

	Controls->Add(mnuMain);
    }
};

void CExercise::SelectBackgroundColor(Object ^, EventArgs ^)
{
	ColorDialog ^ dlgColor = gcnew ColorDialog;

	if( dlgColor->ShowDialog() == ::DialogResult::OK )
		BackColor = dlgColor->Color;
}

int APIENTRY WinMain(HINSTANCE hInstance,
		     HINSTANCE hPrevInstance,
		     LPSTR lpCmdLine,
		     int nCmdShow)
{
    Application::Run(gcnew CExercise());

    return 0;
}

Practical LearningPractical Learning: Adding Three Periods to a Menu Items
  1. Under the from, click mnuMain and, on the form, click File
  2. On the form, click Open. In the Properties window, click Text and, on the right side of &Open, add three periods to get &Open...
 
 
 

Grouping Menu Items
 

Menu Separators

As we will see in later sections, there are various ways you can make a menu look good and you have many options to configure menu items. One of the ways you can manage menu items is to group them in small entities of your choice. You can do this either for the looks or for aesthetic reasons.

A menu separator is a horizontal line among some menu items to visually divide them. Here is an example:

There are two reasons you would use a separator. You can use a separator just for aesthetic reasons, to make your menu look good. Another, more valuable reason, is to create groups of menu items and show their belonging together by showing a line separating one group from another.

To visually specify a separator, when creating the menu item, set its string to a simple -.

To support menu separators, the .NET Framework provides the ToolStripSeparator class, which is derived from ToolStripItem. To programmatically create a separator, declare a handle to ToolStripSeparator, initialize it using the gcnew operator, add it to the Items property of the ToolStripItem menu category that will hold the separator. Here is an example:

#include <windows.h>

#using <System.dll>
#using <System.Drawing.dll>
#using <System.Windows.Forms.dll>

using namespace System;
using namespace System::Drawing;
using namespace System::Windows::Forms;

public ref class CExercise : public Form
{
private:
    MenuStrip ^ mnuMain;
    ToolStripMenuItem  ^ mnuFile;
    ToolStripMenuItem  ^ mnuFileNew;
    ToolStripSeparator ^ mnuSeparator;
    ToolStripMenuItem  ^ mnuFileExit;
    ToolStripMenuItem  ^ mnuFormat;
    ToolStripMenuItem  ^ mnuFormatFont;

public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
	mnuMain = gcnew MenuStrip;
	mnuFile = gcnew ToolStripMenuItem(L"&File");
	mnuFileNew = gcnew ToolStripMenuItem(L"&New");
	mnuFileNew->ShortcutKeys = Keys::Control | Keys::N;
	mnuSeparator = gcnew ToolStripSeparator;

	mnuFileExit = gcnew ToolStripMenuItem(L"E&xit");

	mnuFormat = gcnew ToolStripMenuItem(L"For&mat");
	mnuFormatFont = gcnew ToolStripMenuItem(L"Fo&nt");
	mnuFormatFont->ShortcutKeys = Keys::F4;

	mnuFile->DropDownItems->Add(mnuFileNew);
	mnuFile->DropDownItems->Add(mnuSeparator);
	mnuFile->DropDownItems->Add(mnuFileExit);
	mnuMain->Items->Add(mnuFile);

	mnuFormat->DropDownItems->Add(mnuFormatFont);
	mnuMain->Items->Add(mnuFormat);

	Controls->Add(mnuMain);
    }
};

int APIENTRY WinMain(HINSTANCE hInstance,
		     HINSTANCE hPrevInstance,
		     LPSTR lpCmdLine,
		     int nCmdShow)
{
    Application::Run(gcnew CExercise());

    return 0;
}

This would produce:

 

Practical LearningPractical Learning: Creating Menu Separators
  1. Under the form, click mnuMain and, on the form, click File
  2. Under Open, click Type Here, type - and press Enter
  3. Under the new line, click Type Here and type E&xit and press Enter
  4. On the form, click Exit
  5. In the Properties window, change its characteristics as follows:
    (Name): mnuFileExit
    ShortcutKeys: Ctrl+F4
    ShowShortcutKeys: false
  6. On the form, click File and double-click Exit
  7. Implement the event as follows:
    System::Void mnuFileExit_Click(System::Object^  sender,
			 System::EventArgs^  e)
{
    Close();
}
  8. Display the form

Sub-Menus

If you have menu items that perform similar tasks, you can put them in a group, which you can do using line separators. Another option is to create the menu items in their own group. The group of menu items that are created as children of a parent menu is referred to as a sub-menu. Here is an example of a sub-menu in Microsoft Paint:

To visually create a sub-menu, under the form, click the menu control that will hold the items. In the menu designer

  • If the sub-menu will be created for a main menu item, first click the menu category, then click the menu item that will hold the sub-menu
  • If the sub-menu will be created for a contextual menu, click the menu item that will hold the sub-menu

After selecting the eventual parent of the intended sub-menu, click the right Type Here box, type the desired caption and optionally give it a name.

To create another item for the sub-menu, you can click the Type Here box under the previous one. In the same way, you can add as many items as you judge necessary. Here is an example:

You can also create a sub-menu for a menu item that itself is a sub-menu. Here is an example:

To create a sub-menu for an item A that itself is a sub-menu, click that menu item A, click the Type Here box on the right side, and type its caption.

As another technique, after selecting the menu item that will act as the parent of the sub-menu, in the Properties window, click the ellipsis button of the DropDownItems field to open the Items Collection Editor dialog box. To create an item for the sub-menu, in the top combo box, select MenuItem and click Add. Then configure the menu item as see fit (Text, (Name), etc).

Like any menu item, each sub-menu item is an object of type ToolStripMenuItem. Therefore, to programmatically create a sub-menu, create each ToolStripMenuItem item and add it to the ToolStripMenuItem menu item that will act as its parent.

Practical LearningPractical Learning: Creating and Using Sub-Menus
  1. Under the form, click mnuMain and, on the form, click Tools
  2. Under Mirror, click Type Here, type &Rotate and press Enter
  3. On the form, click Rotate
  4. On the right side of Rotate, click Type Here, type &90° (you can get ° by copying it here or after doing a search on "HTML Special Characters" on the Internet) and press Enter
  5. Continue creating the sub-menus and menu items as follows:
     
    Sub-Menus
      
    Sub-Menus
  6. Click each menu item and change their names as follows:
     
    Menu Item Sub-Menu Item Sub-Menu Item Name
    &Rotate     mnuToolsRotate
      &90°   mnuToolsRotate90
        &Left mnuToolsRotate90Left
        &Right mnuToolsRotate90Right
      &180°   mnuToolsRotate180
    Flip & Ro&tate     mnuToolsFlipRotate
      &90°   mnuToolsFlipRotate90
        &Left mnuToolsFlipRotate90Left
        &Right mnuToolsFlipRotate90Right
      &180°   mnuToolsFlipRotate180

Checked Box Menu Items
 

Introduction

Some applications are meant to display more than one form at the same time, or to optionally display and dismiss some forms some time to time. With this type of application, you may need a menu "witness" that can indicate whether the option form is currently displaying or not. Some other applications may change their view some time to time. For these reasons and others, you can use the menu to assist the user with identifying an option that is currently available or not. You can do this through a check box on a menu item.

Implementing Check Boxes

To assist you with displaying a check box on a menu item, the ToolStripMenuItem class is equipped with a property named Checked. If you are visually creating a menu, to show a check mark on a menu item, access its Properties window and get to its Checked field. The default value of this property is false, which means the menu item is not meant to display a check box. To show a check box, you can set this property to true. When the user has clicked the menu item, you can then programmatically change its value from true to false and vice-versa.

When the application is running, to put a check mark on it, the user can click the menu item. If an item is displaying a check mark and the user clicks it, the check mark disappears. In reality, this is not an automatic functionality and it doesn't happen at random: you must configure it.

As mentioned already, to support check marks, the ToolStripMenuItem class is equipped with the Boolean Checked  property. If you want a menu item to exhibit the appropriate functionality a check box, you must write code for it, which fortunately is particularly easy (at least easier than it is done in Win32).

Practical LearningPractical Learning: Using Checked Boxes on Menu Items
  1. On the form, click Tools, then click Rotate and, under Rotate, click Type Here
  2. Type - and press Enter
  3. Under the new menu separator, click Type Here, type &Original Size and press Enter
  4. On the form, click Original Size
  5. In the Properties window, double-click Checked to change its value to true
  6. Complete the menu with the following items
     
    Check Boxes on Menu Items
    Text Name
    &Original Size mnuOriginalSize
    Ce&nter Image mnuCenterImage
    R&esize Form to Fit Picture mnuResizeForm
    O&ccupy Client Area mnuOccupyClientArea
    &Zoom mnuZoom
  7. On the form, click Tools and double-click Original Size
  8. Implement its event as follows:
    System::Void mnuOriginalSize_Click(System::Object^  sender, 
				   System::EventArgs^  e)
{
    mnuOriginalSize->Checked     = true;
    mnuCenterImage->Checked	 = false;
    mnuResizeForm->Checked       = false;
    mnuOccupyClientArea->Checked = false;
    mnuZoom->Checked	         = false;
}
  9. Return to the form
  10. On the form, click Tools and double-click Center Image
  11. Implement its event as follows:
    System::Void mnuCenterImage_Click(System::Object^  sender, 
				  System::EventArgs^  e)
{
    mnuOriginalSize->Checked     = false;
    mnuCenterImage->Checked	 = true;
    mnuResizeForm->Checked       = false;
    mnuOccupyClientArea->Checked = false;
    mnuZoom->Checked	         = false;
}
  12. Return to the form
  13. On the form, click Tools and double-click Resize Form to Fit Picture
  14. Implement its event as follows:
    System::Void mnuResizeForm_Click(System::Object^  sender, 
				 System::EventArgs^  e)
{
    mnuOriginalSize->Checked     = false;
    mnuCenterImage->Checked	 = false;
    mnuResizeForm->Checked       = true;
    mnuOccupyClientArea->Checked = false;
    mnuZoom->Checked	         = false;
}
  15. Return to the form
  16. On the form, click Tools and double-click Occupy Client Area
  17. Implement its event as follows:
    System::Void mnuOccupyClientArea_Click(System::Object^  sender,
		 		       System::EventArgs^  e)
{
    mnuOriginalSize->Checked     = false;
    mnuCenterImage->Checked	 = false;
    mnuResizeForm->Checked       = false;
    mnuOccupyClientArea->Checked = true;
    mnuZoom->Checked	         = false;
}
  18. Return to the form
  19. On the form, click Tools and double-click Zoom
  20. Implement its event as follows:
    System::Void mnuZoom_Click(System::Object^  sender,
			   System::EventArgs^  e)
{
    mnuOriginalSize->Checked     = false;
    mnuCenterImage->Checked	 = false;
    mnuResizeForm->Checked       = false;
    mnuOccupyClientArea->Checked = false;
    mnuZoom->Checked	         = true;
}
  21. Execute the application to test
  22. Open a picture and use the options under the Tools menu
  23. Close the form and return to your programming environment

The Status of Checked Menu Item

When a menu item is checked it holds a status to indicate it. To assist you with getting this information, the ToolStripMenuItem class is equipped with a property named CheckState. This property allows you specify the type of check mark to put on a menu item or to find out the marked state of a menu item in terms of its check mark.

Pictures on Menu Items
 

Introduction

Because Microsoft Windows is graphical operating system, you can enhance the appearance of your menu items by displaying indicative pictures close to menu items. Here is an example of three menu items that display pictures:

Pictures on Menu Items

When introducing menus, we saw that each menu was treaded separately. This means that you choose what menu would display a picture and which one would not display any picture. The picture to display can be of almost any format and you can use a picture of any size. When you specify the picture, the studio may (or may not) resize it to fit the height (and width) reserved for it. This means that if the picture is too big, it may get shrunk, so much that you may not be able to recognize it anymore:

Pictures on menu items

As mentioned already, the menu supports pictures of almost any type, which includes bitmaps, JPEGs, GIFs, and icons. Although you can use bitmaps, it may be better to use icons. The reason is that it is easier to control and even predict the background color of an icon and the operating system also is equipped to identify the background color of an icon. You can use icons that either you design or acquire one way or another.

Practical LearningPractical Learning: Creating Pictures for Menu Items
  1. On the main menu, click View -> Other Windows -> Resource View
    In the Resource View, right-click the name of the project -> Add -> Resource...
     
  2. In the Add Resource dialog box, click Icon and click New

  3. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
    Filename: openpicture.ico
    ID: IDI_OPENPICTURE

  4. Design the icon as follows:
     
  5. In the Resource View, right-click Icon and click Insert Icon
  6. In the Resource View, click IDI_ICON2 and, in the Properties window, change the following characteristics:
    Filename: flip.ico
    ID: IDI_FLIP
  7. Design the icon as follows:
     
    Flip
  8. Save and close the icon the design
  9. In the Resource View, right-click and click Insert Icon
  10. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
    Filename: mirror.ico
    ID: IDI_MIRROR
  11. Design the icon as follows:
     
    Mirror
  12. Save and close the icon the design
  13. In the Resource View, right-click one of the icons and click Insert Icon
  14. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
    Filename: rotate90right.ico
    ID: IDI_ROTATE90RIGHT
  15. Design the icon as follows:
     
    IDI_ROTATE90RIGHT
  16. Save and close the icon the design
  17. In the Resource View, right-click one of the icons and click Insert Icon
  18. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
    Filename: rotate90left.ico
    ID: IDI_ROTATE90LEFT
  19. Design the icon as follows:
     
    IDI_ROTATE90LEFT
  20. Save and close the icon the design
  21. In the Resource View, right-click one of the icons and click Insert Icon
  22. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
    Filename: rotate180.ico
    ID: IDI_ROTATE180
  23. Design the icon as follows:
     
    IDI_ROTATE180
  24. Save and close the icon the design
  25. In the Resource View, right-click one of the icons and click Insert Icon
  26. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
    Filename: fliprotate90right.ico
    ID: IDI_FLIPROTATE90RIGHT
  27. Design the icon as follows:
     
    IDI_FLIPROTATE90RIGHT
  28. Save and close the icon the design
  29. In the Resource View, right-click one of the icons and click Insert Icon
  30. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
    Filename: fliprotate90left.ico
    ID: IDI_FLIPROTATE90LEFT
  31. Design the icon as follows:
     
  32. Save and close the icon the design
  33. In the Resource View, right-click one of the icons and click Insert Icon
  34. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
    Filename: fliprotate180.ico
    ID: IDI_FLIPROTATE180
  35. Design the icon as follows:
     
    IDI_FLIPROTATE180
  36. Save and close the icon the design
  37. Display the form

Using Pictures on Menu Items

The (new) .NET Framework provides a complete and high level of support for pictures on a menu. You can specify the picture on a menu item while or a after designing the menu. If you are visually creating a menu:

  • In the menu designer, right-click a menu item and click Set Image...
  • In the menu strip, click the menu item you want to add a picture to. In the Properties window, click the Image field and click its ellipsis button

The Open dialog box would come up for you to select the picture. Alternatively, on the menu strip, you can click the menu category that holds the menu item that will display the picture. In the Properties window, you can click the ellipsis button of the DropDownItems field. In the Items Collection Editor, under Members, click the item menu. In the right list, click Image and click its ellipsis button. Then use the Open dialog box to select the desired picture.

If you are programmatically creating a menu item, to specify only the picture that the menu item would display, you can initialize it with the following constructor of the ToolStripMenuItem class:

public:
    ToolStripMenuItem(Image^ image);

Here is an example:

public ref class CExercise : public Form
{
private:
    MenuStrip ^ mnuMain;
    ToolStripMenuItem ^ mnuFile;
    ToolStripMenuItem ^ mnuFileNew;

public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
        mnuMain = gcnew MenuStrip;

        mnuFile = gcnew ToolStripMenuItem(L"&File");
	mnuFileNew = 
	    gcnew ToolStripMenuItem(Image::FromFile(L"E:\\Programs\\art\\new.ico"));
	mnuFileNew->Text = L"&New";

	mnuFile->DropDownItems->Add(mnuFileNew);
	mnuMain->Items->Add(mnuFile);

	Controls->Add(mnuMain);
    }
};

If you had created the menu item using either the default constructor or the constructor that takes only a string, to specify the picture of the menu, the ToolStripMenuItem is equipped with a property named Image that is of type Image. Here is an example:

public ref class CExercise : public Form
{
private:
    MenuStrip ^ mnuMain;
    ToolStripMenuItem ^ mnuFile;
    ToolStripMenuItem ^ mnuFileNew;
    ToolStripMenuItem ^ mnuFileOpen;

public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
        mnuMain = gcnew MenuStrip;

	mnuFile = gcnew ToolStripMenuItem(L"&File");

	mnuFileNew = 
	    gcnew ToolStripMenuItem(Image::FromFile(L"E:\\Programs\\art\\new.ico"));
	mnuFileNew->Text = L"&New";

	mnuFileOpen = gcnew ToolStripMenuItem(L"Open");
	mnuFileOpen->Image = Image::FromFile(L"E:\\Programs\\art\\open.ico");

	mnuFile->DropDownItems->Add(mnuFileNew);
	mnuFile->DropDownItems->Add(mnuFileOpen);
	mnuMain->Items->Add(mnuFile);

	Controls->Add(mnuMain);
    }
};

To specify both the caption and the picture of the menu, you can initialize it using the following constructor:

public:
    ToolStripMenuItem(String^ text, Image^ image);

Here is an example:

public ref class CExercise : public Form
{
private:
    MenuStrip ^ mnuMain;
    ToolStripMenuItem ^ mnuFile;
    ToolStripMenuItem ^ mnuFileNew;
    ToolStripMenuItem ^ mnuFileOpen;
    ToolStripMenuItem ^ mnuFileSave;

public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
        mnuMain = gcnew MenuStrip;

	mnuFile = gcnew ToolStripMenuItem(L"&File");

	mnuFileNew =
	    gcnew ToolStripMenuItem(
		Image::FromFile(L"E:\\Programs\\art\\new.ico"));
	mnuFileNew->Text = L"&New";

	mnuFileOpen = gcnew ToolStripMenuItem(L"Open");
	mnuFileOpen->Image = Image::FromFile(L"E:\\Programs\\art\\open.ico");

        mnuFileSave = 
	    gcnew ToolStripMenuItem(
		L"Save", Image::FromFile(L"E:\\Programs\\art\\save.ico")) ;
	mnuFile->DropDownItems->Add(mnuFileNew);
	mnuFile->DropDownItems->Add(mnuFileOpen);
	mnuMain->Items->Add(mnuFile);

	Controls->Add(mnuMain);
    }
};

Practical LearningPractical Learning: Using Pictures on Menu Items
  1. Under the form, click mnuMain.
    On the form, click File and click Open
  2. In the Properties window, click Image and click its ellipsis button
  3. Locate the openpicture.ico you designed and select it
  4. In the same way, associate the pictures to the menu items as follows:
     
    Sub-Menu Icon Name
    File -> Open openpicture.ico
    Tools -> Flip flip.ico
    Tools -> Mirrow rotate.ico
    Tools -> Rotate -> 90° -> Left rotate90left.ico
    Tools -> Rotate -> 90° -> Right rotate90right.ico
    Tools -> Rotate -> 180° rotate180.ico
    Tools -> Flip & Rotate -> 90° -> Left fliprotate90left.ico
    Tools -> Flip & Rotate -> 90° -> Right fliprotate90right.ico
    Tools -> Flip & Rotate -> 180° fliprotate180.ico
  5. Execute the application to see the result
     
    Picture on Menu Item
      
    Picture on Menu Item
      
    Picture on Menu Item
  6. Close the form and return to your programming environment

Characteristics of Pictures

After specifying the picture to display on a menu item, you can exercise a great deal of control on its appearance. By default, the picture is displayed on the left side of the menu item's caption. The alignment is controlled by the ImageAlign property of the ToolStripItem class. The ImageAlign property is of type ContentAlignment, which is an enumeration. It uses the same values we saw for the content alignment of text on a control.

After specifying the picture to display on a menu item, if the picture is too big, it may get shrunk to fit 16 x 16. Still, if you want, you can keep the size. The ability to keep the 16 x 16 size or the original size is controlled by the ImageScaling property. This property is of type ToolStripItemImageScaling, which is an enumeration and has only two members. The default value of this property is None, which means the picture would be resized for a 16 x 16 size. An alternative is to set the property to SizeToFit. If you do, the studio would use a type of algorithm to change the size of (all) the menu items: If you set only one menu item to SizeToFit, the studio would use its size of the new size of all the other menu items. Here is an example:

You can make the menu item display both the picture and the caption. This characteristic is controlled by the DisplayStyle property of the ToolStripItem class. This property is of type ToolStripItemDisplayStyle, which is an enumeration:

  • The default value of this property is ImageAndText. This value indicates that the menu item would display both the picture and the caption
  • If you set the property value to Image, the menu item would display only the image
  • If you set the property value to Text, the menu item would display only the caption
  • If you want to display neither the picture nor the caption, you can set this property to None

Menu Management
 

The Menu Outline

While you are visually creating a menu, Microsoft Visual Studio keeps track of its items. To see an outline of your menu, you can click a menu category or item and click Document Outline. A window titled Document Outline would appear (on the left of the screen by default).

Inserting Menu Items

After creating a few menu categories or a few menu items, you may find out that an item is missing in the sequence. You can then create a new menu before one of your choice:

  • To create a new menu category that would precede an existing one, in the menu designer, right-click a menu category, position the mouse on Insert, and click MenuItem. A placeholder for a new menu category would be added with a default caption and a default name. You can then customize it as you see fit
  • To insert a new menu item, in the menu designer, right-click the menu item that will succeed the new one, position the mouse on Insert, and click MenuItem. A placeholder for a new menu item would be added with a default caption and a default name. You can then customize it as you see fit.

There is no formal method to programmatically insert a new menu. The sequence of adding TooStripMenuItem objects to their parent specifies how they would appear.

Practical LearningPractical Learning: Inserting Menu Items
  1. Under the form, click mnuMain.
    On the form, right-click Tools, position the mouse on Insert, and click Menu Item
  2. While toolStripMenuItem2 is selected, in the Properties window, change its characteristics as follows:
    Text: &Edit
    (Name): mnuEdit
  3. On the form, under Edit, click Type Here, type C&ut and press the down arrow key
  4. Type &Paste and press Enter
  5. Right-click Paste, position the mouse on Insert and click Menu Item
  6. Click the new toolStripMenuItem2 to select it
  7. In the Properties window, change its characteristics as follows:
    Text: &Copy
    (Name): mnuEditCopy

Using a Menu Template

To assist you with easily creating a menu of the most common items found in regular applications, Microsoft Visual Studio comes with a menu template. To use it to create a main menu, from the Menus & Toolbars  section of the Toolbox, click a MenuStrip and click the form. Right-click the menu strip and click Insert Standard Items. A complete menu made of File, Edit, Tools, and Help menu categories would be created on the form. Each menu category would also receive a few menu items:

You can then customize the menu as you see fit.

Copying a Menu

You can visually copy a main menu or a contextual menu from one (Visual Studio) application to another. To do this, in the application that holds the desired menu, under the form, right the menu strip or the context menu strip and click Copy. In the other application, right-click the form and click Paste.

You can visually copy a menu category to duplicate it in your application. To do this, under the form, click the menu strip. In the menu designer, right-click the menu category and click Copy. Right-click another top-level item and click Paste. When you copy and paste a menu category, the new one would have the same menu items (captions) as the original, but with new names. You can keep the items of the new menu category or you can customize them as you see fit.

You can visually copy a menu item to duplicate it. To do this, in the menu designer:

  • If you are using a main menu, click the menu category that holds the desired menu, or click the menu item that holds the sub-menu where the desired is. Right-click the menu item and click Copy
  • If you are using a contextual menu, right-click the menu item and click Copy

After copying the menu item, right-click the item that will succeed it and click Paste.

To assist you with programmatically copying a menu category or a menu item, the ToolStripItemCollection class is equipped a method named CopyTo. Its syntax is:

public:
    void CopyTo(array<ToolStripItem^>^ array, int index);

This method takes a collection of menu items (as an array) and copies it to the index of your choice.

Moving a Menu

While designing your menu, you may find out that a menu category or a menu item is in the wrong position. You can then move the menu category or the menu item.

To visually move a menu category, on the menu designer, click and hold the mouse on the menu category. Drag left or right in the desired direction. While moving the mouse, the cursor would display a small rectangle. When the mouse gets to the item that will succeed the new one, it would be surrounded by a dotted rectangle:

You can then release the mouse. When you move a menu category, it moves with all its menu items.

To move a menu item, in the menu designer, click and hold the mouse on the item. Drag up or down. While moving the mouse, the cursor would display a small rectangle. When the mouse gets to the item that will succeed the new one, it would be surrounded by a dotted rectangle:

You can then release the mouse. When you move a menu item, if it has a sub-menu, it would move with that sub-menu.

There is no formal process to programmatically move a menu. If you want, you can delete the menu from one ToolStripMenuItem object and add it to the desired ToolStripMenuItem object.

Enabling or Disabling a Menu Item

A menu item is said to be disabled if the user can see it but cannot use it. The caption of such a menu appears gray. Here are examples:

When a menu item is disabled, the user can position the mouse on it and click but nothing would happen. This indicates that the action of that menu item is not available at that time. The reverse to a disabled menu item is that it is enabled. That's the case for the Under and the Select All items in the above application.

The user cannot directly enable or disable a menu. You as the application developer decides when (and why) the item would be enabled or disabled.

To support the ability to enable or to disable a menu item, the ToolStripMenuItem class is equipped with a Boolean property named Enabled. By default, a new menu item you have just created is enabled. This is because the default value of this property is true.

To visually enable or disable a menu item, in the menu designer or in the Items Collection Editor, click the menu item. In either the Properties window or on the right side of the Items Collection Editor, set the Enabled property to false. If it is currently set to false and you want to enable, set the property to true.

To programmatically enable or re-enable it, you can set the value to true. In the same way, to find out the enabled status of a menu item, you can check the value of its Enabled property.

Hiding or Showing a Menu Item

A menu is said to be hidden if it is programmatically available behind the scenes but the user cannot see. Since the user cannot see it, he or she cannot use it. The reverse to a hidden menu item is that it is shown to the user. The user cannot directly hide or show a menu item. You as the application developer creates a menu item and then decides when, how, and where (and why) the item would be hidden or shown.

To support the ability to enable or to disable a menu item, the ToolStripMenuItem class inherits a Boolean property named Visible from the its parents (the ToolStripMenuItem class inherits it from the ToolStripDropDownItem class that inherits it from the ToolStripItem class).

After you have just created a new menu, by default, it is made visible to the user. This is because the default value of the Visible property is set to true. To hide a menu item, you can set its Visible property to false. To show or to reveal it, you can set the value to true. In the same way, to find out whether a menu item is currently displaying, you can check the status of its Visible property.

Deleting a Menu Item

Instead of disabling or hiding a menu you don't want the user to use anymore, you can simply delete it. If you do this, you cannot programmatically refer to it anymore, unless you re-create it. From the previous to the current lesson, we saw different ways of creating menu categories and menu items.

To visually delete a menu category, under the form:

  • Click menu strip. In the menu designer, click the menu category and press Delete
  • Click menu strip. In the menu designer, right-click the menu category and click Cut
  • Click menu strip. In the menu designer, right-click the menu category and click Delete
  • Click menu strip. In the Properties window, click the ellipsis button of the Items field. In the Members list of the Items Collection Editor, click the menu category and click the Delete button Delete

To visually delete a menu item, under the form, click either the menu strip or context menu strip:

  • In the menu designer, click the menu item and press Delete
  • In the menu designer, right-click the menu item and click Cut
  • In the menu designer, right-click the menu item and click Delete
  • In the menu designer, click the menu category and, in the Properties window, click the ellipsis button of the Items field. In the Members list of the Items Collection Editor, click the menu item and click the Delete button Delete

In the same way, you can keep deleting one item at a time.

To visually delete the whole main menu or a contextual menu, under the form, click either the menu strip or the context menu strip and press Delete. Be careful because you will not be warned before the menu is actually dismissed (you can still undo your action, provided it is still available).

To assist you with programmatically deleting a menu category or a menu item, the ToolStripItemCollection class is equipped with three methods. To delete a menu using its ToolStripItem object name, you can call the Remove() method. Its syntax is:

public:
    void Remove(ToolStripItem^ value);

When calling this method, pass it the name of the menu category or the menu item you want to delete. If you want to delete a menu category or a menu item based on its index, you can call the following method:

public:
    void RemoveAt(int index);

To delete a menu using its key, you can use the ToolStripItemCollection::RemoveByKey() method whose syntax is:

public:
    virtual void RemoveByKey(String^ key);

In the same way, you can keep removing one item at a time. To help you delete all items, the ToolStripItemCollection class is equipped with a method named Clear. Its syntax is:

public:
    virtual void Clear();

When called, this method will get rid of all the menu categories and items that belong to the object that called it.

Practical LearningPractical Learning: Deleting Menu Items
  1. On the form, click Edit
  2. Right-click Copy and click Delete
  3. Click Edit and press Delete
  4. Execute the application to test it
  5. Close the form and return to your programming environment
 
 
   
 
Home Copyright © 2011 FunctionX, Inc.