An introduction to creating custom controls using MFC

In a previous article I demonstrated subclassing a windows common control in order to modify its behaviour or extend its functionality. Sometimes you can only push the windows common controls so far. An example I came across was the common issue of needing a grid control to display and edit tabular data. I subclassed a CListCtrl
and extended it to allow subitem editing, multiline cells, sort-on-click headers and a myriad of other features. However, deep down it was still a list control and there came a point where I seemed to be writing more code to stop the control performing actions than I was to actually make it do something.

I needed to start from scratch, working from a base class that provided only the functionality I needed without any of the features (or liabilities) that I didn't need. Enter the custom control.

Writing a custom control is very similar to subclassing a windows common control. You derive a new class from an existing class and override the functionality of the base class in order to make it do what you want.

In this case we'll be deriving a class from CWnd, since this class provides the minimum functionality we need, without too much overhead.

The first step in creating a custom control is to derive your class from your chosen base class (CWnd). In this example we'll create a custom control for displaying bitmaps, and we'll call this class CBitmapViewer. Obviously there is already the CStatic class that already displays bitmaps, but the example is only meant to demonstrate the possibilities available to the adventurous programmer.

To your class you should add handlers for the WM_PAINT and WM_ERASEBKGND messages. I've also added an override for PreSubclassWindow in case you wish to perform any initialisation that requires the window to have been created. See my previous article for a discussion of PreSubclassWindow.

The aim of this control is to display bitmaps, so we'll a method to set the bitmap and call it SetBitmap. We're not only talented, us programmers, but extremely imaginative as well.

The internal code for the control is unimportant to this discussion but is included for completeness.

Add a member variable of type CBitmap to the class, as well as the SetBitmap prototype:

class CBitmapViewer : public CWnd
{
// Construction
public:
    CBitmapViewer();

// Attributes
public:
    BOOL SetBitmap(UINT nIDResource);

    ...
    
protected:
    CBitmap m_Bitmap;
};

In your CBitmapViewer implementation file add the following code for your SetBitmap method, and your WM_PAINT and WM_ERASEBKGND message handlers:

void CBitmapViewer::OnPaint() 
{
    // Draw the bitmap - if we have one.
    if (m_Bitmap.GetSafeHandle() != NULL)
    {
        CPaintDC dc(this); // device context for painting

        // Create memory DC
        CDC MemDC;
        if (!MemDC.CreateCompatibleDC(&dc))
            return;

        // Get Size of Display area
        CRect rect;
        GetClientRect(rect);

        // Get size of bitmap
        BITMAP bm;
        m_Bitmap.GetBitmap(&bm);
        
        // Draw the bitmap
        CBitmap* pOldBitmap = (CBitmap*) MemDC.SelectObject(&m_Bitmap);
        dc.StretchBlt(0, 0, rect.Width(), rect.Height(), 
                      &MemDC, 
                      0, 0, bm.bmWidth, bm.bmHeight, 
                      SRCCOPY);
        MemDC.SelectObject(pOldBitmap);      
    }
    
    // Do not call CWnd::OnPaint() for painting messages
}

BOOL CBitmapViewer::OnEraseBkgnd(CDC* pDC) 
{
    // If we have an image then don't perform any erasing, since the OnPaint
    // function will simply draw over the background
    if (m_Bitmap.GetSafeHandle() != NULL)
        return TRUE;
    
    // Obviously we don't have a bitmap - let the base class deal with it.
    return CWnd::OnEraseBkgnd(pDC);
}

BOOL CBitmapViewer::SetBitmap(UINT nIDResource)
{
    return m_Bitmap.LoadBitmap(nIDResource);
}

So far we have a class that allows us to load and display a bitmap - but as yet we have no way of actually using this class. We have two choices in creating the control - either dynamically by calling Create or via a dialog template created using the Visual Studio resource editor.

Since our class is derived from CWnd we can use CWnd::Create to create the control dynamically. For instance, in your dialog's OnInitDialog you could have the following code:

