In some application that deals with graphic, you may use
only one picture but in various, if not most other applications, such as
those used to display, exchange, or switch pictures, you may deal with
different pictures. In such a type of application, sometimes the pictures
are of different sizes, even including unpredictable sizes. In another type
of application, some of the pictures you use may have the (exact) same size.
For this type, instead of using each picture individually, you can store
them in a collection, then access each picture when needed.

An image list is a collection of icons or pictures that
are stored so that each icon or picture can be located by an index. The
icons or pictures must be of the same size and they should be the same type.
This means that the collection can be made of only icons of 16x16 sizes,
only icons of 32x32 sizes, only icons of 48x48 sizes, or only bitmaps (but
of the same size each).

When it comes to design, there are two types of image
lists. Each picture can be added individually to the collection, or all of
the pictures can be designed in a longer picture and, inside of that long
picture, you would use a technique to locate each picture.

Once you get an image list, there is no pre-defined way
you must use it. Some Windows controls use an image list to use the pictures
they need but there are various other unpredictable ways you can use an
image list.

Application:
Introducing Image Lists

To create a new application, on the main menu, click File -> New Project...

In the middle list, click Windows Application

Set the name to ImageViewer1 and click OK

Creating an Image List

To support image lists, the .NET Framework provides a
class called ImageList that is defined in the System.Windows.Forms
namespace of the System.Windows.Forms.dll library. At design time, to
create an image list, from the Components section of the Toolbox, you can
click the ImageList button and click the form.

To programmatically create an image list, declare a
variable of type ImageList and initialize it using one of its two
constructors. The default constructor is used to simply signal that you are
going to use an image list. Here is an example:

The ImageList class is equipped with another
constructor whose syntax is:

public ImageList(IContainer container);

This constructor expects as argument the control
container that will be responsible for getting rid of the image list when
the application exits.

Application:
Creating an Image List

From the Components section of the Toolbox, click ImageList and
click the form

In the Properties window, change its Name to lstPictures

From the Components section of the Toolbox, click Timer and click
the form

In the Properties window, change its characteristics as follows:Enabled: TrueInterval: 2000

From the Common Controls section of the Toolbox, click PictureBox
and click the form

In the Properties window, change its characteristics as follows:(Name): pbxViewerDock: Fill

Save all

Characteristics of an Image List

The Size of the Images

Before creating an image list, you must prepare the
image(s). As mentioned previously, you can use individual images that would
be made into a set. When creating the images, your primary concern is the
size you give them. The default size of a picture is 16x16.

If you are creating a list of icons, you can create each
with the default size of 16x16. In some cases (for example if you intend to
use the images for a list view), you can create or design a second set of
icons whose size are 32x32 (and/or 48x48) each.

You can use a larger size:

The maximum length a picture can have is 256 pixels

The maximum height the picture can have is 256 pixels

To create or design your bitmaps, you can use either the
bitmap designer of Microsoft Visual Studio or you can use a more advanced
external application to prepare the pictures. Although the pictures used in
an image list are usually square (16x16, 32x32, 48x48, 96x96, etc), you can
use a different length and a different height but, if you are creating
individual pictures, they should each have the same size (same length and
same height).

Instead of using different pictures, you can create one
long picture whose sections would be used to identify each picture. There is
no particular way you must design the long picture and there is no real rule
about its dimensions: the size would become an issue when it is time to use
the picture(s). Alternatively, when creating the picture, if it will include
the different pictures that would be considered in the list, make sure you
know where each sectional picture starts and where it ends. In that case,
there is one long picture made of different sections and each section holds
a particular picture. When creating this type, you must know the size that
holds each particular picture.

After preparing the pictures, you can get ready to
create the image list. If you want, you can specify the size of each picture
before actually creating the list. To support this, the ImageList
class is equipped with a property named ImageSize. The ImageSize
property is of type Size. You can use it to specify the size of each
picture. Here is an example:

If the image list has been created already, to find out
the size of the picture, you can get the value of the ImageSize
property.

Application:
Preparing the Pictures

Copy each of the following pictures and paste them in a directory or
folder of your computer

Under the form, click lstPictures and, in the Properties window, set
the ImageSize to 250, 165

The Color Depth

Before creating the list of images, you must specify the
number of bits that will be used to specify the color of each pixel. This
information is referred to as the color depth. To support it, the
ImageList class is equipped with a property named ColorDepth. The
possible values are Depth4Bit, Depth8Bit, Depth16Bit,
Depth24Bit, and Depth32Bit. The default value is Depth8Bit.

Application:
Specifying the Color Depht

Under the form, click lstPictures and, in the Properties window, set
the ColorDeph to Depth32Bit

Creating the Collection of Images

After preparing the pictures, to visually create the
list of images, under the form, click the image list control to select it.
Then:

Click the arrow button on the control
.
Then click Choose Images

In the Properties window, click the ellipsis button of the Images
field

This would open the Images Collection Editor. To add a
picture, you can click the Add button, locate a picture and select it. You
can continue doing this until you have selected all necessary pictures. Here
is an example:

After selecting the pictures, you can click OK.

To assist you with creating the list of images, the
ImageList class is equipped with a property named Images, which
is a collection. The ImageList.Images property is of type
ImageCollection. The ImageCollection class implements the
IList, the ICollection, and the IEnumerable interfaces.

Using the ImageCollection class through the
Images property, you can add the necessary icons or pictures one at a
time. To help you with this, the ImageCollection class implements the
Add() method. If you are creating a list of icons, you can call the
following version of the Add() method:

public void Add(Icon value);

If you are creating a list of pictures, you can call the
following version of the Add() method:

In the Images Collection Editor, click Add, locate one of the
pictures you had saved, select it, and click Open

Do the same to select the other pictures

Click OK

Using an Image List

After creating an image list, you can use it in your
application. As it name implies, an image list is just a collection of
images. The control that holds this collection does not define why or when
the images would be used. Some Windows controls, such as the list view, the
tab control or the toolbar, use them. Most of the time, you will know when a
certain control needs an image list and how to use it. Otherwise, you can
use the pictures in an image list in various ways. For example, you can use
those pictures like any others, such as to display one on a form.

To support the ability to display the pictures of an
image list, the ImageList class is equipped with a method named
Draw. When calling this method, because the image list doesn't know
where it would be used, and because the target control would not define
where the picture is coming from, the primary argument to this method is the
platform on which to display the picture. This platform is a Graphics
object. Once you have decided on the receiving graphics, you must specified
the location where the picture would be positioned. You have two primary
options. You can specify the location by the left and top coordinates. In
this case, you would use the following version of the Draw() method:

public void Draw(Graphics g, int x, int y, int index);

Alternatively, you can specify the location by a
Point value. In this case, you would use the following version of the
method:

public void Draw(Graphics g, Point pt, int index);

In both cases, the last argument is the index of the
desired picture within the collection.

When drawing the pictures of an image list, you can
designate one color that the compiler will ignore or "see through". This is
referred to as the transparent color. To support this, the ImageList
class is equipped with a property named TransparentColor, which is of
type Color.