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
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
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
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
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:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
// 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: MFC BitBlt, MFC CBitmap, MFC CPaintDC, MFC CreateCompatibleDC, MFC LoadBitmap
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.