Ribbon with C++, Part 1: Introduction to the Windows Ribbon Framework

Due to popular demand, I’ve decided to use the knowledge I’ve gained while creating the Windows Ribbon for WinForms project and write a series of posts about working with the Windows Ribbon Framework with Win32 C++.

In this post, we will learn the basics of the Windows Ribbon Framework.

What Is a Ribbon?

Definition (from MSDN): “The Windows Ribbon framework is a rich command presentation system that provides a modern alternative to the layered menus, toolbars, and task panes of traditional Windows applications."

Put another way, it is the upper part of most Office 2007 applications:

The ribbon is an innovative way to expose functionality to the user. You can see from the image that the ribbon is composed from tabs, where each tab has groups with buttons, check-boxes, combo-boxes, image galleries, etc.
It may look like just another toolbar layout, but it’s so much more than that.

First, the ribbon exposes all the application functions. No more endless menu items hiding your needed feature in a deep sub-menu you can never find.

Second, the UI is consistent. The ribbon is the only place to look for a feature. You no longer need to search through menus, toolbars and dialogs.

If you have Windows 7 installed and you want to see a live example of the Windows Ribbon Framework, check out both Paint and WordPad applications.
Another application that uses this ribbon is Microsoft Movie Maker, which is part of Windows Live Essentials.

Why Was It Developed In The First Place?

Back in August 2003, when Office 2003 came out, the general consensus was that Office was done, in a sense that all the required features were finished. On a closer inspection, people have admitted that Office is very powerful but they don't know how to take advantage of it. The conclusion the office team reached was that the user interface was failing their users.

To better understand why the UI was failing the users, consider this:

Word 1.0, released back in 1989, had 2 toolbars and less than 50 menu items. That much UI is easily mastered by any user.

By the time Word 2003 came out, it had 31 toolbars (each consists of many buttons), 19 task panes (just another place to look for commands) and over 250 distinct menu items.

With so much UI functionality, people didn't even know where to look for a feature.

In fact, one obvious way to deduce there was a problem with the office UI was that people kept asking for features that already existed!

So, to rectify the situation, Microsoft did an extensive study on what bothered Office users the most. In addition, they have collected over 3,000,000,000 (yep, that’s 3 billion) Office sessions to research how users actually use Office.

After getting all this information, they began redesigning the Office UI to better answer the user's needs. And so, after making usability tests on many innovative user interfaces, they came up with the ribbon.

The ribbon is the single place where the user should look for functionality. The goal was to keep the user's focus on their content, cut the number of choices presented at any given time and above all, be consistent.

Ribbon APIs And Their Intended Audience

Since the Office ribbon turned out to be a major success, it was not long before many users started to request the ribbon feature in other third-party applications.
In order to meet public demands, Microsoft provided several implementations of the ribbon, each consistent with a different programming model and intended for different audience.

Note that the ribbon user experience remains the same regardless of the implementation.

Following are the Ribbon APIs available to date:

• Windows Ribbon Framework, the subject of this post, available in Windows 7 and Windows Vista with platform update, exposes a COM-based API, to be used by native Win32 developers.
• MFC Ribbon, available in Visual C++ 2008 Feature Pack, intended to be used by native MFC developers.
• WPF Ribbon, Preview Version, available in WPF toolkit for .Net 3.5 SP1, to be used by managed WPF developers.
• Visual Studio Tools for Office Ribbon, available with VSTO, to be used by Office add-ins developers.
• SharePoint Ribbon, available in SharePoint 2010, to be used by SharePoint developers.

Note: WinForms developers can use Windows Ribbon for WinForms, which is a COM-Interop based wrapper around Windows Ribbon Framework.

Windows Ribbon Framework Overview

Let's review what are the included features in the Windows Ribbon Framework.
We will elaborate on some of these features in future posts.

• Promotes separation of the view (UI controls) and commands (actions that the UI controls trigger).

• Provides a full set of UI controls to represent our commands:

  • Different kinds of buttons: Button, HelpButton, SplitButton and DropButton.
    The first two are used to represent a single command, whereas the last two each represent a collection of commands.

  

  Figure 3: Three buttons

  • CheckBox and ToggleButton are two UI representations of a single command with a Boolean state.

  • Spinner is a UI representation of a numerical value along with up / down buttons that allows the user to change it.

    

    Figure 4: Spinner Control

  • ComboBox represents a list of text items that one of them can be selected.

  • A gallery represents a dynamically populated list of image items that one of them can be selected. Galleries also give the live preview feature which enable users to see the results of selecting an item before actually selecting it. Galleries come in three variants: DropDownGallery, SplitButtonGallery and InRibbonGallery.

    

    Figure 5: InRibbonGallery used in Microsoft Paint

  • FontControl is a composite UI control that encapsulates the needed UI to control font properties like font family, font size, bold, etc.

    

    Figure 6: Font Control

  • DropDownColorPicker is a split button that drops down to a full-sized color picker control.

    

    Figure 7: Drop Down Color Picker

• The UI controls can be layout in tabs and groups or application menu.

  The group layout changes automatically according to the available space on screen and the layout definition. The group layout definition can be chosen from a predefined list of layouts or can be customized according to the user needs.

• Support for changing the ribbon structure according to current application mode.
• Contextual tabs allows you to add temporary tabs when a certain context is available (like showing image tools only when an image is selected).
• Provides Quick Access Toolbar (QAT), a place for commands that the user selected for quick access.
• Allows controlling the ribbon colors and visibility properties.

• Provides an enhanced context popup to go with the ribbon.

  

  Figure 8: Ribbon Context Popup

• Provides highly accessible UI by implementing Microsoft Active Accessibility.

• Provides support for High DPI and High Contrast settings.

Windows Ribbon Framework Requirements

Although Windows Ribbon Framework came out with Windows 7, it was made available to Windows Vista using the platform update mechanism.

The full list of Windows Ribbon Framework supported platforms is as follows:

• Windows 7
• Windows Vista with Service Pack 2 (SP2) and Platform Update for Windows Vista
• Windows Server 2008 R2
• Windows Server 2008 with SP2 and Platform Update for Windows Server 2008

Note that Windows XP is not supported.

In addition, to develop ribbon enabled applications, you must install the Windows 7 SDK.

Using the Windows Ribbon Framework

Writing a ribbon-enabled application is a four step process:

Step 1: Define the Ribbon UI

The Ribbon UI is defined in an XML file, using XAML-based syntax.
In the file, you declare what controls to use and how to layout them the ribbon surface.

Step 2: Compile Ribbon UI

Using a special compiler, named UICC.exe, you compile the ribbon UI definition into a binary resource file.

Step 3: Write handler code

In this step, you write the code that runs in responds to user action on the UI, e.g. pressing a button.

Step 4: Compile entire application

In this last step, you need to compile the code from step 3 and link with the binary resource output from step 2.

The following diagram (taken from MSDN) illustrates these steps:

In this post, we have seen what is the ribbon, why was it developed and what ribbon APIs exist. We also reviewed the features provided by Windows Ribbon Framework and the basic steps for writing a ribbon enabled application.

On future posts, we will dive into the details of creating ribbon enabled applications and see how to use its different features.

That's it for now,
Arik Poznanski.