Using an ImageList with a ComboBoxEx and a StringGrid

ImageLists may be employed in conjunction with several components and we provide instructions here for use with a ComboBoxEx (to provide an image for each item in the drop-down list) and with a StringGrid (for a changeable image in a column header). TComboBoxEx was introduced in Version 1.4 of Lazarus. We provide stepwise instructions because the order of some of the steps is critical. This is a screenshot of the finished demonstration:
Screenshot of program in action

Screenshot of program in action

Note that all of the images in an ImageList must be the same size.

  1. Download the 48x48 flag images for Australia, Austria, Belgium and Botswana by following the links from
  2. Start a new application, select menu item File > Save All, then save the project as ImageListDemo and the unit as uImageListDemo.
  3. Drop a TImageList from the Common Controls component tab onto the form.
  4. Using the Object Inspector, change the values of the Height and Width properties of ImageList1 from 16 to 48 and the ShareImages property from False to True.
  5. Right click on ImageList1 in the Object Inspector and select menu item ImageList Editor ...
  6. Click the Add ... button of the ImageList Editor, navigate to where you saved the map icons, and open Argentina.png.
  7. Repeat the last step for Austria.png, Belgium.png, then Botswana.png and click the OK button.
  8. Drop onto the form a TComboBoxEx from the Misc tab and select in the Object Inspector its Images property. Select ImageList1 from the drop-down list.
  9. Change the ItemHeight property to 48 and the Width property to 180.
  10. Click on the Font ellipsis (...) and change the font to Arial and its size to 16.
  11. Click the ellipsis for the ItemsEx property. Click the Add button four times.
  12. Change the Caption property of the first TComboExItem (Item 0) to Australia and its ImageIndex to 0.
  13. Change the Caption property of the second TComboExItem (Item 1) to Austria and its ImageIndex to 1.
  14. Change the Caption property of the third TComboExItem (Item 2) to Belgium and its ImageIndex to 2.
  15. Change the Caption property of the fourth TComboExItem (Item 3) to Botswana and its ImageIndex to 3.
  16. Change the ItemIndex of the ComboBoxEx to 0.
    You should see the flag of Australia in the design view of the form. If you execute the program now and click on the ComboBoxEx you should see a drop-down list of the four countries with their flags and be able to select any of them.
  17. Drop onto the form a TStringGrid from the Additional components tab.
  18. Set the ColCount property to 2, the DefaultColWidth to 115 and the DefaultRowHeight to 48.
  19. Click on the Font ellipsis and change the font to Arial and its size to 14.
  20. Click in the edit box for the TitleImageList property and select ImageList1 from the drop-down list.
  21. Click on the columns ellipsis and click the Add button.
  22. Expand the Title property of the TGridColumn that you have added and change the Caption property to a single space. Change the ImageIndex property to 0 and the ImageLayout to blGlyphLeft.
    You should see the flag of Australia at the top of the second column.
  23. Paste this code to replace the default code in the unit.
    unit uImageListDemo;
    {$mode objfpc}{$H+}
      Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, ComboEx, Grids;
      TCountry = record
        Name, Capital: string;
        Population, Area: integer;
      TForm1 = class(TForm)
        ComboBoxEx1: TComboBoxEx;
        ImageList1: TImageList;
        StringGrid1: TStringGrid;
        procedure ComboBoxEx1Change(Sender: TObject);
        procedure FormCreate(Sender: TObject);
          Countries: array[0..3] of TCountry =
                     ((Name: 'Australia'; Capital: 'Canberra'; Population: 24000000; Area: 7692024),
                     (Name: 'Austria'; Capital: 'Vienna'; Population: 8200000; Area: 84000),
                     (Name: 'Belgium'; Capital: 'Brussels'; Population: 11000000; Area: 31000),
                     (Name: 'Botswana'; Capital: 'Gaborone'; Population: 2200000; Area: 580000));
          FieldNames: array[0..4] of string =
                      ('Flag', 'Name', 'Area (sq km)', 'Population', 'Capital');
      Form1: TForm1;
    {$R *.lfm}
    procedure TForm1.FormCreate(Sender: TObject);
      RowNum: integer;
      for RowNum := 0 to 4 do
        StringGrid1.Cells[0, RowNum] := FieldNames[RowNum];
      StringGrid1.Cells[1, 1] := Countries[0].Name;
      StringGrid1.Cells[1, 2] := IntToStr(Countries[0].Area);
      StringGrid1.Cells[1, 3] := intToStr(Countries[0].Population);
      StringGrid1.Cells[1, 4] := Countries[0].Capital;
    procedure TForm1.ComboBoxEx1Change(Sender: TObject);
      II: integer;
      II := ComboBoxEx1.ItemIndex;
      StringGrid1.Cells[1, 1] := Countries[II].Name;
      StringGrid1.Cells[1, 2] := IntToStr(Countries[II].Area);
      StringGrid1.Cells[1, 3] := intToStr(Countries[II].Population);
      StringGrid1.Cells[1, 4] := Countries[II].Capital;
      StringGrid1.Columns[0].Title.ImageIndex := II;
  24. Using the Object Inspector, select FormCreate for the OnCreate event of the form and ComboBoxEx1Change for the OnChange event of ComboBoxEx1.
  25. Change the positions and sizes of the components to your taste. The values we chose are in the following text view of the form (with most of the image data removed):
    object Form1: TForm1
      Left = 500
      Height = 246
      Top = 257
      Width = 437
      Caption = 'ImageList Demo'
      ClientHeight = 246
      ClientWidth = 437
      OnCreate = FormCreate
      LCLVersion = ''
      object ComboBoxEx1: TComboBoxEx
        Left = 8
        Height = 54
        Top = 8
        Width = 180
        Font.CharSet = ANSI_CHARSET
        Font.Height = -21
        Font.Name = 'Arial'
        Font.Pitch = fpVariable
        Font.Quality = fqDraft
        Images = ImageList1
        ItemHeight = 48
        ItemsEx = <    
            Caption = 'Australia'
            ImageIndex = 0
            Caption = 'Austria'
            ImageIndex = 1
            Caption = 'Belgium'
            ImageIndex = 2
            Caption = 'Botswana'
            ImageIndex = 3
        ItemIndex = 0
        ItemWidth = 48
        OnChange = ComboBoxEx1Change
        ParentFont = False
        ReadOnly = True
        Style = csExDropDownList
        TabOrder = 0
      object StringGrid1: TStringGrid
        Left = 192
        Height = 234
        Top = 8
        Width = 234
        ColCount = 2
        Columns = <    
            Title.Caption = ' '
            Title.ImageIndex = 0
            Title.ImageLayout = blGlyphLeft
        DefaultColWidth = 115
        DefaultRowHeight = 48
        Font.CharSet = ANSI_CHARSET
        Font.Height = -19
        Font.Name = 'Arial'
        Font.Pitch = fpVariable
        Font.Quality = fqDraft
        ParentFont = False
        TabOrder = 1
        TitleFont.CharSet = ANSI_CHARSET
        TitleFont.Height = -19
        TitleFont.Name = 'Arial'
        TitleFont.Pitch = fpVariable
        TitleFont.Quality = fqDraft
        TitleImageList = ImageList1
      object ImageList1: TImageList
        Height = 48
        ShareImages = True
        Width = 48
        left = 16
        top = 72
        Bitmap = {
  26. Execute the program.
See the following pages for Pascal code to populate the ImageList and ComboBoxEx and for putting an image into any cell of a StringGrid.
Programming - a skill for life!

Using widgets (such as list boxes, combo boxes, string grids, DBgrids, charts and maps) and drawing on the canvas