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:
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:
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.
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):
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:
- 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.
- In the ‘Add Resource’ dialog Select the bitmap option.
- Click on the ‘New’ button to add the Bitmap as a resource to our project.
- Click on the Empty area as shown in the below picture. Then right click it.
- 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:
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.
CPaintDC dc(this); // device context for painting
// Center icon in client rectangle
int cxIcon = GetSystemMetrics(SM_CXICON);
int cyIcon = GetSystemMetrics(SM_CYICON);
int x = (rect.Width() - cxIcon + 1) / 2;
int y = (rect.Height() - cyIcon + 1) / 2;
// Draw the icon
dc.DrawIcon(x, y, m_hIcon);
//Snippet 01: Get Client Coordinate of the Rectangle
//Snippet 02: Declare Device Contexts and bitmap
//Snippet 03: Load Image to Memory
//Snippet 04: Copy memory pixels to dialog surface
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.