Displaying Bitmaps

 

Introduction

This exercise shows how to display and change bitmaps with little effort.

Prerequisites:

 

Preparing the Picture

  1. First create or load a picture in a graphics application, such as MS Paint or Paint Shop Pro, that can create good pictures. Don't use the Image Editor of MSVC. For example, here is a picture in Microsoft Paint (MS Paint is an application that installs with Microsoft Windows):
     
    Microsoft Paint
  2. Save the picture as a bitmap (with the .bmp extension) and remember where you save it.

Creating the Application

  1. Start Microsoft Visual Studio or Microsoft Visual C++ and, using MFC AppWizard (exe) or MFC Application, create a Dialog-Based project named Bitmaps1
  2. Delete the TODO line on the dialog box
  3. To add the bitmap picture, in the Resource View, right-click any folder and click Import...
  4. In the Import Picture dialog box, change the files of type to All Files
  5. Locate the folder where you saved the picture and display it in the Look In combo box
     
    Import Resource
  6. Click the name of the picture and click Import
  7. You should receive a message box. Read it and click OK.
    Right-click the name IDB_BITMAP1 and click Properties. Change its ID to IDB_PICTURE1
  8. From the Controls toolbox, click the Picture control and draw the frame of the picture where you want to display the picture on the dialog box. Here is an example
     
    Adding a Picture control to a dialog box
  9. In the Properties window, change its ID to IDC_PICTURE
  10. Change its Type to Bitmap and, in the Image combo box, select IDB_PICTURE1 and click anywhere on the dialog box:
     
    Displaying a picture
  11. As you can see, this was done without a single line of code. You can test the application now to see the result.
 
 

Changing Bitmaps

  1. Create additional pictures using MS Paint and save the pictures as Windows Bitmap (.bmp)
    Besides the above Picture1.bmp, here are the pictures we will use here:
     
    Smile
    Satellite Dish
    Busy Man
    Ocean
  2. Import the pictures as we did for the above Picture1.bmp
  3. Change their IDs to IDB_PICTURE2, IDB_PICTURE3, IDB_PICTURE4, and IDB_PICTURE5
  4. Add a combo box under the OK button and change its ID to IDC_CHOICE
     
    Adding a combo box
  5. Using Ctrl + Enter in the Data property page, create a list as follows:
     
    The Properties Window
  6. Set its Type to Drop List and the Owner Draw to No
  7. Uncheck the Sort check box
  8. In the header file of the dialog, declare a private CBitmap variable for each picture. Here is an example:
     
    private:
    	CBitmap Bmp1, Bmp2, Bmp3,  Bmp4,  Bmp5;
    };
  9. Press Ctrl + W to display the MFC ClassWizard dialog box.
  10. From the Member Variables dialog box, Add a Control variable for the IDC_CHOICE identifier and name it m_Choice
  11. Add a Control variable for the IDC_PICTURE identifier and name it m_Picture
  12. Add a CBN_SELCHANGE event handler for the IDC_CHOICE control and click Edit Code
  13. In the OnInitDialog() method, type the following:
     
    BOOL CBitmaps1Dlg::OnInitDialog()
    {
    	CDialog::OnInitDialog();
    
    	. . .
    	
    	// TODO: Add extra initialization here
    	// TODO: Add extra initialization here
    	m_Choice.SetCurSel(0);
    
    	Bmp1.LoadBitmap(IDB_PICTURE1);
    	Bmp2.LoadBitmap(IDB_PICTURE2);
    	Bmp3.LoadBitmap(IDB_PICTURE3);
    	Bmp4.LoadBitmap(IDB_PICTURE4);
    	Bmp5.LoadBitmap(IDB_PICTURE5);
    
    	return TRUE;  // return TRUE  unless you set the focus to a control
    }
  14. Implement the OnSelchange event as follows:
     
    void CBitmaps1Dlg::OnSelchangeChoice() 
    {
    	// TODO: Add your control notification handler code here
    	// What is the current selection?
    	int CurSel = m_Choice.GetCurSel();
    
    	// Change the bitmap according to the selection
    	switch( CurSel )
    	{
    	case 0:
    		m_Picture.SetBitmap(Bmp1);
    		break;
    	case 1:
    		m_Picture.SetBitmap(Bmp2);
    		break;
    	case 2:
    		m_Picture.SetBitmap(Bmp3);
    		break;
    	case 3:
    		m_Picture.SetBitmap(Bmp4);
    		break;
    	case 4:
    		m_Picture.SetBitmap(Bmp5);
    		break;
    	}
    }
  15. Test the application
     
    Displaying bitmaps

 

 

Home Copyright © 2003 FunctionX, Inc.