How to Create a Ribbon Control in Code
- 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:
tab – contains tab groups;
tab group – a place for related toolbar items (commands);
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.