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.
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.
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.
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:
Note: WinForms developers can use Windows Ribbon for WinForms, which is a COM-Interop based wrapper around Windows Ribbon Framework.
Let's review what are the included features in the Windows Ribbon Framework. We will elaborate on some of these features in future posts.
Provides a full set of UI controls to represent our commands:
CheckBox and ToggleButton are two UI representations of a single command with a Boolean state.
CheckBox
ToggleButton
Spinner is a UI representation of a numerical value along with up / down buttons that allows the user to change it.
Spinner
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.
DropDownGallery
SplitButtonGallery
InRibbonGallery
FontControl is a composite UI control that encapsulates the needed UI to control font properties like font family, font size, bold, etc.
FontControl
DropDownColorPicker is a split button that drops down to a full-sized color picker control.
DropDownColorPicker
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.
Provides an enhanced context popup to go with the ribbon.
Provides highly accessible UI by implementing Microsoft Active Accessibility.
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:
Note that Windows XP is not supported.
In addition, to develop ribbon enabled applications, you must install the Windows 7 SDK.
Writing a ribbon-enabled application is a four step process:
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.
Using a special compiler, named UICC.exe, you compile the ribbon UI definition into a binary resource file.
In this step, you write the code that runs in responds to user action on the UI, e.g. pressing a button.
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.
