ImageListBox control

The Image ListBox control looks a bit like my HTML List control - but this time there is no HTML, just plain GDI. I saw this control in an application and thought it was very nice, especially when used as an Outlook bar as seen to the left in the screenshot.

The control derives directly from CListBox and uses an ImageList to draw its images. It is possible to layout the image in the various corners of each item, and items can have a small indented sub-title.
Programming it pretty much feels like using a ListView control, but since it's a listbox you get the usual LBN_xxx notifications.

Smartphone

There's also a version which derives from the CListViewCtrl instead - allowing the control to work on the MS Smartphone platform (which doesn't support the ownerdrawn listbox).

How to use it

To use it, place a LISTBOX control (or LISTVIEW control if on a Smartphone platform) on your dialog. This control must have the Owner draw property set to Fixed in the resource editor.
Add a member variable to your dialog implementation file...

CImageListBoxCtrl m_list

In the OnInitDialog() event handler, add the following line:

  LRESULT OnInitDialog(UINT /*uMsg*/, 
                       WPARAM /*wParam*/, 
                       LPARAM /*lParam*/, 
                       BOOL& /*bHandled*/)
  {
    ...
    m_list.SubclassWindow(GetDlgItem(IDC_LIST1));
    ...
  }

Also add this reflection macro to your main message map:

  BEGIN_MSG_MAP(CMainDlg)
    ...
    REFLECT_NOTIFICATIONS()
  END_MSG_MAP()

Set the ImageList handles. It is possible to have images for both the selected and normal state. The selected images are optional.

  m_list.SetImageList(m_imageList1, ILSIL_NORMAL);
  m_list.SetImageList(m_imageList2, ILSIL_SELECTED);

You should also set the item height. The item height is fixed for all items, so choose it wisely.

  m_list.SetItemHeight(0, 70);

Use the GetPreferences() and SetPreferences() methods to set colors and indent for various areas of the items.

To add an item...

  ILBITEM item = { 0 };
  item.mask = ILBIF_TEXT | ILBIF_IMAGE | ILBIF_SELIMAGE | 
              ILBIF_STYLE | ILBIF_FORMAT;
  item.iItem = 0;
  item.pszText = "Test";
  item.iImage = item.iSelImage = 0;
  item.style = ILBS_IMGTOP | ILBS_SELROUND;
  item.format = DT_CENTER;
  m_list.InsertItem(&item);

This is pretty much like a ListView control.

Most of the standard CListBox methods still work.

Source Code Dependencies

Microsoft Visual C++ 6.0
Microsoft WTL 7.5 Library

Download Files

Source Code (5 Kb)

Written by Bjarke Viksoe.
Article submitted 11/7/2001.

To the top