Windows Controls: The MFC Button

	Windows Controls: The MFC Button

Introduction to the MFC Button

Description

The MFC library provides another enhanced version of the regular Win32 button. It has all the features of a normal button plus the characteristics of the bitmap button. For example, it makes it easy to show a picture on a button, to specify a cursor, and to use a tool tip.

Creating an MFC Button

To visually create an MFC button, on the Toolbox, click MFC Button Control and click the dialog box you are designing.

The MFC button uses a class named CMFCButton and that is based on the CButton class. Based on this, to programmatically get an MFC button, create a pointer to CMFCButton and initialize it using the new operator. The CMFCButton class doesn't override the Create() member function of its parent. Therefore, to specify the primary characteristics of an MFC button, call the Create() member function of the CButton class. Here is an example:

BOOL CExerciseDlg::OnInitDialog()
{
    CDialogEx::OnInitDialog();

    // Set the icon for this dialog.  The framework does this automatically
    //  when the application's main window is not a dialog
    SetIcon(m_hIcon, TRUE);			// Set big icon
    SetIcon(m_hIcon, FALSE);		// Set small icon

    // TODO: Add extra initialization here
    CMFCButton *btnSubmit = new CMFCButton;
    CRect rctButton(10, 12, 125, 44);

    btnSubmit->Create(_T("Submit"),
	              WS_CHILD | WS_VISIBLE | BS_ICON,
		      rctButton,
		      this,
		      12004);

    return TRUE;  // return TRUE  unless you set the focus to a control
}

Characteristics of the MFC Button

Introduction

The MFC button is primarily a regular button. This means that, when or after creating it, you can configure or change its style to make it a normal button, a radion button, a check box, or a command button. Still, the reason you may want to use this button is for its enhanced characteristics.

Like a normal button, the MFC button displays a caption and has an ID. After creating the button, you should add a control variable so you can programmatically configure its characteristics.

The Flat Style of an MFC Button

The MFC button supports various types of borders, referred to as its flat styles. To specify them during design, click the button on the dialog box and, in the Properties window, use the values of the Style field:

The styles of an MFC button

To let you programmatically specify the flat style, the CMFCButton class is equipped with a property named m_nFlatStyle. To specify the flat style, access its value from CMFCButton. The possible values are BUTTONSTYLE_3D, BUTTONSTYLE_FLAT, BUTTONSTYLE_SEMIFLAT, and BUTTONSTYLE_NOBORDERS. Here is an example:

BOOL CExerciseDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// Set the icon for this dialog.  The framework does this automatically
	//  when the application's main window is not a dialog
	SetIcon(m_hIcon, TRUE);			// Set big icon
	SetIcon(m_hIcon, FALSE);		// Set small icon

	// TODO: Add extra initialization here
	m_Calculate.m_nFlatStyle = CMFCButton::BUTTONSTYLE_FLAT;
	
	return TRUE;  // return TRUE  unless you set the focus to a control
}

Using a Cursor

By default, the MFC button displays the normal cursor when the mouse is positioned on it. The MFC button gives you the option to use a different cursor. At design time, to specify that the button will use a hand cursor, in the Properties window, click Cursor Type and select Hand. To programmatically set the cursor to a hand, you can call the SetMouseCursorHand() member function. Its syntax is:

void SetMouseCursorHand();

To let you programmatically specify the cursor, the CMFCButton class provides the SetMouseCursor() member function whose syntax is:

void SetMouseCursor(HCURSOR hcursor);

Before calling this member function, you can first import a cursor file to your project. Call the LoadCursor() function and pass its returned value to the CMFCButton::SetMouseCursor() member function. Here is an example:

BOOL CExerciseDlg::OnInitDialog()
{
    CDialogEx::OnInitDialog();

    // Set the icon for this dialog.  The framework does this automatically
    //  when the application's main window is not a dialog
    SetIcon(m_hIcon, TRUE);			// Set big icon
    SetIcon(m_hIcon, FALSE);		// Set small icon

    // TODO: Add extra initialization here
    m_Calculate.SetMouseCursor(LoadCursor(AfxGetInstanceHandle(),
                               MAKEINTRESOURCE(IDC_CURSOR1)));

    return TRUE;
}

Using a Tool Tip

To provide more information about a button, you can display a tool tip when the mouse is positioned on top of it. To do this visually, in the Properties window, click Tooltip and type the desired string. To let you programmatically create a tool tip, the CMFCButton class is equipped with the SetTooltip() member function. Its syntax is:

void SetTooltip(LPCTSTR lpszToolTipText);

Here is an example of calling this function:

BOOL CExerciseDlg::OnInitDialog()
{
    CDialogEx::OnInitDialog();

    // Set the icon for this dialog.  The framework does this automatically
    //  when the application's main window is not a dialog
    SetIcon(m_hIcon, TRUE);			// Set big icon
    SetIcon(m_hIcon, FALSE);		// Set small icon

    // TODO: Add extra initialization here
    m_Calculate.SetTooltip(_T("Click this button to perform the calculation"));
	
    return TRUE;  // return TRUE  unless you set the focus to a control
}

Displaying an Icon

To enhance the appearance of an MFC button, you can display an icon on its face. To support this, the class is equipped with a member function named SetImage and that is overloaded with three versions. The version for an icon uses the following syntax:

void SetImage(HICON hIcon,
   	      BOOL bAutoDestroy=TRUE,
   	      HICON hIconHot=NULL,
   	      HICON hIconDisabled=NULL,
   	      BOOL bAlphaBlend=FALSE 
);

Only the first argument is required. Before using it, you can first import an icon file to your project and give that icon an ID. Call the LoadIcon() function and pass its returned value to the CMFCButton::SetImage() member function. Here is an example:

