Windows Forms – ToolStrip and ImageList






2.11/5 (6 votes)
Sep 1, 2006
2 min read

72987
Loading strips of images into ImageList, and changing images on the toolstrip buttons based on their state.
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 ImageList
s 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 (ToolStripButton
s) 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 ToolStripButton
s 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.