Windows Forms – ToolStrip and ImageList

Introduction

When I started working on porting an MFC / WTL based project to Windows Forms, I encountered troubles using the ToolStrip control. In MFC / WTL, CToolBar (CToolBarCtrl in WTL) objects allowed you to specify three different sets of CImageList objects for the different states of buttons on toolbars. Also, the CImageList itself can be created from a single bitmap that contains a strip of icons for the toolbars. After digging through various methods and properties, I was finally able to accomplish this using Windows Forms. The source code itself is pretty straightforward.

In Windows Forms, ToolStrip objects expose a single property to assign ImageList objects. However, they do not expose properties for adding multiple ImageLists that will be used to indicate various states of the toolbar buttons like “MouseHover / Hot”, “Disabled”, etc. To accomplish this, we have to handle the “Mouse Enter” and “Mouse Leave” events on the individual toolbar buttons (ToolStripButtons) and change their ImageIndex property to point to the corresponding “state bitmap”.

Using the code

Here are the various objects used in this sample code snippet:

• Form - mySampleForm
• ToolStrip – mySampleToolStrip
• ImageList - mySampleImageList
• ToolStripButton(s) - mySampleToolStripButton1 (this example handles four buttons 1 - 4)

Step 1:

Add a handler for the “mySampleForm Load” event. In the handler, load the “Regular Bitmap Strip” and the “Hover / Hot Bitmap Strip” into two separate Bitmap objects.

Add the two Bitmap objects into the ImageList by calling the AddStrip method twice. This will add both the regular and the hot bitmaps into the ImageList. If there are four images in the bitmap (corresponding to the four toolbar buttons), then the ImageList object will contain eight images, with the first four indicating the “Regular State” and the next four denoting the “Mouse Hover State”.

Specify the ImageIndex for the ToolStripButtons so that they point to the corresponding “Regular State Images”.

//
// Any source code blocks look like this
private void mySampleForm_Load(object sender, EventArgs e)
{
     //Set the Image size of a single image inside the image list
     mySampleImageList.ImageSize = new Size(24,24);
     
     //Load the “Regular state bitmap strip into the Bitmap object         
     Bitmap image1 = new Bitmap("<Regular Bitmap File >");
     Bitmap image2 = new Bitmap("<Hover or Hot Bitmap File>");
     
     //Load the images into the ImageList
     mySampleImageList.AddStrip(image1);
     mySampleImageList.AddStrip(image2);
     //If the bitmap contained “4” images, each of size 24 X 24, then the 
     //ImageList will contain “2 X 4 = 12” images, each of size 24 X 24.
 
     //Now, set the ImageList to the ToolStrip
     mySampleToolStrip.ImageList = mySampleImageList;
     
     //Now, specify the “Image Index” for the ToolStrip Buttons 
     //index into the ImageList for the “Regular State” iamges
     mySampleToolStripButton1.myToolStripButton1.ImageIndex = 0;
     mySampleToolStripButton2.myToolStripButton1.ImageIndex = 1;
     mySampleToolStripButton3.myToolStripButton1.ImageIndex = 2;
     mySampleToolStripButton4.myToolStripButton1.ImageIndex = 3;
}

Step 2:

Add a handler for the “Mouse Enter” event for any ToolStrip button. Note that you can add a common handler that can handle the “Mouse Enter” events for all the ToolStrip buttons. In this event handler, verify that the object sender corresponds to a ToolStripButton, by using is keyword (which internally uses dynamic casting and checking the object for null). Modify the ImageIndex property of the ToolStripButton so that it points to the disabled image index. Note that I am “adding four” to the index, because in my sample there are four toolbar buttons.

private void mySampleToolStripButton_MouseEnter(object sender, EventArgs e 
{
     //ensure the “sender” is ToolStripButton
     if (sender is ToolStripButton)
     {
        if (((ToolStripButton)sender).ImageIndex < 4)
            ((ToolStripButton)sender).ImageIndex += 4;
     }    
}

Step 3:

Add a handler for the “Mouse Leave” event of the ToolStripButton. This handler will look similar to the MouseEnter handler, except that you need to modify the ImageIndex property differently.

private void mySampleToolStripButton_MouseLeave(object sender, EventArgs e)
{
     //ensure the “sender” is ToolStripButton
     if (sender is ToolStripButton)
     {
         if (((ToolStripButton)sender).ImageIndex >= 4)
             ((ToolStripButton)sender).ImageIndex -= 4;
     }
}

Points of interest

Changing the ImageIndex of a specific button on a toolbar has never been easier.

History

First draft.