BOOL CExerciseDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// Set the icon for this dialog.  The framework does this automatically
	//  when the application's main window is not a dialog
	SetIcon(m_hIcon, TRUE);			// Set big icon
	SetIcon(m_hIcon, FALSE);		// Set small icon

	// TODO: Add extra initialization here
	m_Calculate.SetImage(LoadIcon(AfxGetInstanceHandle(),
                                      MAKEINTRESOURCE(IDI_ARROW)));
                                      
	return TRUE;  // return TRUE  unless you set the focus to a control
}

It is important to know that icons usually have a 16x16 or a 32x32 pixels size. If you call the SetImage() member function, the 32x32 pixel size would be used. If you'd rather use the 16x16 size, you may have to call the LoadIcon() member function of the CButton class.

Displaying a Picture

If you don't want to deal with the size limits of an icon, you can call one of the other two versions of the CMFCButton::SetItmage() member functions. Their syntaxes are:

void SetImage(HBITMAP hBitmap,
	      BOOL bAutoDestroy = TRUE,
	      HBITMAP hBitmapHot = NULL,
	      BOOL bMap3dColors = TRUE,
	      HBITMAP hBitmapDisabled = NULL);
void SetImage(UINT uiBmpResId,
 	      UINT uiBmpHotResId = 0,
 	      UINT uiBmpDsblResID = 0);

Before using one of these versions, you should first import or design 1 to 4 bitmaps and give them IDs. When you call this member function, you can pass the ID(s) of the bitmap(s) as argument(s):

If you pass only the first argument, it would display all the time. Here is an example:

BOOL CExerciseDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// Set the icon for this dialog.  The framework does this automatically
	//  when the application's main window is not a dialog
	SetIcon(m_hIcon, TRUE);			// Set big icon
	SetIcon(m_hIcon, FALSE);		// Set small icon

	// TODO: Add extra initialization here
	m_Calculate.SetImage(IDB_CALCULATE1);
	
	return TRUE;  // return TRUE  unless you set the focus to a control
}

If you pass two IDs with the second ID as the hBitmapHot or the uiBmpHotResId arguments, the bitmap of the first would display when the mouse is not on top of the button. The second bitmap would display when the mouse is positioned on, or passes over the button. Here is an example:

BOOL CExerciseDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// Set the icon for this dialog.  The framework does this automatically
	//  when the application's main window is not a dialog
	SetIcon(m_hIcon, TRUE);			// Set big icon
	SetIcon(m_hIcon, FALSE);		// Set small icon

	// TODO: Add extra initialization here
	m_Calculate.SetImage(IDB_CALCULATE1, IDB_CALCULATE2);
	
	return TRUE;  // return TRUE  unless you set the focus to a control
}

If you pass three IDs with the third argument as hBitmapDisabled or uiBmpDsblResID of the member function, the bitmap of the third ID would be used when the button is disabled. Here is an example:

BOOL CExerciseDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// Set the icon for this dialog.  The framework does this automatically
	//  when the application's main window is not a dialog
	SetIcon(m_hIcon, TRUE);			// Set big icon
	SetIcon(m_hIcon, FALSE);		// Set small icon

	// TODO: Add extra initialization here
	m_Calculate.SetImage(IDB_CALCULATE1, IDB_CALCULATE2, IDB_CALCULATE3);
	
	return TRUE;  // return TRUE  unless you set the focus to a control
}

Painting the Body of a Button With a Color

To paint an MFC button with a color of your choice, you can call the SetFaceColor() member function. Its syntax is:

void SetFaceColor(COLORREF crFace, BOOL bRedraw=TRUE);

Here is an example:

BOOL CExerciseDlg::OnInitDialog()
{
    CDialogEx::OnInitDialog();

    // Set the icon for this dialog.  The framework does this automatically
    //  when the application's main window is not a dialog
    SetIcon(m_hIcon, TRUE);			// Set big icon
    SetIcon(m_hIcon, FALSE);		// Set small icon

    // TODO: Add extra initialization here
    m_Calculate.SetFaceColor(2252835);

    return TRUE;  // return TRUE  unless you set the focus to a control
}

The Color of Text on a Button

To specify the color used on the caption of an MFC button, you can call the SetTextColor() member function whose syntax is:

void SetTextColor(COLORREF clrText);

Here is an example:

BOOL CExerciseDlg::OnInitDialog()
{
    CDialogEx::OnInitDialog();

    // Set the icon for this dialog.  The framework does this automatically
    //  when the application's main window is not a dialog
    SetIcon(m_hIcon, TRUE);			// Set big icon
    SetIcon(m_hIcon, FALSE);		// Set small icon

    // TODO: Add extra initialization here
    m_Calculate.SetFaceColor(2252835);
    m_Calculate.SetTextColor(RGB(255, 255, 205));

    return TRUE;  // return TRUE  unless you set the focus to a control
}

You can also specify what color the caption should use when the mouse is positioned on the button. This is done by calling the SetTextHotColor() member function. Its syntax is:

void SetTextHotColor(COLORREF clrTextHot);

Here is an example:

BOOL CExerciseDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// Set the icon for this dialog.  The framework does this automatically
	//  when the application's main window is not a dialog
	SetIcon(m_hIcon, TRUE);			// Set big icon
	SetIcon(m_hIcon, FALSE);		// Set small icon

	// TODO: Add extra initialization here
	m_Calculate.SetTextColor(RGB(255, 255, 205));
	m_Calculate.SetTextHotColor(8468360);

	return TRUE;  // return TRUE  unless you set the focus to a control
}