Often you need to use images that are related in some way. For example, your application might have a toolbar with many command buttons, each of which uses a bitmap for its icon. In a case like this, it would be great to have some sort of program object that could not only hold the bitmaps but also organize them so that they can be accessed easily. That’s exactly what an image list control does for you—it stores a list of related images. You can use the images any way that you see fit in your program. Several common controls rely on image lists. These controls include the following:

You will undoubtedly come up with many other uses for image lists. You might, for example, have an animation sequence that you’d like to display in a window. An image list is the perfect storage place for the frames that make up an animation, because you can easily access any frame just by using an index.

If the word index makes you think of arrays, you’re beginning to understand how an image list stores images. An image list is very similar to an array that holds pictures rather than integers or floating-point numbers. Just as with an array, you initialize each "element" of an image list and thereafter can access any part of the "array" by using an index.

You won’t, however, see an image list control in your running application in the same way that you can see a status bar or a progress bar control. This is because (again, similar to an array) an image list is only a storage structure for pictures. You can display the images stored in an image list, but you can’t display the image list itself. Figure 8.2 shows how an image list is organized.

FIG. 10.2 An image list is much like an array of pictures.

In the Common Controls App application, image lists are used with the list view and tree view controls, so the image lists for the controls are created in the CreateListView() and CreateTreeView() local member functions and are called from CCommonView::OnCreate(). Just as with the other controls, add calls to these functions to OnCreate() and then add the functions to the class. You will see the full code for those functions shortly, but because they are long, this section presents the parts that are relevant to the image list.

A list view uses two image lists: one for small images and the other for large ones. The member variables for these lists have already been added to the class, so start coding CreateListView() with a call to each list’s Create() member function, like this:

The Create() function’s five arguments are

This last value is 0 to indicate that the list isn’t allowed to grow during runtime. The Create() function is overloaded in the CImageList class so that you can create image lists in various ways.

After you create an image list, you will want to add images to it. After all, an empty image list isn’t of much use. The easiest way to add the images is to include the images as part of your application’s resource file and load them from there. Add these four lines to CreateListView() to fill each list with images:

Here the program first gets a handle to the icon. Then it adds the icon to the image list by calling the image list’s Add() member function. (In this case, the list includes only one icon. In other applications, you might have a list of large icons for folders, text files, and so on, as well as another list of small icons for the same purposes.) To create the first icon, choose Insert, Resource and double-click Icon. Then edit the new blank icon in the Resource Editor. (It will automatically be called IDI_ICON1.) Click the New Device Image toolbar button next to the drop-down box that says Standard (32*32) and choose Small (16*16) on the dialog that appears; click OK. You can spend a long time making a beautiful icon or just quickly fill in the whole grid with black and then put a white circle on it with the Ellipse tool. Add another icon, IDI_ICON2, and leave it as 32*32. Draw a similar symbol on this icon.

You can use many member functions to manipulate an object of the CImageList class, adjusting colors, removing images, and much more. 

You can write the first few lines of CreateTreeView() now. It uses one image list that starts with three images. Here’s the code to add:

Create IDI_ICON3, IDI_ICON4, and IDI_ICON5 the same way you did the first two icons. All three are 32*32. Draw circles as before. If you leave the background the same murky green you started with, rather than fill it with black, the circles will appear on a transparent background—a nice effect.