Making Bitmap Backgrounds Transparent in Windows CE Applications

Monday Apr 14th 2003 by Nancy Nicolaisen

Learn how to create and use a transparent or opaque bitmap image in a Windows CE application.

Sometimes, it's useful to be able to display the foreground layer of a bitmap by itself. In the following figure, notice how the rooster, penguin, and cockatoo appear to be drawn on the background of the viewport. In fact, each of these images is a rectangular bitmap. The entire bitmap is painted in the client area, but the background pixels of the bitmap are combined with the client area pixels "transparently." Essentially, this makes the bitmap behave like a slide on an overhead projector: only the image is visible at the destination.

We use the device-dependent bitmap function TransparentImage() to create this effect. This API draws a bitmap on the screen, treating all the bitmap pixels of a specified color as transparent. In other words, the existing window background shows through the "transparent" pixels. In the DuckStamps example program, you'll see how to use TransparentImage().

Click here for a larger image.

Figure 1—Using TransparentImage() to display bitmaps in the DuckStamps example program.

DuckStamps is a simple windows application, and you've seen the basics of window creation and message handling in earlier examples. In this example, we are primarily interested in the MyPaint() function, which is the scene of all the action related to transparent bitmap display.

Notice that in this example, we use BeginPaint() and EndPaint(). We can do this because we have enough information to completely repaint the client area whenever we enter this function. Just to reiterate a point made in earlier examples, BeginPaint() will completely erase the client area before updating. If we had a reason to preserve an earlier drawing, we'd use a different prologue/epilogue sequence in the paint process.

The DuckStamps example allows a user to view a bitmap with either a transparent or opaque background. This choice is made by using a drop-down menu. The background type selection is detected in the message switch code and saved in a global variable. We'll use the global when we paint the bitmap. Here is the switch code fragment for setting the bitmap background type:

  switch (wmId)
         iView = TRANSPARENT_STAMP;
      case IDM_VIEW_OPAQUE:
         iView = OPAQUE_STAMP;

The first time we load a bitmap, we sample the background color of the image, and save it in the array, crTransparentColor. There are four elements in the array, one for each of the bitmaps:

//global data
COLORREF    crTransparentColor[4];  // which color to 
                                    // make transparent

// for each bitmap, find the COLOREF value we'll
// use to make transparent pixels
  if( bFirstTime )
    //save the COLOREF value in a global array of 
    crTransparentColor[i] = GetPixel( hdc, x + 1, y + 1 );

We use the COLORREF to determine which color in the source bitmap will become "transparent" when the source and destination bitmaps are combined. Replacing a specific color in the source with the background color of the destination is what creates transparent bitmaps.

When the user chooses "Transparent" from the View menu, we call TransparentImage() to display the bitmaps:

  TransparentImage(hdc, x, y, bmp.bmWidth, bmp.bmHeight,
                   hdcMemory, 0, 0, bmp.bmWidth, bmp.bmHeight,

TransparentImage() has two more parameters than BitBlt(). Here is its function declaration:

BOOL TransparentImage(HDC hdcDest,
                      LONG DestOriginX, LONG DestOriginY,
                      LONG DestWidth,   LONG DestHeight,
                      HANDLE hSrc,
                      LONG SrcOriginX,  LONG SrcOriginY,
                      LONG SrcWidth,    LONG SrcHeight,
                      COLORREF TransparentColor );

The extra parameters, SrcWidth and SrcHeight, allow you to isolate and use rectangular regions of the source image.


Download Source code:

Looking Ahead

In the next episode, we'll learn a few things about graphics tools such as pens and brushes, and also provide some tips for deciding when to use device-independent bitmaps.

About the Author

Nancy Nicolaisen is a software engineer who has designed and implemented highly modular Windows CE products that include features such as full remote diagnostics, CE-side data compression, dynamically constructed user interface, automatic screen size detection, entry time data validation.

In addition to writing for, she has written several books including Making Win 32 Applications Mobile. She has also written numerous articles on programming technology for national publications including Dr. Dobbs, BYTE Magazine, Microsoft Systems Journal, PC Magazine; Computer Shopper, Windows Sources and Databased Advisor.

# # #

Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved