Click here to Skip to main content
Click here to Skip to main content
Go to top

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

, 13 Jun 2011
Rate this:
Please Sign up or sign in to vote.
The basics of the Windows Ribbon Framework - a rich command presentation system that provides a modern alternative to the layered menus, toolbars, and task panes of traditional Windows applications.

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:

clip_image002

Figure 1: Microsoft Word 2007 Ribbon

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.

clip_image004

Figure 2: Microsoft Paint in Windows 7

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.

    clip_image006

    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.

      clip_image008

      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.

      clip_image010

      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.

      clip_image012

      Figure 6: Font Control
    • DropDownColorPicker is a split button that drops down to a full-sized color picker control.

      clip_image014

      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.

    clip_image016

    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:

clip_image017

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.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

Share

About the Author

Arik Poznanski
Software Developer (Senior) Verint
Israel Israel
Arik Poznanski is a senior software developer at Verint. He completed two B.Sc. degrees in Mathematics & Computer Science, summa cum laude, from the Technion in Israel.
 
Arik has extensive knowledge and experience in many Microsoft technologies, including .NET with C#, WPF, Silverlight, WinForms, Interop, COM/ATL programming, C++ Win32 programming and reverse engineering (assembly, IL).
Follow on   Twitter   Google+

You may also be interested in...

Comments and Discussions

 
Questionnice PinmemberCIDev15-Jul-11 7:37 
GeneralMy vote of 5 PinmemberRhuros10-Jul-11 23:45 
GeneralMy vote of 5 PinmemberPrafullaVedante13-Jun-11 0:43 
GeneralWindows office 2007 on Windows XP shows Ribbon UI PinmemberPrafullaVedante13-Jun-11 0:41 
GeneralRe: Windows office 2007 on Windows XP shows Ribbon UI PinmvpArik Poznanski13-Jun-11 1:05 
GeneralMy vote of 5 Pinmemberflyhigh6-Jun-11 16:17 
GeneralRe: My vote of 5 PinmvpArik Poznanski13-Jun-11 1:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140922.1 | Last Updated 13 Jun 2011
Article Copyright 2011 by Arik Poznanski
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid