Creating Shaped Windows Using Regions with Win32

WEBINAR: On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

Environment: VC6, Windows 9x/NT/2000/XP

This article shows how to create a shaped window using a bitmap image file and using the mouse to drag it.

The basic scheme is to scan a bitmap image data, skip over the transparent pixels, and create the region when a non-transparent pixel is found. For subsequent non-transparent pixels, the region is combined with the previous one. The transparent pixel is a particular color value of the pixel that is not used to create the window.

Getting Started

The first requirement is to create a bitmap image using image editors such as MSPaint, Photoshop, and so forth. This bitmap must have, apart from other colors used, one color that is to be interpreted as a transparent color by the application program. For example, white means a pixel RGB value of RGB(255,255,255). So, the program will skip all the bitmap data corresponding to this color for processing.

Understanding the Application

We start by creating a modeless dialog box:

HWND hwndDlg = CreateDialog(hInstance,
                            MAKEINTRESOURCE(IDD_DIALOG1),
                            ghWnd, (DLGPROC)DialogProc);

The next step is creating the region window. This includes loading the bitmap image file into memory and obtaining information about the bitmap image (such as the width and height of the image.)

HANDLE hBitmap = (HBITMAP)LoadImage(GetModuleHandle(NULL),
                                    imageFile, IMAGE_BITMAP, 0, 0,
                                    LR_LOADFROMFILE);

To create the region, the bitmap data is scanned and all the RGB color values corresponding to the transparent color are skipped from processing. For all the other color values, their corresponding logical coordinates are used to create the region.

//create an empty region
hRgn = CreateRectRgn(0,0,0,0);
//Create a region from a bitmap with transparency colour of white
//change the pixel values for a different transparency color
//ex - RGB(0,0,0) will mean a transparency color of black.. so the
//areas of the bitmap not used to create the window will be black
COLORREF crTransparent = RGB(255, 255, 255);

int iX = 0;
int iRet = 0;
for (int iY = 0; iY < bmpInfo.bmHeight; iY++)
{
  do
  {
    //skip over transparent pixels at start of lines.
    while (iX < bmpInfo.bmWidth && GetPixel(hdcMem, iX, iY)
              == crTransparent) iX++;
    //remember this pixel
    int iLeftX = iX;
    //now find first non-transparent pixel
    while (iX < bmpInfo.bmWidth && GetPixel(hdcMem, iX, iY) !
              = crTransparent) ++iX;
    //create a temp region on this info
    HRGN hRgnTemp = CreateRectRgn(iLeftX, iY, iX, iY+1);
    //combine into main region
    iRet = CombineRgn(hRgn, hRgn, hRgnTemp, RGN_OR);
    if(iRet == ERROR)
    {
      return;
    }
    //delete the temp region for next pass
    DeleteObject(hRgnTemp);
  }while(iX < bmpInfo.bmWidth);
  iX = 0;
}

After the region is created, the window region is set by calling SetWindowRgn,

iRet = SetWindowRgn(hwndDlg, hRgn, TRUE);

and its position is set by calling SetWindowPos:

iRet = SetWindowPos(hwndDlg, HWND_TOPMOST, iX, iY, bmpInfo.bmWidth,
                    bmpInfo.bmHeight, NULL);

Finally, render the bitmap image into the region by calling the function BitBlt.

BitBlt(hdcDest, 0, 0, bmpInfo.bmWidth, bmpInfo.bmHeight, hdcMem,
                0, 0, SRCCOPY);

Dragging the Window

The window is dragged by handling messages in the dialog procedure:

case WM_LBUTTONDOWN:
  mouseState = 1;
  return TRUE;
case WM_MOUSEMOVE:
  if(mouseState)
  {
    GetCursorPos(&CursPt);
    PostMessage(hwnd, WM_NCLBUTTONDOWN, HTCAPTION,
                MAKELPARAM( CursPt.x, CursPt.y));
    mouseState = 0;
  }
  return TRUE;

Downloads

Download demo project - 11 Kb
Download source - 6 Kb


Comments

  • This is simply the best

    Posted by Legacy on 12/18/2003 12:00am

    Originally posted by: Venelin Petkov

    Thanks, really thanks for this example.
    Simplest solutions are always the most elegant.

    Reply
  • Excellent & Simple

    Posted by Legacy on 09/07/2003 12:00am

    Originally posted by: Rene Pilon

    Very nice!

    Reply
  • Good and not too sophisticated example

    Posted by Legacy on 06/04/2003 12:00am

    Originally posted by: Ernest Putnikoff

    The Title of my comment is self explanatory, thanks for the source, now working on adding various controls to it, thanks again :)

    Reply
  • May I add a link to my article here -- http://www.codeguru.com/dialog/RenderingRegion.html

    Posted by Legacy on 05/28/2003 12:00am

    Originally posted by: Zhefu Zhang

    do not blame on you, in the case of big bitmap file, the way you used will be terrible slow ( even of a 300 X 200 bitmap will let user feel that). For you modify the region on every pixel. A better way is to make as large as possible contiguous same color points rectangle, and add that rectangle into the region as a whole. please refer my article's reference on that topic.

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date