The Ribbon Components

We have already seen through a practical example the role of the various Ribbon related components, from the Ribbon control itself to tabs and groups. These provide the overall organization of the user interface, and provide a wide range of options which I certainly cannot explore in detail here. Even without trying for complete coverage, though, I can certainly provide a few more hints.

Let's focus on the Ribbon group object first. One of the most important visual features of a group is its GroupAlign property, which can be either vertical or horizontal. Vertical might be better for large buttons, while horizontal is preferred for having rows of related small buttons. You can also use the Columns and Rows property of a group to change its overall layout. By default, the Ribbon groups have a vertical layout with three rows, as three buttons will fit in a group vertically. Remember that the Ribbon must be at least a given height, and so must its groups (scrollbars are never displayed in a Ribbon control).

Of course, if you set a button to be large, it will fill the entire group. In this case (taken from the standard RibbonDemo that comes with Delphi), the button is large and uses the split button style to show a drop down menu):

You obtain this effect by setting the proper styles of the ActionItem and providing a few sub-items, hooked with other actions: item

Action = EditPaste1

CommandProperties.ButtonSize = bsLarge CommandProperties.ButtonType = btSplit Items = < item

= EditPaste1

Action end item

Action end item

Action end> end end

At the opposite, you can have small buttons with no captions using a horizontal layout. Here is an example of a group with two rows of command buttons:

  • EditPasteSpecial
  • EditPasteHyperlink

The key properties of this group are:

object RibbonGroup8: TRibbonGroup Caption = 'Lines' GroupAlign = gaHorizontal Rows = 2 end

But how do you obtain the graphical effect of the grouped buttons? This is not automatic, as you have to modify the TActionClientItem objects of the group, removing the caption (turning off the ShowCaption property), setting a specific value for their CommandProperties.GroupPosition sub-property, and using the NewRow property as required:

Action = RichEditAlignCenter1 CommandProperties.GroupPosition = gpStart end item

Action = RichEditAlignRight1 CommandProperties.GroupPosition = gpMiddle end item

Action = RichEditAlignLeft1 CommandProperties.GroupPosition = gpEnd end item

Action = RichEditUnderline1

NewRow = True

CommandProperties.GroupPosition = gpStart end item

Action = RichEditItalic1

CommandProperties.GroupPosition = gpMiddle end item

Action = RichEditBold1 CommandProperties.GroupPosition = gpEnd end>

ActionBar = RibbonGroup8 end

This might seem a lot of manual work, but it let's you have a lot of control over the exact placement of the elements, rather than trusting some internal algorithm that might not work as you like.

Coming to action items, beside positioning and many other graphical elements, the most important decision you have to make is to pick the core user interface and behavior. If you pick a button, as in most of the cases of this demo, you can still use the TButtonProperties structure connected with the CommandProperties property I mentioned earlier. This let's you pick a button size, a button type, a group position and a text association using values of the following enumerations (defined as nested types): type

TButtonSize = (bsSmall, bsLarge); TButtonType = (btNone, btDropDown, btSplit, btGallery);

TGroupPosition = (gpNone, gpStart, gpMiddle, gpEnd, gpSingle); TTextAssociation = (taImage, taDropdown);

What is very interesting to notice is that the object connected with the CommandProperties property depends on the command type. So if you pick, for example, a text element, you'll see properties like Alignment, EllipsisPosition, and Font rather than those listed earlier for a button command. But which are the available command types for Action Client Items used by the Ribbon138?

138 In theory these command types could be used by any other visual container of action links, as this is defined as part of the Action Manager architecture and not specifically tied to the Ribbon. At the moment, though, all other action viewers and styles ignore this property.

Here is a list provided by the documentation (that is, the source code of the ActMan unit):

  • csButton - command is a button
  • csMenu - command is a menu
  • csSeparator - command is a separator with a caption
  • csText - command only displays text (clicking on it does nothing)
  • csGallery - command displays a gallery (a feature not supported in the current version of the Ribbon control)
  • csComboBox - command has an office 2007 combo box (notice this is automatically set when using the RibbonComboBox control)
  • csCheckBox - command appears like an office 2007 check box
  • csRadioButton - command appears like an office 2007 radio button
  • csControl - command has a TControl associated with it
  • csCustom - allows further expansion by third parties

An interesting case is the use of the csControl style, which lets you place almost any graphical control of the VCL to the Ribbon. For example, in the usual RibbonEditor demo, I've added a group with a ButtonedEdit control with a right button and a TextHint and a microscopic TreeView control:

Editing Advanced

Editing Advanced

Download URL


To Search


No Action

l> â–  one



t> - two

U J- B





All I had to do was to manually add an ActionToolbar to the ActionManager (using the Structure view), connect this toolbar with a new empty Ribbon group, pick a control in the Tool Palette, and select the Ribbon Group to add an action item connected with the corresponding control. Finally, I set the proper width for the entire action item and its label. Here is the textual definition of one of the ActionToolbar items:

Was this article helpful?

+2 0
Project Management Made Easy

Project Management Made Easy

What you need to know about… Project Management Made Easy! Project management consists of more than just a large building project and can encompass small projects as well. No matter what the size of your project, you need to have some sort of project management. How you manage your project has everything to do with its outcome.

Get My Free Ebook


  • Beau
    How to set radio button horizontally in delphi?
    10 years ago
    How to modify size on RibbonGroup delphi?
    9 years ago
  • Dahlak
    How to use csradiobutton in TRibbon in delphi?
    9 years ago

Post a comment