How To Overlay Images Using Image List Controls

MORE INFORMATION

1. 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
2. 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);
   					

3. 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.
   					

4. 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.