How to Create a Ribbon Control in Code

• Aug 02, 2022
• 4 minutes to read

This topic provides the basic information that you will need to create applications with a Ribbon UI from scratch. The sample application (shown below) uses TdxBarManager and TcxImageList components.

TdxBarManager is a required component for building the Ribbon. It allows you to develop toolbars that will be further used in the Ribbon. TcxImageList component helps you prepare a set of preloaded images that can be easily accessed in code. TdxBarManager is located on the ExpressBars page, and TcxImageList is on the DevExpress page of the Component Palette.

Two TcxImageList components are used here – one for 16x16 sized bar item icons (for this example it has been named SmallImagesList), and another for 32x32 sized icons (for this example it has been named LargeImagesList). The following image shows Image List Editors with loaded icons:

The Ribbon UI architecture provides the following elements:

• Ribbon – has a three-level structure:

1. tab – contains tab groups;

2. tab group – a place for related toolbar items (commands);

3. toolbar item – represents a command;

• Ribbon Quick Access Toolbar – contains frequently used commands;

• Ribbon Application Button – provides access to the Ribbon Application Menu;

• Ribbon Application Menu – contains application-level commands;

• Ribbon Status Bar – supports Ribbon UI;

• Ribbon Tab Area Toolbar and Ribbon Tab Area Search Toolbar – contain important commands for quick user access, complementing the Ribbon Application Menu and Ribbon Quick Access Toolbar;

• Enhanced ScreenTip – contains element-associated information.

For simplicity, the example only shows three Ribbon elements: the Ribbon with a tab page containing one tab group, the Ribbon Quick Access Toolbar and the Ribbon Application Button.

The following image demonstrates code execution:

unit RibbonDemo;
interface
uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls,
  Forms, Dialogs, StdCtrls, cxClasses, dxRibbon, cxControls, dxBar,
  dxBarExtItems, ImgList, cxGraphics;
type
  TForm1 = class(TForm)
    SmallImagesList: TcxImageList;
    LargeImagesList: TcxImageList;
  end;
var
  Form1: TForm1;
  LogoBitmap: TBitmap;
implementation
{$R *.dfm}
// ...
var
  Ribbon: TdxRibbon;
  RibbonTab: TdxRibbonTab;
  BarManager: TdxBarManager;
  FileBar, QuickAccessBar: TdxBar;
  const FileBarItems: array[0..5] of string = ('&New', '&Open', '&Save', '&Print...', 'P&rint Preview...', 'E&xit');
  const QuickAccessBarItems: array[0..2] of string = ('Save &All', '&Undo', '&Repeat');
  procedure AddItems(ABar: TdxBar; ABarItems: array of string);
  var
    I: Integer;
  begin
    for I:= Low(ABarItems) to High(ABarItems) do
    begin
      with ABar.ItemLinks.Add do
      begin
        Item := TdxBarLargeButton.Create(Self);
        with Item as TdxBarLargeButton do
        begin
          Caption := ABarItems[I];
          if ABar = FileBar then
          begin
            LargeImageIndex := I;
            ImageIndex := I;
            // show visual dividers that split the "File" toolbar into three sections
            if (Caption = '&Print...') or (Caption = 'E&xit') then
              BeginGroup := True;
          end
          else
          begin
            LargeImageIndex := I+High(FileBarItems)+1;
            ImageIndex := I+High(FileBarItems)+1;
          end;
        end;
      end;
    end;
  end;
begin
  BarManager := TdxBarManager.Create(Self);
  // ---------------------------------------------------------------
  // create FileBar and QuickAccessBar toolbars with the bar manager
  // ---------------------------------------------------------------
  with BarManager do
  begin
    FileBar := AddToolBar;
    FileBar.Caption := 'File';
    // do not show the "File" toolbar until it's docked to the Ribbon to prevent dirty regions rendering
    FileBar.Visible := False;
    QuickAccessBar := AddToolBar;
    // do not show the "QuickAccessBar" toolbar until it's docked to the Ribbon, to prevent dirty regions rendering
    QuickAccessBar.Visible := False;
    // specify small and large icons for bar items
    ImageOptions.Images := SmallImagesList;
    ImageOptions.LargeImages := LargeImagesList;
  end;
  // create the "File" toolbar's items
  AddItems(FileBar, FileBarItems);
  // create the "QuickAccessBar" toolbar's items
  AddItems(QuickAccessBar, QuickAccessBarItems);
  // ------------------------------------------------
  // create Ribbon
  // ------------------------------------------------
  Ribbon := TdxRibbon.Create(Self);
  Ribbon.Parent := Self;
  // to prevent flickering, place statements into the BeginUpdate/EndUpdate block
  Ribbon.BeginUpdate;
  // specify the "blue" skin (the default skin is "black")
  Ribbon.ColorSchemeName := 'blue';
  RibbonTab := Ribbon.Tabs.Add;
  RibbonTab.Caption := 'Home';
  Ribbon.BarManager := BarManager;
  // specify the application logo
  Ribbon.ApplicationButton.Glyph := LogoBitmap;
  with Ribbon.QuickAccessToolbar do
  begin
    // place the Ribbon Quick Access Toolbar at the top of the window, in order to show the Ribbon Application Button
    Position := qtpAboveRibbon;
    // dock the "QuickAccessBar" toolbar to the Ribbon Quick Access Toolbar container
    Toolbar := QuickAccessBar;
    Toolbar.Visible := True;
  end;
  // create a tab group in the "Home" tab page and place the "File" toolbar there
  with RibbonTab.Groups.Add do
  begin
    Toolbar := FileBar;
    Toolbar.Visible := True;
  end;
  Ribbon.EndUpdate;
end;
// ...
initialization
  LogoBitmap := TBitmap.Create;
  LogoBitmap.LoadFromFile('LogoIcon.bmp');
finalization
  LogoBitmap.Free;
end.