Windows Controls: The Image Editor

	Windows Controls: The Image Editor

Introduction

An image editor is a dialog box used to change the design of a small picture (bitmap). The picture is usually the type used on a button or on an object of that size. The image editor is divided in four sections:

Image Editor

The top-left section displays the picture that is being modified. It is made of small squares where each represents a pixel. The lower-left section shows the current preview of the bitmap. The top-right sectioon allows the user to select one of 20 pre-set colors. It the user wants a color that is not currently there, he or she can click the Other button. This would display the MFC Colors dialog box where the user can select a color and click OK. The lower-right section presents the tools the user can use to design the picture. After modifying the picture, to keep the new design, the user can click OK. If the user clicks Cancel, any change that was made on the picture would be dismissed.

Creating an Image Editor

A image editor is based on the CMFCImageEditorDialog class. This class is derived from CDialogEx. To prepare the image editor, declare a variable of type CMFCImageEditorDialog. The class is equipped with one constructor whose syntax is:

CMFCImageEditorDialog(
   CBitmap* pBitmap,
   CWnd* pParent = NULL,
   int nBitsPixel = -1 
);

This constructor takes three arguments but only the first is required. The minimum piece of information to an image editor is the bitmap that would display on the top-left side of the dialog box. The picture should have a size of 16x16 pixels or less.You can first import the picture as a resource:

Bitmap Design

You can declare a variable of type CBitmap, call its LoadBitmap() member and pass the ID of the bitmap to it, then pass that CBitmap variable to the CMFCImageEditorDialog constructor.

Since the CMFCImageEditorDialog class is derived from CDialogEx, to display it to the user, call its DoModal() member function. Here is an example:

void CExerciseDlg::OnBnClickedImageEditor()
{
	// TODO: Add your control notification handler code here
	CBitmap bmpExercise;
	bmpExercise.LoadBitmapW(IDB_EXERCISE);
	CMFCImageEditorDialog dlg(&bmpExercise);

	dlg.DoModal();
}

Edit Button Image