Owner Draw Button Step-by-Step

Environment: VC++6

I think some of you may not like the buttons in Windows. Sometimes, I think they're ugly. Fortunately, we can change the appearance of our buttons by overriding the DrawItem function of the CButton class. I 'm going to demonstrate the steps of the owner drawing button. In this article, I will make a class, which inherits from CButton class.

Let 's take a dialog-based MFC application as an example. In the File Menu, click New to add a new project. Then, choose MFC Application Wizard (exe). In the project name, type in OwnerDrawButton (just an example), and then click OK. In step one of the MFC App Wizard, choose Dialog Based. After pressing Finish, you are brought to the "New Project Information" page. You'll ignore this page, so press OK.

The edit window is displaying the IDD_OWNERDRAWBUTTON_DIALOG. We have to make our class first, so we don't have time to look at this dialog. Go to the ClassView, right-click "OwnerDrawButton classes", and choose "New class". For the class type, just leave the default "MFC Class". In the "Name" editbox, type "CMyButton" (just an example). Choose "CButton" from the "Base Class".

You have added a new class; it's time to override the DrawItem function. Right-click "CMyButton" in ClassView and choose "Add Virtual Function". The "New Virtual Override for class CMyButton" page opens. Double-click "DrawItem" in the left "New Virtual Functions" listbox. Afterward, 'DrawItem" will jump to the right "Existing virtual function overrides" listbox. Finally, press OK to add a new virtual override.

Go to the implementation of CMyButton::DrawItem, which is in MyButton.cpp. Add draw code in this function. Here is my drawing code to demonstrate how to use CDC to draw it.

void CMyButton::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct) 
{
  CDC dc;
  dc.Attach(lpDrawItemStruct->hDC);     //Get device context object
  CRect rt;
  rt = lpDrawItemStruct->rcItem;        //Get button rect

  dc.FillSolidRect(rt, RGB(0, 0, 255)); //Fill button with blue color

  UINT state = lpDrawItemStruct->itemState; //Get state of the button
  if ( (state & ODS_SELECTED) )            // If it is pressed
  {
    dc.DrawEdge(rt,EDGE_SUNKEN,BF_RECT);    // Draw a sunken face
  }
  else
  {
    dc.DrawEdge(rt,EDGE_RAISED,BF_RECT);    // Draw a raised face
  }

  dc.SetTextColor(RGB(255,255,120)); 
                        // Set the color of the caption to be yellow
  CString strTemp;
  GetWindowText(strTemp); 
                        // Get the caption which have been set
  dc.DrawText(strTemp,rt,DT_CENTER|DT_VCENTER|DT_SINGLELINE); 
                              // Draw out the caption
  if ( (state & ODS_FOCUS ) )       // If the button is focused
  {
    // Draw a focus rect which indicates the user 
    // that the button is focused
    int iChange = 3;
    rt.top += iChange;
    rt.left += iChange;
    rt.right -= iChange;
    rt.bottom -= iChange;
    dc.DrawFocusRect(rt);
  }
  dc.Detach();
}

Your job isn't finished yet. Go back to the ResourceView and click "IDD_OWNERDRAWBUTTON_DIALOG". Yes, you are right! You are going to edit your dialog box. Drag a button to the dialog box. Now, modify its properties by right-clicking it and choosing "Properities". For its ID, call it "IDC_COLOREDBUTTON" and caption it "Colored Button". You also have to allow it to be owner draw. Go to the Styles tab and check "Owner Draw". Then, close the Properties dialog box.

You have to link this button to the CMyButton class. Press Ctrl+W to open the MFC Class Wizard. Under the "Member variables" page, double-click "IDC_COLOREDBUTTON", which is in the "Control IDs" listbox. You are then brought to the "Add Member Variable" dialog. For the "Member variable name", type "m_MyColoredButton". For the "Variable Type", choose "CMyButton", and then press OK. VC++ will inform you to check if there is an include statement in "OwnerDrawButtonDlg.h". You won't find it, so add #include "MyButton.h" at the beginning of OwnerDrawButtonDlg.h.

Press F7 to build your project. Afterward, run it and you will see the same as the picture at the beginning of this article.

This is the first time for me to write an English article. Feel free to give some bad comments to me. I am glad to read them.

Downloads