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:

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.

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);
    }
};

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