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:
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
| 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 |
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; 