Delphi: Ribbon Quick Access Toolbar - small images don't show up

Question

I have no idea why, but using Delphi 2009's ribbon control, the small images in the quick access toolbar don't show up.

I've got an image list with images set to 16x16 pixels and when I use them as the regular image list, it doesn't work, just shows the menu caption. If I switch to use the large image list it works, but adds extra padding and looks bad.

Any idea what is going on? Which of the multitudinous options needs to be configured to get this thing to act as expected?

Answer 1

In Delphi 2010, and XE, the steps are:

1. add TRibbon, ImageList, and ActionManager to a blank form. Link ImageList to ActionManager.
2. add some dummy actions like Edit->Copy which will automatically gain an image for testing.
3. right click, add QuickAccessToolbar then right click and Add Application Menu.

4. set Form.DoubleBuffered true, and Form.GlassFrame.Enabled true.

5. Double click ActionManager. This opens On the Action manager properties dialog. Go to Toolbars tab and click or double-click "RibbonQuickAccessToolbar1" to get focus on that toolbar. This step is important, it seems difficult to get items added unless you do this.

6. On the Action manager properties dialog, go to Actions page, and drag an action like Copy/Paste that has an image visible in the actions list, to the selected area on the form.

7. It seems easier to add a second item with an image to the QAT, than to add the initial one.

Let me know if that works for you in 2009.

Here is the DFM content MINUS THE IMAGE LIST CONTENT:

object Form5: TForm5
  Left = 0
  Top = 0
  Caption = 'Form5'
  ClientHeight = 337
  ClientWidth = 527
  Color = clBtnFace
  DoubleBuffered = True
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  GlassFrame.Enabled = True
  OldCreateOrder = False
  OnCreate = FormCreate
  PixelsPerInch = 96
  TextHeight = 13
  object Ribbon1: TRibbon
    Left = 0
    Top = 0
    Width = 527
    Height = 143
    ActionManager = ActionManager1
    ApplicationMenu.Menu = RibbonApplicationMenuBar1
    Caption = 'Ribbon1'
    QuickAccessToolbar.ActionBar = RibbonQuickAccessToolbar1
    ExplicitLeft = 272
    ExplicitTop = 120
    ExplicitWidth = 0
    StyleName = 'Ribbon - Luna'
    object RibbonQuickAccessToolbar1: TRibbonQuickAccessToolbar
      Left = 49
      Top = 1
      Width = 99
      Height = 24
      ActionManager = ActionManager1
    end
    object RibbonApplicationMenuBar1: TRibbonApplicationMenuBar
      ActionManager = ActionManager1
      OptionItems = <>
      RecentItems = <>
    end
  end
  object ImageList1: TImageList
    Left = 288
    Top = 184
    Bitmap = {
      494C010105000800080010001000FFFFFFFFFF00FFFFFFFFFFFFFFFF424D3600
      ....
      }
  end
  object ActionManager1: TActionManager
    ActionBars = <
      item
        Items = <
          item
            Action = EditCopy1
            ImageIndex = 1
            ShowCaption = False
            ShortCut = 16451
          end
          item
            Action = EditCopy1
            ImageIndex = 1
            ShowCaption = False
            ShortCut = 16451
          end
          item
            Action = EditPaste1
            ImageIndex = 2
            ShowCaption = False
            ShortCut = 16470
          end>
        ActionBar = RibbonQuickAccessToolbar1
        AutoSize = False
      end
      item
        Items = <
          item
            ChangesAllowed = [caModify]
            Items = <
              item
                Action = EditCopy1
                ImageIndex = 1
                ShortCut = 16451
              end
              item
                Caption = 'ActionClientItem1'
              end>
            Caption = 'ActionClientItem0'
            KeyTip = 'F'
          end>
        ActionBar = RibbonApplicationMenuBar1
        AutoSize = False
      end>
    Images = ImageList1
    Left = 288
    Top = 120
    StyleName = 'Ribbon - Luna'
    object EditCut1: TEditCut
      Category = 'Edit'
      Caption = 'Cu&t'
      Hint = 'Cut|Cuts the selection and puts it on the Clipboard'
      ImageIndex = 0
      ShortCut = 16472
    end
    object EditCopy1: TEditCopy
      Category = 'Edit'
      Caption = '&Copy'
      Hint = 'Copy|Copies the selection and puts it on the Clipboard'
      ImageIndex = 1
      ShortCut = 16451
    end
    object EditPaste1: TEditPaste
      Category = 'Edit'
      Caption = '&Paste'
      Hint = 'Paste|Inserts Clipboard contents'
      ImageIndex = 2
      ShortCut = 16470
    end
    object EditSelectAll1: TEditSelectAll
      Category = 'Edit'
      Caption = 'Select &All'
      Hint = 'Select All|Selects the entire document'
      ShortCut = 16449
    end
    object EditUndo1: TEditUndo
      Category = 'Edit'
      Caption = '&Undo'
      Hint = 'Undo|Reverts the last action'
      ImageIndex = 3
      ShortCut = 16474
    end
    object EditDelete1: TEditDelete
      Category = 'Edit'
      Caption = '&Delete'
      Hint = 'Delete|Erases the selection'
      ImageIndex = 4
      ShortCut = 46
    end
  end
end

Here's what it looks like at runtime:

Answer 2

Don't create an action list to link to the action manager, just use the ribbon to do everything automatically.

If you don't see icons in the list, you won't see them in your app.