Click here to Skip to main content
15,867,308 members
Articles / Multimedia / GDI+
Article

Image ComboBox Control

Rate me:
Please Sign up or sign in to vote.
4.84/5 (40 votes)
7 Jul 2005CDDL4 min read 364.7K   17.5K   117   39
This is an extended, owner drawn ComboBox which has an added support to display images in the combobox dropdown as well as the edit (text) box.

Image 1

Introduction

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 Simple and DropDown. So I wanted the image to be drawn in the textbox, in all three DropDownStyles. This ImageComboBox is able to draw items along with the corresponding images in the list portion and text portion in all three DropDownStyles.

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 objects.

ImageComboBoxItem

The ImageComboBoxItem has the following properties:

  • Image

    The image to be displayed along with the combobox item. The Image property exposes a dropdown window which shows the images taken from the ImageList.

  • Font

    The font to be used for the combobox item text, when the DrawMode is set to OwnerDrawVariable. The Font property exposes a font editor to select the desired font.

  • IndentLevel

    The level of indentation needed for an item. The ImageComboBox supports up to four levels of indentation, i.e., 0 -5.

  • Text

    The text of the combobox item.

The 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 Items 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.

ImageComboBox

Following properties are newly added to the ImageComboBox:

  • ImageList

    Holds the collection of images to be drawn with the items.

  • Items (changed property)

    The items of ImageComboBox. The items are of type ImageComboBoxItemCollection. The Items property exposes a new collection editor to add/remove/edit combobox items.

  • Indent

    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 DropDown or 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.

  1. Get the handle of the Edit Box. The ComboBox is a combination of a TextBox and a ListBox. The GetComboBoxInfo(IntPtr hwndCombo, ref ComboBoxInfo info) method retrieves the handles and the coordinates of the TextBox and ListBox.
    C#
    [DllImport("user32")]
    
    private static extern bool GetComboBoxInfo(IntPtr hwndCombo,
                                         ref ComboBoxInfo info);
    
    [StructLayout(LayoutKind.Sequential)]
    
    private struct ComboBoxInfo
    {
          public int cbSize;
          public RECT rcItem;
          public RECT rcButton;
          public IntPtr stateButton;
          public IntPtr hwndCombo;
          public IntPtr hwndEdit;
          public IntPtr hwndList;
    }
    
  2. Set margin to the TextBox.
    C#
    [DllImport("user32", CharSet=CharSet.Auto)]
    
    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.

    C#
    SendMessage(ComboBox.Handle, EM_SETMARGINS,
                      EC_RIGHTMARGIN, Margin * 65536);
    SendMessage(ComboBox.Handle, EM_SETMARGINS, EC_LEFTMARGIN, Margin);
    
  3. 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 TextBox manually.

C#
protected override void WndProc(ref Message m)
{
    switch (m.Msg)
    {
        case WM_PAINT:
            base.WndProc(ref m);
            DrawImage();
            break;
        
        case WM_LBUTTONDOWN:
            base.WndProc(ref m);
            DrawImage();
            break;
        case WM_KEYDOWN:
            base.WndProc(ref m);
            DrawImage();
            break;
        case WM_KEYUP:
            base.WndProc(ref m);
            DrawImage();
            break;
        case WM_CHAR:
            base.WndProc(ref m);
            DrawImage();
            break;
        case WM_GETTEXTLENGTH:
            base.WndProc(ref m);
            DrawImage();
            break;
        case WM_GETTEXT:
            base.WndProc(ref m);
            DrawImage();
            break;
        default:
            base.WndProc(ref m);
            break;
    }
}

public void DrawImage()
{
    if((CurrentIcon!=null))
    {    
        // Gets a GDI drawing surface from the textbox.
        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.DrawImage(CurrentIcon, 
              gfx.VisibleClipBounds.Width - CurrentIcon.Width,0);
        }
        else if(Owner.RightToLeft == RightToLeft.No || rightToLeft)
            gfx.DrawImage(CurrentIcon,0,0);
        
        gfx.Flush();
        gfx.Dispose();
    }
}

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.

