viksoe.dk

ImageListBox control

ImageListBox control


This article was submitted .


This is a custom-drawn list control with better text formatting, title- and sub-title text, image placement/alignment support and a cool round selection rectangle.

The control derives directly from CListViewCtrl 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.

This is a re-write of my Win32 ImageListBox control. However, since the Smartphone doesn't support an owner-drawn LISTBOX, the control needed to use a custom-drawn LISTVIEW control instead.

How to use it

To use it, place a LISTVIEW control on your dialog. This control must have the Fixed Ownerdrawn property set 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. You need to create the images with the needed height, because it's the images that determines the item's height. 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);

Source Code Dependencies

MS Smartphone 2003
Microsoft Embedded Visual C++ 4.0
Microsoft WTL 7.5 Library

Download Files

DownloadSource Code (28 Kb)

To the top