Click here to Skip to main content
13,596,861 members
Click here to Skip to main content
Add your own
alternative version


75 bookmarked
Posted 30 Jul 2002
Licenced CPOL

Color Picker and Font Picker by Owner Drawn Control

, 18 Jan 2017
Rate this:
Please Sign up or sign in to vote.
Demonstrates how to implement a WIN32 color picker and font picker by owner drawn control

Download source and executable (VC6)





Although there are many fully functional color pickers on this site [1, 2, 3], the code is usually MFC or WTL stuff. I would like to present here a color picker written in nothing but the Windows API. I also want to convince you that the clean and basic API functions can produce friendly, neat and powerful controls.

First, I will describe how to produce a partial office-like color picker panel in detail, by using an owner drawn list box. Second, I will briefly explain how to do a similar thing using an owner draw combo box.


Firstly, you must start Visual C++ and then create a Win32 application with a typical "Hello World" string displayed. Next what we need to do is to create a dialog box and then embed a list box within it. The properties sheet of the list box should be like this:

Now we need to write code to draw the list box ourselves. Don't panic because there are not so many lines of code. We only need to respond to some messages in the callback function of the dialog box, which is the owner window of the list box.

 * Callback function of "Background color" dialog box.
LRESULT CALLBACK background(HWND hdlg, UINT message, WPARAM wParam, LPARAM lparam)
    switch (message)
        // Place your own code here
        // Place your own code here   
    case WM_DRAWITEM:
        // Place your own code here
        // Place your own code here
    case WM_COMMAND:
        // Place your own code here
    return FALSE;

For initializing the list box control, we need to process the WM_INITDIALOG message. We do nothing but assign the color values pre-defined as global variables to each list box items:

    int nColor;
    for (nColor = 0; nColor < sizeof(g_crItems)/sizeof(DWORD); nColor++)
        SendDlgItemMessage(hdlg, IDC_BACKGROUND, LB_ADDSTRING, nColor, (LPARAM) "");
        SendDlgItemMessage(hdlg, IDC_BACKGROUND, LB_SETITEMDATA, 
                           nColor, (LPARAM) g_crItems[nColor]);
        if (g_bgColor == g_crItems[nColor])
            SendDlgItemMessage(hdlg, IDC_BACKGROUND, LB_SETCURSEL, nColor, 0);
    return TRUE;

