Introduction
Tool strips are a fantastic asset because they provide a tidy and user-friendly interface for the user. It is possible to add images to many of the different tool strip items. It is even possible to force such items to appear larger by adjusting the property ImageScalingSize
, however at the cost of pixelisation.
Usually it is desirable to make our applications as accessible as possible. Larger tool strip items are fantastic for those with poorer sight, or even those who just simply enjoy the quality of larger icons. Unfortunately, the standard ToolStrip
class does not provide Icon
support. When an icon
is specified, it is converted into an Image
instance. Thus the benefits of using an icon are lost.
So I decided that it would be a nice idea to add multi-image support to the ToolStrip
control. Whilst my primary focus was on adding some support for Icon
, I thought it more desirable to generalize this by using the two interfaces IImageProvider
and IMultipleImageProvider
.
Design
When MultipleImageToolStrip
is being updated, it calls upon available IImageProvider
's to acquire images of the required size.
An IImageProvider
exposes the two methods IsImageSupported
and GetImage
. When multiple icon providers are available, it is possible to access the required icon using a key. In the code supplied with this article, the key represents a ToolStripItem
. The following illustration provides an overview of the design using a UML class diagram.
When no IImageProvider
is available, the original ToolStripItem
is maintained and stretched where necessary to match the overall tool strip size.
For my extension, I decided that four discreet sizes would ease the implementation of custom image providers. The available sizes are: Small (16 x 16), Medium (24 x 24), Large (32 x 32), and ExtraLarge (48 x 48). When the requested image size is not available, a default icon can be automatically substituted if the MultipleImageToolStrip.UseUnknownImageSizeIcon
is set to true
.
Images are selected as follows:
- If an image provider is available from within the tool strip:
- If the required image size is supported, that image is acquired.
- If the required image size was not supported and
UseUnknownImageSizeIcon
is set, the default image provider is utilized.
- When no image can be acquired using those criteria, the original image is simply stretched to match that of the scaled buttons.
- If the above fails and the item is itself an
IImageProvider
then it is used to acquire the required image.
- Finally if the items
ToolStripItem.Tag
is an IImageProvider
then it is used to acquire the required image.
Using the Code
It is always a good idea to backup your project before trying something new!
To use the attached code simply:
- Add the source files to your project.
- Recompile your project.
- Drag
MultipleImageToolStrip
onto your Form
or UserControl
from the tool box.
- Add some buttons.
- You should now have a
ToolStrip
which behaves much the same as before.
If you want to convert an existing ToolStrip
into a MultipleImageToolStrip
:
- Find the ".designer.cs" file which is associated with your form or control.
- Open it up and replace instances of
ToolStrip
with MultipleImageToolStrip
.
To make items automatically resizable, add a handler for your form's (or control's) Load
event. Take a look below for an example of how to do this:
private void Form1_Load(object sender, EventArgs e)
{
this.iconToolStrip.BeginUpdateImages();
this.iconToolStrip.AssignImage(toolStripBack, new IconImageProvider(
Resources.arrow_left));
this.iconToolStrip.AssignImage(toolStripForward, Resources.arrow_right);
this.iconToolStrip.AssignImage(toolStripHome, Resources.home);
this.iconToolStrip.AssignImage(toolStripStop, Resources.stop);
this.iconToolStrip.EndUpdateImages();
this.iconToolStrip.ImageSize = ImageSize.Medium;
}
When a tool strip item is permanently removed, the associated IImageProvider
must also be manually removed. This decision was made because often an item is only removed temporarily and then reinserted.
If you always want to remove an associated IImageProvider
when a tool item is removed, add a handler for the MultipleImageToolStrip.ItemRemove
event:
private void iconToolStrip_ItemRemoved(object sender, ToolStripItemEventArgs e)
{
this.iconToolStrip.RemoveImage(e.Item);
}
Alternatively the associated provider can be removed along with the item:
public void RemoveToolStripItem(ToolStripItem item)
{
this.iconToolStrip.Items.Remove(item);
this.iconToolStrip.RemoveImage(item);
}
Points of Interest
The fantastic icons used in the demo application were kindly provided by glyFX from their free 'Vista Common' icon set. The required icons were combined together using the free IcoFX tool.
History
- 16th June, 2008: Original version posted
- 3rd August, 2009: Demo and source files updated
- Member Guy..L found a performance issue when changing multiple tool icons in sequence. This problem should now have been resolved.