License

This article, along with any associated source code and files, is licensed under The Common Development and Distribution License (CDDL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Member 126106864-Aug-22 23:53
Member 126106864-Aug-22 23:53 
QuestionCan this be made to work with Visual Styles enabled Pin
Dan Neely8-Mar-16 4:28
Dan Neely8-Mar-16 4:28 
AnswerRe: Can this be made to work with Visual Styles enabled Pin
Dan Neely8-Mar-16 5:45
Dan Neely8-Mar-16 5:45 
QuestionTrouble adding Image ComboBox Pin
SPS TradeMark18-Mar-15 14:29
SPS TradeMark18-Mar-15 14:29 
QuestionAutoComplete Pin
HMVC4-May-14 6:40
HMVC4-May-14 6:40 
GeneralMy vote of 5 Pin
pcs041414-Dec-12 21:12
pcs041414-Dec-12 21:12 
GeneralMy vote of 5 Pin
Kanasz Robert27-Sep-12 10:50
professionalKanasz Robert27-Sep-12 10:50 
Generalabout imagecombobox Pin
BeiDaJadeBird21-Aug-12 6:55
BeiDaJadeBird21-Aug-12 6:55 
Answer16 pixel icon issue Pin
sidn0214-May-12 8:50
sidn0214-May-12 8:50 
GeneralRe: 16 pixel icon issue Pin
chris.locke5-Jul-18 4:50
chris.locke5-Jul-18 4:50 
QuestionERROR Pin
mfelis30-Nov-11 2:47
mfelis30-Nov-11 2:47 
GeneralNot working! :( [modified] Pin
geekman9229-Apr-11 19:15
geekman9229-Apr-11 19:15 
GeneralRe: Not working! :( [modified] Pin
chih6988831-Aug-20 15:58
chih6988831-Aug-20 15:58 
GeneralMy vote of 5 Pin
Pamodh3-Sep-10 6:38
Pamodh3-Sep-10 6:38 
GeneralMy vote of 5 Pin
ScruffyDuck4-Aug-10 1:12
ScruffyDuck4-Aug-10 1:12 
GeneralDropDownStyle Pin
Ian W25-Mar-10 3:15
Ian W25-Mar-10 3:15 
This is quite a nice tutorial, but what would be good is if you emphasised this is for when dealing with DropDownStyle apart from the DropDownList. I wasn't aware that I could display icons and didn't read the article closely (just looked at the code). For me (and I imagine a few others) it would be great if it were pointed out a little more clearly that you can use the other styles for certain purposes.
GeneralA thank to the author [modified] Pin
filipo260630-Aug-09 16:11
filipo260630-Aug-09 16:11 
GeneralLicense Pin
aldo hexosa6-Jul-09 15:58
professionalaldo hexosa6-Jul-09 15:58 
GeneralWebapplication Pin
Ramkiran Hota6-Nov-08 19:30
Ramkiran Hota6-Nov-08 19:30 
GeneralThanks! Pin
der_picknicker4-Aug-08 14:45
der_picknicker4-Aug-08 14:45 
QuestionLicence Terms [modified] Pin
jsp_116-Nov-07 2:34
jsp_116-Nov-07 2:34 
GeneralComboBoxClear Function [modified] Pin
pablleaf8-May-07 6:47
pablleaf8-May-07 6:47 
QuestionHow to set size the width of images in image Combobox Pin
man nhi26-Mar-07 22:28
man nhi26-Mar-07 22:28 
AnswerRe: How to set size the width of images in image Combobox Pin
GIS_Developer21-Sep-08 22:25
GIS_Developer21-Sep-08 22:25 
AnswerRe: How to set size the width of images in image Combobox Pin
aaaadd13-Aug-10 8:59
aaaadd13-Aug-10 8:59 

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.