Storing Pictures in an Image List

Many of the controls I discuss in this hour have the capability to attach pictures to different types of items. The Tree View control, which is used in Explorer for navigating folders, for example, displays images next to each folder node. Not all of these pictures are the same; the control uses specific pictures to denote information about each node. It would have been possible for Microsoft to make each control store its images internally, but that would be highly inefficient because it wouldn't allow controls to share the same picturesyou'd have to store the pictures in each control that needed them. This would also cause a maintenance headache. For example, say that you had 10 Tree View controls and each displays a folder image for folder nodes. Now, it's time to update your application and you want to update the folder image to something a bit nicer. If the image were stored in each Tree View control, you'd have to update all 10 of them (and risk missing one). Instead, Microsoft created a control dedicated to storing pictures and serving them to other controls: the Image List. When you put images in an Image List control, it's easy to share them among other types of controls.

You're not going to use the Picture Viewer for this section, so follow these steps to create a new project:

1.	Create a new Windows Application named Lists and Trees.
2.	Right-click Form1.cs in the Solution Explorer, choose Rename, and change the name of the form to fclsListsAndTrees.cs. Also, set its Text property to Lists and Trees (you'll need to click the form once to access its design properties).
3.	Next, add a new Image List control to the form by double-clicking the ImageList item in the toolbox (it's located in the Components toolbox category). As with the Timer control, the Image List is an invisible-at-runtime control, so it appears below the form, not on it. Change the name of the Image List to imgMyImages.
4.	The sole purpose of an Image List control is to store pictures and make them available to other controls. The pictures are stored in the Images collection of the control. Click the Images property of the Image List control in the Properties window and then click the small button that appears (the button with the three dots, called a Build button). Visual C# displays the Image Collection Editor. Notice that this editor is similar to other editors you've used in this hour.
5.	Click Add to display the Open dialog box and use this dialog box to locate and select a 16x16 pixel icon. If you don't have a 16x16 pixel icon, you can create a BMP using Microsoft Paint, or download samples I've provided at http://www.samspublishing.com/ or http://www.jamesfoxall.com/books.htm. After you've added an image, click OK to close the Image Collection Editor.

Take a look at the ImageSize property of the Image control. It should be 16,16. If it isn't, the bitmap you selected isn't 16x16 pixels; this property is set to the dimensions of the first picture added to the Image List.

You can't always rely on the background of where a picture will be displayed to be whiteor any other color for that matter. Because of this, the Image List control has a transparentColor property. By default, the transparentColor property is set to Transparent. Because we used an icon file here, and icon files maintain their own transparency information, we are going to leave this property alone. If we were using a BMP file, or some other format that doesn't retain transparency information, we would want to use this property to designate a color in the bitmap that would appear transparent when used with another control.

That's all there is to adding images to an Image List control. The power of the Image List lies not in properties or methods of the control itself, but in its capability to be linked to other controls so that they can access the pictures the Image List stores.