Next, we need to tell the dialog the dimension of every list box item when receiving the WM_MEASUREITEM message. The message is sent when the list box control is created. The parameter lparam is a pointer to a structure of type MEASUREITEMSTRUCT. In the demo color picker panel, we have 6 rows and 8 columns.

    RECT rc;
    lpmis = (LPMEASUREITEMSTRUCT) lparam; 
    GetWindowRect(GetDlgItem(hdlg, lpmis->CtlID), &rc);
    lpmis->itemHeight = (; 
    lpmis->itemWidth = (rc.right-rc.left)/8;

An owner drawn control sends its parent window a WM_DRAWITEM message whenever it needs to be repainted. This occurs when the control is first created, when it is pressed or released, when it gains or loses the input focus, and whenever else it needs repainting. The lparam message parameter is a pointer to a structure of type DRAWITEMSTRUCT. It contains the information necessary for a program to draw the control. The structure fields important for working with list box are hDC (the device context), rcItem (a RECT structure providing the size of each list box item), itemID (list box ID), and itemState (which indicates whether the item is pushed or has the input focus).

	HDC hdc; 
	HBRUSH hbrush; 
	pdis = (DRAWITEMSTRUCT *)lparam; 
	hdc = pdis->hDC; 
	rc = pdis->rcItem; 
	// Transparent. 
	// NULL object 
	if (pdis->itemID == -1) return 0; 
	switch (pdis->itemAction) 
		switch (pdis->CtlID) 
			rc = pdis->rcItem; 
			cr = (COLORREF) pdis->itemData; 
			InflateRect(&rc, -3, -3); 
			hbrush = CreateSolidBrush((COLORREF)cr); 
			FillRect(hdc, &rc, hbrush); 
			FrameRect(hdc, &rc, (HBRUSH) GetStockObject(GRAY_BRUSH)); 
		// *** FALL THROUGH *** 
		case ODA_SELECT: 
			rc = pdis->rcItem; 
			if (pdis->itemState & ODS_SELECTED) 
				rc.bottom --; 
				rc.right --; 
				// Draw the lighted side. 
				HPEN hpen = CreatePen(PS_SOLID, 1, GetSysColor(COLOR_BTNSHADOW)); 
				HPEN holdPen = (HPEN)SelectObject(hdc, hpen); 
				MoveToEx(hdc, rc.left, rc.bottom, NULL); 
				LineTo(hdc, rc.left,; 
				LineTo(hdc, rc.right,; 
				SelectObject(hdc, holdPen); 
				// Draw the darkened side. 
				hpen = CreatePen(PS_SOLID, 1, GetSysColor(COLOR_BTNHIGHLIGHT)); 
				holdPen = (HPEN)SelectObject(hdc, hpen); 
				LineTo(hdc, rc.right, rc.bottom); 
				LineTo(hdc, rc.left, rc.bottom); 
				SelectObject(hdc, holdPen); 
				hbrush = CreateSolidBrush(GetSysColor(COLOR_3DFACE)); 
				FrameRect(hdc, &rc, hbrush); DeleteObject(hbrush); 
		case ODA_FOCUS: 
			rc = pdis->rcItem; 
			InflateRect(&rc, -2, -2); 
			DrawFocusRect(hdc, &rc); 
	return true;    

The default background color of the list box is white, which make it look weird because the background of the dialog box is gray. To modify the background color of the list box, we need to respond to the <code>WM_CTLCOLORLISTBOX message. This message is sent before the system draws the list box. We simply return a handle to a brush which the system uses to paint the background of the list box.

    return (LRESULT) CreateSolidBrush(GetSysColor(COLOR_3DFACE));

Finally, we need to retrieve the color that the user has selected when the "OK" button is clicked, or just dismiss the dialog box if the user click the "CANCEL" button.

    if (LOWORD(wParam) == IDOK) 
        int nItem;
        nItem = SendDlgItemMessage(hdlg, IDC_BACKGROUND, LB_GETCURSEL, 0, 0L);
        g_bgColor = SendDlgItemMessage(hdlg, 
                                       nItem, 0L);
        EndDialog(hdlg, LOWORD(wParam));
        InvalidateRect(GetParent(hdlg), NULL, true);
        return TRUE;
    else if (LOWORD(wParam) == IDCANCEL)
        EndDialog(hdlg, LOWORD(wParam));
        return TRUE;

Ahaaa, that's all. Compile the code and you will get a color picker as shown at the top of this article.

Similarly, if you want to make a color picker from an onwer draw combo box, only little modifications are needed. First, replace the message prefix LB_ by CB_ and second, WM_CTLCOLORLISTBOX no longer needs to be processed. The final appearance of the dialog looks like below. Well, this is not good enough as the name of each color should be put on the right hand side of each item. Charles Petzold (author of Programming Windows 5th edition) has nice example of how to do this.

This is not the whole story, however. By changing the content of the list box items and controlling their size, more fancy controls could be created by this way. The picture below shows font picker. In this font picker control, some fancy techniques are deomonstrated:

  • The enumeration of font list in Windows.
  • Change font style of a butoon control.
  • An customized combo box that can remember the historical entires.



For the owner drawn list box color picker, if it is the first control in the tab order, the focus rectangle could not be drawn correctly. I spent lot of time trying to correct this but finally gave up. Also, when moving the mouse cursor over each color item, it would be better to popup a tooltip that displays the color name. Your feedback and code enhancements are highly appreciated


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

China China
My home locates in Shenzhen, China. I am working on optical communications.

My programming experience includes C/C++, java, Visual Basic etc

At my leisure time, I wrote a small application named "Datascape" by using pure windows api. The application can be found in google site

You may also be interested in...


Comments and Discussions

Questionnot suitable for mfc application Pin
Jason.LYJ21-Sep-17 2:10
professionalJason.LYJ21-Sep-17 2:10 
GeneralMy vote of 5 Pin
manoj kumar choubey23-Feb-12 0:39
membermanoj kumar choubey23-Feb-12 0:39 
GeneralMFC Pin
laiju8-Jul-05 20:18
susslaiju8-Jul-05 20:18 
GeneralLine Picker Pin
AntonDel13-Nov-03 23:15
memberAntonDel13-Nov-03 23:15 
GeneralDouble click event Pin
Sylvain Piette16-Apr-03 5:02
memberSylvain Piette16-Apr-03 5:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.180621.3 | Last Updated 19 Jan 2017
Article Copyright 2002 by nilaysoft
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid