TRibbon's large button's image is not centered...any ideas? easy to demonstrate at design-time.

Question

i'm using delphi 2009 (updates 1, 2, 3, 4). i'm seeing something quite peculiar. the image on the button is not centered in the button when i have a large button with a large glyph! rather than being centered, the left part of the glyph starts at the center of the button.

a clue is that when i:

1. go into the action editor and select the action
2. use the ImageIndex combobox in the object inspector, the list is empty (normally i'd see the available images in the combobox).

it seems as though there's an image width property i've failed to set or an imagelist not correctly configured. i've expected the glyph on a large button should be 32x32.

try the following:

1. paste these components into an empty form
2. add a 32x32 image to the image list
3. set the Action1 imageindex to 0

you'll immediately see what i mean!

can anyone tell me why it looks that way?

i find it interesting that the ribbon demo app doesn't show this problem. i even tried the same image.

thank you!

object ActionManager1: TActionManager
  ActionBars = <
    item
      Items = <
        item
          Action = Action1
          Caption = '&Action1'
          ImageIndex = 0
          CommandProperties.ButtonSize = bsLarge
        end>
      ActionBar = RibbonGroup1
    end>
  LargeDisabledImages = img3232
  LargeImages = img3232
  Left = 376
  Top = 184
  StyleName = 'Ribbon - Luna'
  object Action1: TAction
    Caption = 'Action1'
    ImageIndex = 0
  end
end
object Ribbon1: TRibbon
  Left = 0
  Top = 0
  Width = 693
  Height = 147
  ActionManager = ActionManager1
  Caption = 'Ribbon1'
  Tabs = <
    item
      Caption = 'RibbonPage1'
      Page = RibbonPage1
    end>
  ExplicitLeft = 232
  ExplicitTop = 80
  ExplicitWidth = 0
  DesignSize = (
    693
    147)
  StyleName = 'Ribbon - Luna'
  object RibbonPage1: TRibbonPage
    Left = 0
    Top = 54
    Width = 692
    Height = 93
    Caption = 'RibbonPage1'
    Index = 0
    object RibbonGroup1: TRibbonGroup
      Left = 4
      Top = 3
      Width = 54
      Height = 86
      ActionManager = ActionManager1
      Caption = 'RibbonGroup1'
      GroupIndex = 0
    end
  end
end
object img3232: TImageList
  Height = 32
  Width = 32
  Left = 376
  Top = 256
end

Answer 1

I used to have this problem with Delphi 2009 as well (seems to have disappeared in 2010).

IIRC, try setting the large image list reference in the action manager to nothing, then back to the image list again.

N@

Answer 2

the problem was that the related TActionClients object (find it in the Structure view) somehow (by default?) gets SmallIcons=true...leading to incorrect positioning of the glyph. changed it in the object inspector & it works now.

Answer 3

I discovered this problem again myself. I was adding a group to a TRibbon page at runtime (I have a plugin framework doing the work). After adding the group, and adding a button, the images were offset. But only on XP.

I think the problem has to do with the glyph width at some point being 0, which then makes FGlyphPos in TCustomActionControl to be the centre of the button (for large buttons), and the text to be positioned at the very left of the button (for small buttons). The width of the group is also smaller than it should be because of this.

A quick and easy way to kick the groups in to re-aligning everything is to add this code to the form (here I have added it to the OnShow event, but you can put it where you like):

for LTabIndex := 0 to Ribbon.Tabs.Count - 1 do
  for LGroupIndex := 0 to Ribbon.Tabs[LTabIndex].Page.GroupCount - 1 do
    Ribbon.Tabs[LTabIndex].Page.Groups[LGroupIndex].AlignGroupControls;

Hope this helps someone. :)