ImageComboBox is an extension of the standard Windows
ComboBox control, with support for displaying icons or images along with the item text. If you take a look at the Windows interface, you can see the Windows Explorer, Internet Explorer, File Open/Save/Print Dialogs, all using a combobox which can show icons and different levels of indentation.
A standard combobox does not support displaying graphic images, in the
Normal DrawMode. But it can display icons or images when it is
OwnerDrawn. Still there is something missing. The images can be drawn in the list portion, but when you select an item, its image is not displayed in the textbox except when the dropdown style is set to
DropDownList. The combobox does not support editing when the dropdown style is
DropDownList. The editable modes are
DropDown. So I wanted the image to be drawn in the textbox, in all three
ImageComboBox is able to draw items along with the corresponding images in the list portion and text portion in all three
Apart from that this
ImageComboBox also supports multiple levels of indentation for individual items. Indenting individual items enhances visual representation by grouping items and showing hierarchical relationships. The individual items can have their own font and size specified, when the
DrawMode is set to
OwnerDrawVariable. So an item in the combobox has several properties and all these properties need to be manipulated during design time or dynamically at runtime. Therefore the items are no longer simple strings, instead they are distinct
ImageComboBoxItem objects. So the
Items is a collection of
ImageComboBoxItem has the following properties:
The image to be displayed along with the combobox item. The
Image property exposes a dropdown window which shows the images taken from the
The font to be used for the combobox item text, when the
DrawMode is set to
Font property exposes a font editor to select the desired font.
The level of indentation needed for an item. The
ImageComboBox supports up to four levels of indentation, i.e., 0 -5.
The text of the combobox item.
ImageComboBox also needs two new properties, an
ImageList to hold the icons/images from which the user can select images associated with an item, and an
Indent property to let the user specify the amount of indentation. The It
ems property is changed so that the items are of type
ImageComboBoxItemCollection. A collection editor is provided to the user so that the properties of individual items can be added/removed/modified at design time.
Following properties are newly added to the
Holds the collection of images to be drawn with the items.
Items (changed property)
The items of
ImageComboBox. The items are of type
Items property exposes a new collection editor to add/remove/edit combobox items.
The amount of indentation needed in pixels.
How to draw an image in the Edit portion of the ComboBox?
Displaying images in the combobox dropdown portion is fairly straightforward, and can be done by making the combobox owner drawn and drawing each item with an added image. On the other hand, displaying an image in the edit portion of the combobox when the
DropDownStyle is set to
Simple is a difficult task. It requires getting the handle of the edit box, drawing the image, and setting a margin to the editbox so that the text displayed will be indented properly.
The good old Windows API calls do the trick.
- Get the handle of the Edit Box. The
ComboBox is a combination of a
TextBox and a
GetComboBoxInfo(IntPtr hwndCombo, ref ComboBoxInfo info) method retrieves the handles and the coordinates of the
private static extern bool GetComboBoxInfo(IntPtr hwndCombo,
ref ComboBoxInfo info);
private struct ComboBoxInfo
public int cbSize;
public RECT rcItem;
public RECT rcButton;
public IntPtr stateButton;
public IntPtr hwndCombo;
public IntPtr hwndEdit;
public IntPtr hwndList;
- Set margin to the
private extern static int SendMessage(IntPtr hwnd,
int wMsg, int wParam, int lParam);
private const int EC_LEFTMARGIN = 0x1;
private const int EC_RIGHTMARGIN = 0x2;
private const int EM_SETMARGINS = 0xD3;
Set the margins using the
SendMessage method. The combobox supports displaying items either left-to-right, or right-to-left. Depending on this setting, the margin has to be set.
RightMargin needs to be in the hi-word, so multiply by 65536.
EC_RIGHTMARGIN, Margin * 65536);
SendMessage(ComboBox.Handle, EM_SETMARGINS, EC_LEFTMARGIN, Margin);
- Drawing the image onto the text box.
To achieve this, a class derived from
NativeWindow is required. To this class we assign the handle of the
TextBox so that we get access to the message stream directed to the
TextBox. Then override the
WndProc method and repaint the
protected override void WndProc(ref Message m)
public void DrawImage()
gfx = Graphics.FromHwnd (this.Handle);
bool rightToLeft = false;
if(Owner.RightToLeft == RightToLeft.Inherit)
if(Owner.Parent.RightToLeft == RightToLeft.Yes)
rightToLeft = true;
if(Owner.RightToLeft == RightToLeft.Yes || rightToLeft)
gfx.VisibleClipBounds.Width - CurrentIcon.Width,0);
else if(Owner.RightToLeft == RightToLeft.No || rightToLeft)
Using the ImageComboBox
Copy the ImageComoBox.dll from the bin\Release directory to your project directory. Open the Solution Explorer, right click the project name, and choose Add Reference. Click Browse button, locate the ImageComoBox.dll and select it. To display the control in Toolbox, right click on the toolbox, click Add/Remove Items. From the Customize Toolbox window, select the ImageComoBox.dll.