Thursday, March 07, 2013

[ MFC ] - Setting Image Background for dialog

1. Introduction

In this article, we are going to see how do we set the background image for the dialog based application. You can use the same technique specified here for any dialog by handling the WM_PAINT message.

The example for this article is shown below:

2. Add Bitmap Resource

First, we should create a bitmap resource. Once the resource is ready we can start adding the code to display the background image for the dialog. Follow the below-provided steps:

1) Create a Dialog based MFC Application and name it as DialogBackground.
2) Run the wizard created default application
3) Take screen shot of the dialog and paste it to the paint brush
4) Draw something manually inside the dialog display area.
5) Then copy the image from the display area and create a bitmap resource from it. This fifth step is shown in the below video

Once the resource is ready, we can display the image as a background for the dialog box.

3. About the source code

Modify the OnPaint() handler as shown below:
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;
                                   int x = (rect.Width() - cxIcon + 1) / 2;
                                   int y = (rect.Height() - cyIcon + 1) / 2;
                                   // Draw the icon
                                   dc.DrawIcon(x, y, m_hIcon);
                                   //Sample 01: Required Declarations
                                   CDC MemDC ;
                                   CBitmap bmp ;
                                   CPaintDC dc(this);
                                   //Sample 02: Get the Client co-ordinates
                                   CRect rct;
                                   //Sample 03: Create the Dialog Compatible DC in the memory,
                                   //                                                                                                      Then load the bitmap to the memory.
                                   MemDC.CreateCompatibleDC ( &dc ) ;
                                   bmp.LoadBitmap ( IDB_BITMAP_BKGR ) ;
                                   MemDC.SelectObject ( &bmp ) ;
                                   //Sample 04: Finally perform Bit Block Transfer (Blt) from memory dc to
                                   //                                                                                                     dialog surface.
                                   dc.BitBlt ( 0, 0, rct.Width() , rct.Height() , &MemDC, 0, 0, SRCCOPY ) ;
Sample 01: Required declarations are added.

Sample 02: The client coordinate of the displayed dialog is retrieved and stored in a CRect instance rct.  Note this client rectangle returned will match the dimension of the bitmap resource that we created earlier.

Sample 03: The method call CreateCompatibleDC will create the memory device context which compatible to the dialog. That is it takes the settings (Pen, Brush etc) from the device context of the dialog.  Once the Memory device context is created, we load the bitmap from the resource into CBimap object bmp. Finally, we load this bitmap to the memory device context MemDC.

Sample 04: BitBlt is called on the CPaintDC.  BitBlt stands for Bit Block Transfer. Here we are transferring the bitmap content prepared in the memory (MemDC) to the destination CDialog.

Look at the below video to see the output:

Source Code: Download

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Firend :)