How To Overlay Images Using Image List Controls (125629)

SUMMARY

Image lists provide an easy way to manage a group of bitmaps and draw them on the screen, without having to worry about calling CreateCompatibleDC(), SelectObject(), BitBlt(), StretchBlt(), and so on.

One interesting feature that image lists provide through the ImageList_Draw() API is the ability to overlay images -- that is, to draw an image transparently over another image. Calling ImageList_Draw() with the last parameter set to an index to an overlay mask instructs the image list to draw an image, and draw the overlay mask on top of it.

MORE INFORMATION

To overlay images correctly using image lists, follow these steps:

Create a bitmap that will have the images you want to draw as well as the overlay images you want drawn on top of these images.

For example, say you have a bitmap of four 16x16 images:
- a green circle
- a red circle
- a panda
- a frog

Create an image list out of the bitmap you've created in step 1 by using ImageList_LoadImage() as shown here:

      hImageList = ImageList_LoadImage (hInst,
                                        "MyBitmap",
                                        16,
                                        4,
                                        RGB (255,0,0),
                                        IMAGE_BITMAP,
                                        0);

Decide which images you want to specify as overlay masks, and tag them as such by using the ImageList_SetOverlayImage() function. The following code specifies the panda and the frog (with 0-based index, this comes out to image 2 and 3) as overlay masks 1 and 2.

NOTE: You can only specify up to four overlay masks per image list.

      ImageList_SetOverlayImage (hImageList,
                                 2,     // 0-based index to image list.
                                 1);    // 1-based index to overlay mask.


      ImageList_SetOverlayImage (hImageList,
                                 3,     // 0-based index to image list.
                                 2);    // 1-based index to overlay mask.

Draw the image. The following code draws the green circle (or image 0 in the example image list). Then it draws the panda (overlay image 1 in the example) on top of it.

      ImageList_Draw (hImageList,
                      0,    // 0-based index to imageList of image to draw.
                      hDC,   // handle to a DC.
                      16, 16 // (x,y) location to draw.
                      INDEXTOOVERLAYMASK (1));   // Overlay image #1.