// CBitmapViewer m_Viewer; - declared in dialog class header

m_Viewer.Create(NULL, _T(""), WS_VISIBLE, CRect(0,0,100,100), this, 1);
m_Viewer.SetBitmap(IDB_BITMAP1);

where m_Viewer is an object of type CBitmapViewer that is declared in your dialogs header, and IDB_BITMAP1 is the ID of a bitmap resource. The control will be created and the bitmap will display.

However, what if we wished to place the control in a dialog template using the Visual Studio resource editor? For this we need to register a Windows Class name using the AfxRegisterClass function. Registering a class allows us to specify the background color, the cursor, and the style. See AfxRegisterWndClass in the docs for more information.

For this example we'll register a simple class and call it "MFCBitmapViewerCtrl". We only need to register the control once, and a neat place to do this is in the constructor of the class we are writing

#define BITMAPVIEWER_CLASSNAME    _T("MFCBitmapViewerCtrl")  // Window class name

CBitmapViewer::CBitmapViewer()
{
    RegisterWindowClass();
}

BOOL CBitmapViewer::RegisterWindowClass()
{
    WNDCLASS wndcls;
    HINSTANCE hInst = AfxGetInstanceHandle();

    if (!(::GetClassInfo(hInst, BITMAPVIEWER_CLASSNAME, &wndcls)))
    {
        // otherwise we need to register a new class
        wndcls.style            = CS_DBLCLKS | CS_HREDRAW | CS_VREDRAW;
        wndcls.lpfnWndProc      = ::DefWindowProc;
        wndcls.cbClsExtra       = wndcls.cbWndExtra = 0;
        wndcls.hInstance        = hInst;
        wndcls.hIcon            = NULL;
        wndcls.hCursor          = AfxGetApp()->LoadStandardCursor(IDC_ARROW);
        wndcls.hbrBackground    = (HBRUSH) (COLOR_3DFACE + 1);
        wndcls.lpszMenuName     = NULL;
        wndcls.lpszClassName    = BITMAPVIEWER_CLASSNAME;

        if (!AfxRegisterClass(&wndcls))
        {
            AfxThrowResourceException();
            return FALSE;
        }
    }

    return TRUE;
}

In our example of creating the control dynamically, we should now change the creation call to

m_Viewer.Create(_T("MFCBitmapViewerCtrl"), _T(""), WS_VISIBLE, CRect(0,0,100,100), this, 1);

This will ensure the correct window styles, cursors and colors are used in the control. It's probably worthwhile writing a new Create function for your custom control so that users don't have to remember the window class name. For example:

BOOL CBitmapViewer::Create(CWnd* pParentWnd, const RECT& rect, UINT nID, DWORD dwStyle /*=WS_VISIBLE*/)
{
    return CWnd::Create(BITMAPVIEWER_CLASSNAME, _T(""), dwStyle, rect, pParentWnd, nID);
}

To use the custom control in a dialog resource, simply create a custom control on the dialog resource as you would any other control

and then in the control's properties, specify the class name as "MFCBitmapViewerCtrl"

The final step is to link up a member variable with the control. Simply declare an object of type CBitmapViewer in your dialog class (say, m_Viewer) and in your dialog's DoDataExchange add the following

void CCustomControlDemoDlg::DoDataExchange(CDataExchange* pDX)
{
    CDialog::DoDataExchange(pDX);
    //{{AFX_DATA_MAP(CCustomControlDemoDlg)
    DDX_Control(pDX, IDC_CUSTOM1, m_Viewer);
    //}}AFX_DATA_MAP
}

DDX_Control links the member variable m_Viewer with the control with ID IDC_CUSTOM1 by calling SubclassWindow. Creating a custom control in your dialog resource with the class name "MFCBitmapViewerCtrl" creates a window that behaves as your CBitmapViewer::RegisterWindowClass has specified, and then the DDX_Control call links your CBitmapViewer object with this pre-prepared window.

Compile your project, run the application, and be amazed. You've just created a custom control.