Click here to Skip to main content
15,885,216 members
Articles / Multimedia / GDI+

Multiple Image Sizes for ToolStrip Items

Rate me:
Please Sign up or sign in to vote.
4.74/5 (18 votes)
3 Aug 2009MIT3 min read 123K   6.9K   78   17
This 'ToolStrip' extension automatically selects an image using the selected image size.

IconToolStrip_demo

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.

multi_image_tooltips/uml-overview.png

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:

C#
private void Form1_Load(object sender, EventArgs e)
{
    // Begin updating tool strip images. This is important because it prevents
    // the tool strip from refreshing after each image assignment.
    this.iconToolStrip.BeginUpdateImages();

    // Here it is possible to provide an 'IImageProvider' instance.
    this.iconToolStrip.AssignImage(toolStripBack, new IconImageProvider(
        Resources.arrow_left));

    // Or just provide icons themselves.
    this.iconToolStrip.AssignImage(toolStripForward, Resources.arrow_right);
    this.iconToolStrip.AssignImage(toolStripHome, Resources.home);
    this.iconToolStrip.AssignImage(toolStripStop, Resources.stop);

    // Finalize updating.
    this.iconToolStrip.EndUpdateImages();

    // Then to select an initial icon size.
    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:

C#
private void iconToolStrip_ItemRemoved(object sender, ToolStripItemEventArgs e)
{
    // Automatically remove associated image provider.
    this.iconToolStrip.RemoveImage(e.Item);
}

Alternatively the associated provider can be removed along with the item:

C#
public void RemoveToolStripItem(ToolStripItem item)
{
    // Remove item itself.
    this.iconToolStrip.Items.Remove(item);
    
    // Remove any associated provider.
    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.

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
Software Developer Rotorz Limited
United Kingdom United Kingdom
I have been fascinated by software and video games since a young age when I was given my first computer, a Dragon 32. Since then I have experimented with numerous methods of development ranging from point-and-click type packages to C++. I soon realized that software development was what I wanted to do.

Having invested a lot of time into programming with various languages and technologies I now find it quite easy to pickup new ideas and methodologies. I relish learning new ideas and concepts.

Throughout my life I have dabbled in game and engine development. I was awarded a first for the degree "BEng Games and Entertainment Systems Software Engineering" at the University of Greenwich. It was good to finally experience video games from a more professional perspective.

Due to various family difficulties I was unable to immediately pursue any sort of software development career. This didn't stop me from dabbling though!

Since then I formed a company to focus upon client projects. Up until now the company has primarily dealt with website design and development. I have since decided that it would be fun to go back to my roots and develop games and tools that other developers can use for their games.

We have recently released our first game on iPhone/iPad called "Munchy Bunny!" (see: http://itunes.apple.com/us/app/munchy-bunny!/id516575993?mt=8). We hope to expand the game and release to additional platforms.

Also, check out our tile system extension for Unity! (see: http://rotorz.com/tilesystem/)

Comments and Discussions

 
GeneralMy vote of 5 Pin
csharpbd27-Aug-13 10:26
professionalcsharpbd27-Aug-13 10:26 
GeneralMy vote of 1 Pin
Member 871442126-Nov-12 3:10
Member 871442126-Nov-12 3:10 
GeneralMy vote of 5 Pin
another1121-Aug-10 23:32
another1121-Aug-10 23:32 
GeneralI am getting an error when building the project Pin
nmichalo6-Jan-10 23:21
nmichalo6-Jan-10 23:21 
GeneralRe: I am getting an error when building the project Pin
Lea Hayes7-Jan-10 6:43
Lea Hayes7-Jan-10 6:43 
QuestionIDE reports that error occurs on the line "using IconToolStrip.Properties;".Why? Pin
GoodLucy25-Sep-09 2:31
GoodLucy25-Sep-09 2:31 
It is not found "Prooerties" in the namespace of IconToolStrip.
Someone can help me?
AnswerRe: IDE reports that error occurs on the line "using IconToolStrip.Properties;".Why? Pin
Lea Hayes25-Sep-09 3:51
Lea Hayes25-Sep-09 3:51 
GeneralToolStripManager for MultipleImageToolStrip Pin
Guy..L3-Aug-09 1:25
Guy..L3-Aug-09 1:25 
GeneralRe: ToolStripManager for MultipleImageToolStrip Pin
Lea Hayes4-Aug-09 5:14
Lea Hayes4-Aug-09 5:14 
GeneralRe: ToolStripManager for MultipleImageToolStrip [modified] Pin
Guy..L4-Aug-09 17:25
Guy..L4-Aug-09 17:25 
GeneralToolStrip flicker Pin
Guy..L2-Aug-09 12:03
Guy..L2-Aug-09 12:03 
GeneralRe: ToolStrip flicker Pin
Lea Hayes2-Aug-09 13:27
Lea Hayes2-Aug-09 13:27 
GeneralRe: ToolStrip flicker Pin
Guy..L2-Aug-09 13:49
Guy..L2-Aug-09 13:49 
GeneralThank You Pin
iccb101325-Jul-09 19:56
iccb101325-Jul-09 19:56 
QuestionIcon 16x16 32 x 32 Pin
Cliffer26-Feb-09 4:45
Cliffer26-Feb-09 4:45 
AnswerRe: Icon 16x16 32 x 32 Pin
Lea Hayes26-Feb-09 10:32
Lea Hayes26-Feb-09 10:32 
Questioninsert gripper into toolstrip Pin
rixwan19-Nov-08 3:02
rixwan19-Nov-08 3:02 

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.