Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

MFC Dialog Background With Bitmap Image

1. About this Example

In this article, we will see how to set the dialog background for the dialog-based MFC application. Here, we create a bitmap as the MFC dialog background. One can use the same technique for any dialog by handling the WM_PAINT message. The below picture shows the example which we will create:

MFC Dialog Background Example

MFC Dialog Background Example

2. Prepare Dialog Background Bitmap in Paintbrush

We will change the default MFC dialog background with an Image. So, we have to create an MFC resource for the Bitmap. With the bitmap on hand, we can load it as an MFC resource and display it as dialog background.

As a first step, we will create a dialog-based MFC Application. While making we will name it as ‘DialogBackground’ and accept the default for all other settings. Once the application is ready by the wizard, we will save the project and run it once. When windows displays our application, we can take a screenshot of the dialog and place that in the paintbrush as shown below:

MFC Dialog in Microsoft Paint

MFC Dialog in Microsoft Paint

Now we will copy only the grey area from the dialog using the rectangle select tool. In the below picture marked item 1 shows the tool, marked item 2 shows what part of the dialog we are copying to clipboard.

Copying Client Area to Clipboard

Copying Client Area to Clipboard

Now we will open a new paintbrush and paste the client area of the MFC dialog in the clipboard. Once it is copied, one can change the image for the dialog background using paintbrush tools. The below screenshot shows our tiled image for the dialog (That is all my creativity. You can create a better image):

Tiled Bitmap Image matching the size of dialog's client area

Tiled Bitmap Image matching the size of dialog’s client area

3. Adding Image as Bitmap Resource

Now the image with exact client size area is ready. We will add this as a Bitmap resource to our project. First select the full image from Paint brush and click copy. Follow the steps below and these steps are shown in the picture as well:

  1. Go to the Resource view and then expand the project name. Then right click on the ‘.rc’ folder and select ‘Add Resource…’ option from the displayed context menu.
  2. In the ‘Add Resource’ dialog Select the bitmap option.
  3. Click on the ‘New’ button to add the Bitmap as a resource to our project.
  4. Click on the Empty area as shown in the below picture. Then right click it.
  5. Click the Paste option from the context menu. This will transfer the image from Clipboard to the Resource. Save the project.

The steps are in the below picture:

Add Tiled Bitmap Image as Bitmap Resource

Add Tiled Bitmap Image as Bitmap Resource

4. Displaying Image as Dialog Background

We have the image as bitmap resource. Now it is time to change the Paint handler for the MFC dialog and set this image as background. The complete paint handler code change is below in which look at the else portion:

// If you add a minimize button to your dialog, 
//you will need the code below to draw the icon.  
//For MFC applications using the document/view model,
//  this is automatically done for you by the framework.
 
void CDialogBackgroundDlg::OnPaint()
{
    if (IsIconic())
    {
        CPaintDC dc(this); // device context for painting
 
        SendMessage(WM_ICONERASEBKGND, 
      reinterpret_cast<WPARAM>(dc.GetSafeHdc()), 
      0);
 
        // Center icon in client rectangle
        int cxIcon = GetSystemMetrics(SM_CXICON);
        int cyIcon = GetSystemMetrics(SM_CYICON);
        CRect rect;
        GetClientRect(&rect);
        int x = (rect.Width() - cxIcon + 1) / 2;
        int y = (rect.Height() - cyIcon + 1) / 2;
 
        // Draw the icon
        dc.DrawIcon(x, y, m_hIcon);
    }
    else
    {
    //Snippet 01: Get Client Coordinate of the Rectangle
    CRect ClinetRect;
    this->GetClientRect(&ClinetRect);
 
    //Snippet 02: Declare Device Contexts and bitmap
    CDC memoryDC;
    CPaintDC DialogDC(this);
    CBitmap tiledImage;
 
    //Snippet 03: Load Image to Memory
    memoryDC.CreateCompatibleDC(&DialogDC);
    tiledImage.LoadBitmap(IDB_BITMAP1);
    memoryDC.SelectObject(&tiledImage);
 
    //Snippet 04: Copy memory pixels to dialog surface
    DialogDC.BitBlt(
      0,
      0, 
      ClinetRect.Width(), 
      ClinetRect.Height(),
      &memoryDC,
      0,
      0,
      SRCCOPY);
        CDialog::OnPaint();
    }
}

Code Explanation

Sample 01: First, we retrieve the Client area of the dialog box by calling the function ‘GetClientRect‘. We store that in a ‘CRect’ instance called ‘ClientRect’.

Sample 02: Next, we declare a CDC  instance and name it as memoryDC. This is where we load our bitmap. Then we create CPaintDC instance and it is to access dialog device context functions. Finally, we create the CBitmap instance to load the pixels information from our resource which we created in the previous step.

Sample 03: The ‘CreateCompatibleDC‘ will set up the Device context in memory compliant with our dialog box. The ‘LoadBitmap‘ function takes the Resource ID as argument and loads the image into the ‘CBitmap’ object. We give this image to our in-memory device context using the ‘SelectObject‘ function. At this stage our titled image is in the Memory Device Context.

Sample 04: Finally, we make use of BitBlt function to transfer the pixel bits from the memory device context to the Dialog surface. The net result is a dialog with an image background. One can use this technique to create any background style for the MFC dialog. ‘BitBlt’ stands for ‘Bit Block Transfer’. The first four parameters define the dialog destination for the transfer and next three parameters define a portion of the memory DC which is the source of the transfer. The final argument tells the function that we want the copy operation.

That is all, run the application to see an MFC Dialog with the changed background.

Categories: MFC

Tags: , , , ,

Do you like this Example? Share your thoughts!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.