Articles - How to place images in a Combo Box

'

Introduction

This is done by means of using the ownerdraw style of the combo box provided in the VCL. The two different style properties of the TComboBox that we are interested in are:

  • csOwnerDrawFixed - Use this when all bitmaps have the same height
  • csOwnerDrawVariable - Use this when the bitmaps have different heights
  • Once the style has been set to one of the above we can use the onDrawItem event. This event is forced whenever the application needs to draw an item in the combo box. Its definition is:

    
    procedure TForm1.ComboBox1DrawItem(Control: TWinControl; 
        Index: Integer; Rect: TRect; State: TOwnerDrawState)
    
    Parameter Type Purpose
    Control TWinControl This is the control that contains the item
    Index Integer This is the index of the actual item to be displayed
    Rect TRect The is the rectangle in the listbox where the item should be displayed
    State TOwnerDrawState This shows whether the item is selected, disabled or has focus (odSelected, OdDisabled or OdFocused) .

    For an csOwnerDrawFixed styled combo box all that needs to be done is to write the procedure that actually draws the bitmap and text into the onDrawItem event.

    For an csOwnerDrawVariable styled combo box there is one more stage to do. This stage is to write the event handler for the onMeasureItem event. This event is called before the DrawItem so that you can set what the height for that item should actually be. The definition is:

    
    procedure TForm1.ComboBox1MeasureItem(Control: TWinControl;
        Index: Integer; var Height: Integer);
    	
    Parameter Type Purpose
    Control TWinControl This is the control that contains the item
    Index Integer This is the index of the actual item to be displayed
    Height Integer This is the value that you should change to the correct height of the indexed item

    Step By Step Guide

  • Start a new application
  • On the form place a combobox and an imagelist (if you are using delphi 1 then you will need to store the bitmaps some other way)
  • In the Object Inspector set the following properties
  • Component Property To Reason
    ComboBox1 Style csOwnerDrawFixed So that we can control how the items are drawn.
    ComboBox1 Items Add whatever strings you want here to be displayed alongside the bitmaps. So that each item has a textual as well as graphical description.
    ImageList1 Use the ImageList Editor Add bitmaps here making sure they are the same size and in the same order as you want them displayed in the combobox. If you want a transparent color then set it here. These are the bitmaps that will appear in the combobox
  • Finally you need to add the code for the onDrawItem event, which is:
  • procedure TForm1.ComboBox1DrawItem(
        Control: TWinControl; 
        Index:Integer;  
        Rect: TRect; 
        State: TOwnerDrawState);
    begin
      (* This ensures the correct highlite color is used *)
      combobox1.canvas.fillrect(rect);  
    
      (* This line draws the actual bitmap*)
      imagelist1.Draw(comboBox1.Canvas,rect.left,rect.top,Index);
    
      (*  This line writes the text after the bitmap*)
      combobox1.canvas.textout(rect.left+imagelist1.width+2,rect.top,
                              combobox1.items[index]);
    end; 

    Google
    Web www.Delphi-Central.com
    Delphi Central - Delphi Programming Tutorials, Hints and Tips