Click here to Skip to main content
11,925,073 members (55,304 online)
Click here to Skip to main content
Add your own
alternative version


22 bookmarked

Windows Forms – ToolStrip and ImageList

, 1 Sep 2006
Rate this:
Please Sign up or sign in to vote.
Loading strips of images into ImageList, and changing images on the toolstrip buttons based on their state.


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
  • ToolStripmySampleToolStrip
  • 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
     //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.


First draft.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Mahesh Srinivasan
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Member 3447113-Apr-13 4:47
memberMember 3447113-Apr-13 4:47 
QuestionDisabled state? Pin
cross bones style28-Sep-09 5:18
membercross bones style28-Sep-09 5:18 
GeneralAddStrip Pin
Phil Bachmann8-Jun-07 22:24
memberPhil Bachmann8-Jun-07 22:24 
QuestionMissing example? Pin
Harm Salomons5-Sep-06 9:34
memberHarm Salomons5-Sep-06 9:34 
AnswerRe: Missing example? Pin
Mahesh Srinivasan6-Sep-06 14:06
memberMahesh Srinivasan6-Sep-06 14:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151125.3 | Last Updated 1 Sep 2006
Article Copyright 2006 by Mahesh Srinivasan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid