Main Page

Image Lists

You use image lists to store images; they form a kind of image repository. This doesn't sound terribly useful, but in fact, there are plenty of controls that are designed to work with image lists: list views, tree views, toolbars, tab controls, checkboxes, buttons, radio buttons, and labels—all of which have an ImageList (or SmallImageList and LargeImageList) and ImageIndex property.

When you associate an image list with a control's ImageList property, you can specify which image appears in the control with the ImageIndex property. The images in an image list are indexed—starting at zero—and you can switch the image displayed in a control at run time by changing the value of the ImageIndex property.

However, image list controls weren't really introduced to work with buttons or checkboxes; they appeared along controls that can handle many images at once, like tree views and list views. These kinds of controls may display dozens of images at once (such as the icons for the individual items in a list view), and that's when using image lists start to make sense, because such controls can simply take those images from the image list, one after the next.

The central property in image list controls is Images, which contains the pictures to be used by the control; you can access the images in this collection by index. The ColorDepth property determines the number of colors that the images are rendered with. Note that images will all be displayed at the same size, as set by the ImageSize property. This property is set to 16×16 pixels by default (the size of a small icon), so you should most likely change that when you load your images into the list.

You can see an image list at work in Figure 10.1, which is the ImageLists example on the CD-ROM; I've loaded four images into the image list in this example. The top image is displayed in a label, using the label's ImageList property. When you click the "New image" button, the next image appears, simply by changing the label's ImageIndex property. The middle image is displayed in a picture box, which doesn't have an ImageList property, but we can use the picture box's Image property instead if we handle the details of loading new images into that property as needed. The bottom image is actually displayed in a panel, which doesn't have either an ImageList or an Image property; we're drawing the image in the panel directly, which will take a little bit of cleverness. (Strictly speaking, this isn't necessary, because panels do support a BackgroundImage property, but this example shows how to use image list's Draw method, which lets you draw in practically any control.)