First Simple Ribbon

My first Ribbon example is a very bare-bones demo showing how the component works, but actually providing no real user interface. As we'll see in the next section, the only real way to create a complete Ribbon-based user interface is to use the Action Manager architecture along with it. It is possible to use the Ribbon component without Actions, but it is very clumsy and extremely limited... so after a simple example I'll move in that direction.

We can, in fact, start some initial experiments with a plain Ribbon component, creating tabs and groups, and placing a couple of standard components into them. To follow my steps, simply create a new application and place a Ribbon component on its main form. Once you have that component in place you can use its shortcut menu (selecting it in the form or in the Structure pane) to add a new tab. The same menu will let you remove a tab or add the Application menu and Quick Access toolbar, as we'll see later on. You can also work on the Ribbon Tabs by using the Tabs collection of the Ribbon component (technically a collection of TRibbonTabltem objects, each of which is connected with a TRibbonPage, a sort of panel) and the related AddItem command. This is available in the Structure view:

The header of a Ribbon with two tabs and pages looks like this at design time in the Delphi 2009 IDE:



Document Name - Ribbon Caption

RibbonPagel RibbonPage2


In this case I've kept on the (default) ShowHelpButton property that shows the question mark in the top right of the control, I've also kept on the UseCustomFrame property (something I'll cover later on).

Here are a few other properties of the Ribbon control of the BareBoneRib-bon example:

object Ribbonl: TRibbon

Caption = 'Ribbon Caption' DocumentName = 'Document Name' Tabs = < item

Caption = 'RibbonPagel' Page = RibbonPagel end item

Caption = 'RibbonPage2' Page = RibbonPage2 end>

StyleName = 'Ribbon - Luna' Marco Cantu, Delphi 2009 Handbook object RibbonPagel... object RibbonPage2... end

Once you have one or more Ribbon tabs, you can add Ribbon groups (or boxes) to them. Again, you can work with the shortcut menus of the components right in the form or in the Structure pane. Here is how a Ribbon page with a few (empty) groups can look:






On a Ribbon page, you can add a group, remove a group, or reorder groups, through a simple specific dialog box (which tends to be easier to use, rather than dragging groups around the Ribbon page, hoping they'll stick in place).

What can you place in a group? You generally populate them with elements of various types, from commands to options, that are connected with Actions of an ActionManager component. If you want to hack something together, most certainly diverging from the Ribbon UI specification, you can add plain buttons or special purpose RibbonSpinEdit controls to the groups, as I've done in this demo. Again, this is not the recommended approach, although the RibbonSpinEdit control itself does fit within the Ribbon UI specification.

You can see the first two populated pages of my demo at runtime in the screen shot below:

Document Name - Ribbon Caption

_ I- X

RibbonPagel RibbonPage2


* btnlOO




0 cbShowBorder

This form is different from the usual one, because its caption and standard borders have been replaced by a special custom frame, painted by the Ribbon control itself. This is the default style for the Ribbon UI, with further graphical elements (like the Application menu) added, as we'll see later.

You can indeed disable the UseCustomFrame property. I've done that at runtime, when a user unchecks the check box, with this code:

procedure TFormBareBoneRibbon.cbShowBorderClick(

Sender: TObject); begi n

Ribbon1.UseCustomFrame := cbShowBorder.Checked; self.RecreateWnd; end;

Although this works when removing the custom frame, if you re-enable it the forms border won't be repainted properly133. I guess it currently makes sense to trigger this property at design time or when the form is created.

Another important setting to keep in mind is that if Ribbon control is reduced below the size of 300x250, it will be displayed in a minimized state (again, according to the Ribbon UI specification). If you want to avoid this, as some users might get confused, you can indicate minimum width and height settings for the form:

object FormBareBoneRibbon: TFormBareBoneRibbon Caption = 'BareBoneRibbon' Constraints.MinHeight = 270 Constraints.MinWidth = 320

The size is computed by adding some extra space for the borders to the minimum Ribbon size. This is something you have to remember doing in each form that uses the Ribbon control.

Was this article helpful?

0 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


  • kristian
    How to use ribbons delphi?
    9 years ago
    9 years ago
  • martin
    How to set action manager property of tribbon in delphi?
    9 years ago

Post a comment