Ribbon Bar

1. Introduction

2. Classes

3. How to add ribbon control to your application

4. Question and answers

Introduction

"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 new technology to your applications.

Back to top

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/2010/2013-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

1. Open MainFrme.h, remove CBCGPMenuBar m_wndMenuBar and CBCGPToolBar m_wndToolBar.

2. Add definitions for the Ribbon Bar and Ribbon Main Button:
    

   CBCGPRibbonBar m_wndRibbonBar; CBCGPRibbonMainButton m_MainButton;

    

3. Add definition for the panels image list:
    

   CBCGPToolBarImages m_PanelIcons;

    

4. Open MainFrm.cpp and remove everything related to m_wndMenuBar and m_wndToolBar.

5. 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 IDB_LARGE_ICONS respectively.

6. Create Ribbon Bar in CMainFrame::OnCreate:
    

   m_wndRibbonBar.Create (this);

    

7. Initialize and set Main Ribbon Button:

   m_MainButton.SetMenu (IDR_FILE_MENU); m_MainButton.SetImage (IDB_MAIN); m_MainButton.SetToolTipText (_T("File")); m_wndRibbonBar.SetMainButton (&m_MainButton, CSize (45, 45));

    

8. Initialize and load image list of panel icons:

   m_PanelIcons.SetImageSize (CSize (16, 16)); m_PanelIcons.Load (IDB_PANEL_ICONS);

    

9. 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)

    

10. Add the first Panel to category:

    CBCGPRibbonPanel* pPanel = pCategory->AddPanel (     _T("Clipboard"),                       // Panel name     m_PanelIcons.ExtractIcon (0));  // Panel icon

     

11. Now, we need to add ribbon elements (buttons) to the panel:

    // Create the first button to Panel ("Paste"): CBCGPRibbonButton* pPasteButton = new CBCGPRibbonButton (ID_EDIT_PASTE, _T("Paste"), -1, 0); // 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. // Associate a popup menu with the "Paste" button: pPasteButton->SetMenu (IDR_CONTEXT_MENU); // 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.

Back to top

Q. How to add a toolbar combo box button to a panel?
A. Use CBCGPRibbonComboBox element:

pPanel->Add (new CBCGPRibbonComboBox (ID_MY_COMBO);

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:

pPanel->EnableLaunchButton (ID_APP_ABOUT);

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).

pPanel->AddToolBar (IDR_MAINFRAME, 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:

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)); pPanel->Add (pButtonsList);

19, 20 - indexes of button images in the Category's image list.

Q. How to add a custom button to a group of buttons created from a toolbar?
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: pPanel->AddToolBar (IDR_MAINFRAME, IDB_MAINFRAME256); CBCGPRibbonColorButton* pColorButton = (CBCGPRibbonColorButton*)       pPanel->SetElementRTCByID (ID_CHAR_COLOR, RUNTIME_CLASS (CBCGPRibbonColorButton)); // SetElementRTCByID sets runtime class and returns a pointer to the // newly created custom button, which can be set up immediately: 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; lst.AddTail (ID_FILE_SAVE); lst.AddTail (ID_EDIT_COPY); lst.AddTail (ID_FILE_PRINT); m_wndRibbonBar.SetQuickAccessCommands (lst);

Q. How to add elements at the right side of tabs?
A. The following adds "About" button to the right side of tabs:

m_wndRibbonBar.AddToTabs (     new CBCGPRibbonButton (ID_APP_ABOUT, _T(""), m_icons.ExtractIcon (5)));

Back to top