How to add ribbon control to your application
Question and answers
"Ribbon" control was introduced by Microsoft in Office 2007. It's not just a new control - it's a new user interface ideology. Ribbon control
replaces traditional toolbars and menus with tabbed groups (Categories). Each group is logically split into Panels and each panel may contain various controls
and command buttons. In addition, Ribbon control provides smart layout maximally utilizing the available space. For example, if a Panel has been stretched
and has no place to display all available controls, it becomes a menu button which can display sub-items on a popup menu.
Another great addition is "Floaty" (mini toolbar). Floaty is a semi-transparent toolbar appearing right near the cursor and containing "hot"
commands relevant for the current context.
Customizable "Quick Access Toolbar" and "Main" button allow instant access to the most important and extensively used commands.
BCGControlBar Library provides easy and efficient way to add this technology to your applications.
The main class, the Ribbon control itself, is implemented by CBCGPRibbonBar. It behaves as a "static" (non-floating) control bar and
can be docked at the top of frame. In fact, the same Ribbon Bar can be used to implement Office 2007-2022-style status bar or any other control
that hosts Ribbon Categories (CBCGPRibbonCategory). A Ribbon Category is a logical entity. The visual representation of Category is a Ribbon Tab
(CBCGPRibbonTab). A Category contains (and the Tab displays) a group of Ribbon Panels. Each Ribbon Panel contains one or more Ribbon Elements
(CBCBPBaseRibbonElement-derived objects) as outlined on the following picture:
The most of Ribbon Elements should have two images - small and large. In some cases when a Ribbon Element has to display an image (it happens if the element
has been stretched to the size when it can display image only), but if the image has not been specified the library will use a default internal image.
Each Category is assigned its own image list. You can specify an
index in this image list for each Element that belongs to Category.
CBCGPRibbonButton implements a command button object. Ribbon Buttons can be
arranged in Groups (CBCGPRibbonButtonsGroup). Each Group has first and last
element. All Group elements are surrounded by a group border.
As special kind of Group is the Quick Access Toolbar (CBCGPQuickAccessToolbar).
Usually it contains the most important and frequently used commands. User can
customize this toolbar.
The Ribbon Main Button (CBCGPRibbonMainButton) is a special button located in
the left top corner of application window and displays a menu, which usually
contains "File" command like Open, Save, Exit.
The Ribbon Launch Button (CBCGPRibbonLaunchButton) is a small button located at
the right bottom corner of Ribbon Panel. This button can be associated with an
additional panel command (for example, it can display a dialog with some options
common to the Panel).
Ribbon Color Button (CBCGPRibbonColorButton) is a special Ribbon Element
(button), which displays a color picker. It extends the Ribbon Button and allows
setting additional options for the color picker.
How to add ribbon control to your application
Open mainfrm.h, remove
CBCGPMenuBar m_wndMenuBar and CBCGPToolBar m_wndToolBar.
Add definitions for the
Ribbon Bar and Ribbon Main Button:
Add definition for the panels image list:
Open MainFrm.cpp and remove
everything related to m_wndMenuBar and m_wndToolBar.
Add to the resources a bitmap
for the Ribbon Main Button (IDB_MAIN). Use a bitmap 26x26 pixels. Add a
bitmap for image list of small icons (16 pixels height) and a bitmap for
image list of large icons (32 pixels height). Name them IDB_SMALL_ICONS and
Create Ribbon Bar in CMainFrame::OnCreate:
Initialize and set Main
m_wndRibbonBar.SetMainButton(&m_MainButton, CSize(45, 45));
Initialize and load image list of panel icons:
Add the first category:
CBCGPRibbonCategory* pCategory = m_wndRibbonBar.AddCategory(
_T("&Write"), // Category name
IDB_WRITE, // Category small images (16 x 16)
IDB_WRITE_LARGE); // Category large images (32 x 32)
Add the first Panel to category:
CBCGPRibbonPanel* pPanel = pCategory->AddPanel(
_T("Clipboard"), // Panel name
m_PanelIcons.ExtractIcon(0)); // Panel icon
Now, we need to add ribbon elements (buttons) to the panel:
// Create the first button to Panel ("Paste"):
// The third parameter (-1) tells that this button does not have a small icon.
// Therefore the "Paste" button will be always displayed with large icon.
CBCGPRibbonButton* pPasteButton = new CBCGPRibbonButton(ID_EDIT_PASTE, _T("Paste"), -1, 0);
// Associate a popup menu with the "Paste" button:
// Add other buttons to the panel. These buttons have small icons only:
pPanel->Add(new CBCGPRibbonButton(ID_EDIT_CUT, _T("Cut"), 1));
pPanel->Add(new CBCGPRibbonButton(ID_EDIT_COPY, _T("Copy"), 2));
pPanel->Add(new CBCGPRibbonButton(ID_EDIT_PAINT, _T("Paint"), 9));
In the way outlined above you can set up the ribbon bars. Below you can read Q&A
how to take advantage of some more advanced features.
Questions and Answers
Q. How to add a toolbar combo box button to a panel?
A. Use CBCGPRibbonComboBox element:
Q. How to add a Quick Launch Button?
A. Let's say ID_APP_ABOUT command displays "About" dialog. To enable Quick Launch Button for a panel do the following:
Q. How to add to a Pane several groups of buttons from a toolbar defined in resources?
A. Create a toolbar in resource editor (IDR_MAINFRAME). Add an image list for this toolbar (IDB_MAINFRAME256).
Q. How to add a group of buttons to a Panel on the fly?
A. Create a CBCGPRibbonButtonsGroup object, add buttons to it and add this object to the Panel:
Q. How to add a custom button to a group of buttons created from a toolbar?
// 19, 20 - indexes of button images in the Category's image list.
CBCGPRibbonButtonsGroup* pButtonsList = new CBCGPRibbonButtonsGroup;
pButtonsList->AddButton(new CBCGPRibbonButton(ID_FORMAT_GROWFONT, _T("Grow font"), 19));
pButtonsList->AddButton(new CBCGPRibbonButton(ID_FORMAT_SHRINKFONT, _T("Shrink Font"), 20));
A. When toolbar has been added to a Panel you need to replace the "regular" button with the custom button.
Because the Ribbon Control copies and creates buttons on the fly (for example, when there is no room to display a button and this button
should be placed on a popup palette, Ribbon Control creates a copy of the button), you need to specify runtime class of the custom button:
// Load and add toolbar with standard buttons. This toolbar should display a custom color button
// with id ID_CHAR_COLOR:
// SetElementRTCByID sets runtime class and returns a pointer to the
// newly created custom button, which can be set up immediately:
CBCGPRibbonColorButton* pColorButton = (CBCGPRibbonColorButton*)
pColorButton->EnableAutomaticButton(_T("Automatic"), RGB(0, 0, 0));
Q. How to set up Quick Access Toolbar?
A. Just fill list of "quick access" commands and call CBCGPRibbonBar::SetQuickAccessCommands:
CList<UINT, UINT> lst;
Q. How to add elements at the right side of tabs?
A. The following code adds "About" button to the right side of tabs:
m_wndRibbonBar.AddToTabs(new CBCGPRibbonButton(ID_APP_ABOUT, _T(""), m_icons.ExtractIcon(5)));
Back to the Developer Area