Using the Windows 7 Ribbon with Visual C++ Applications

Introduction

The Visual C++ 2008 Feature Pack, which ushered in a much-needed and comprehensive refresh of MFC, included a ribbon control that was a custom implementation of the Office 2007 counterpart which inspired it. Windows 7 includes an in-built Ribbon control, and standard applications like WordPad and Paint take advantage of this new control. The Windows 7 Ribbon (which is formally titled in the MSDN documentation as the 'Windows Ribbon Framework') is also available for Windows Vista SP2 with the installation of the Platform Update for Windows Vista. The KB article describing the Platform Update can be found here, and installation is accomplished through the inbuilt Windows Update functionality of the operating system.

This article will look at a number of the technical issues related to using the MFC ribbon in a Visual C++ application, but it is important to note that the ribbon control is not merely another control that is placed on a dialog to accomplish a specific task, but rather represents a significantly different way to accomplish application navigation. The MSDN documentation on the Windows Ribbon Framework has excellent information on the design guidelines for building a ribbon application, and it is well worth conducting a significant redesign of application navigation when introducing a ribbon control rather than just retro-fitting it on top of existing menus and toolbars.

Those with a keen eye will notice that the Windows 7 ribbon is subtly different to the one that shipped with Office 2007. The most obvious difference is that the application button is smaller in size, and contains a small arrow to indicate that clicking the button will display a menu. Figure 1 shows the original look of the ribbon control that shipped in Office 2007, and Figure 2 shows its slightly-refined update from Window 7 Wordpad.


Figure 1. Office 2007-era ribbon


Figure 2. Windows 7 ribbon

The significance of this difference for Visual C++ developers is that the type of ribbon displayed in a MFC application can be chosen when the Visual C++ AppWizard is run, and can even be changed at runtime. When the AppWizard is run, the Visual Style and colors drop-down on the Application Type Wizard step allows the developer to choose from a variety of options such as Microsoft Visual Studio, Office 2007 and Windows 7 styles. The Windows 7 option, as shown in Figure 3, is the only one which results in the standard Windows 7 ribbon with the smaller application button displayed, but this can be changed at runtime by calling m_wndRibbonBar.SetWindows7Look(TRUE) in the main frame class.


Figure 3. AppWizard Settings for Windows 7 Ribbon Display

Visual C++ 2010 provides an excellent designer for the ribbon control, as shown in Figure 4. As can be seen in the Resource View windows on the left side of Figure 4, the ribbon is treated as a first-class resource, and the Visual C++ Toolbox offers a rich variety of controls that can be added to the ribbon. In addition to the standard design surface, the Ribbon Editor toolbar (on the second row of the Visual C++ toolbar in Figure 4) allows the developer to assess the visual impact of switching between Office 2007 and Windows 7 ribbon display styles, and the ribbon can actually be run using the 'Test Ribbon' command-bar button in Visual C++ without the need to start the full application.


Figure 4. Ribbon Designer.

A ribbon is broken down into hierarchal display, with different Category controls (visually displayed as tabs on the ribbon control) used to group other controls which relate to similar functionality. In addition to standard Category tabs which are always visible, the ribbon supports Context Category controls, which are color-coded Categories that are only visible when a certain item in the application is selected.

Within each Ribbon category, related controls are grouped together on a Panel control. A Panel has a caption which is displayed along its bottom margin, and is visually separated from other Panels on the same ribbon by a separator which is automatically added. After the design of a ribbon control has been completed to the extent of placing the required Category and Panel controls on the design surface, the experience of adding further controls, assigning properties and wiring up event handlers follows the same pattern as other MFC design surfaces such as dialogs and toolbars.

In addition to the standard functionality that controls like buttons, check boxes and combo box controls exhibit, a number of controls have specific functionality optimized for use on the ribbon. The Ribbon Button control has the ability to attach menu items (visually indicated by a small arrow at the base of the button) that can be used to access advanced functionality. Ribbon Buttons can also have a large and standard size image associate with them, with the Paste button in Figure 4 having a large button resource set which results in its more prominent display in the ribbon.

For developers that have used the ribbon control from the Visual C++ 2008 Feature Pack (or Visual C++ 2008 SP1 which included the Feature Pack enhancements), the MFC 10 ribbon control provides an easy upgrade path. The underlying storage of the ribbon control resource is an XML file, and this is different to the Visual C++ 2008 code-based ribbon construction. To upgrade to the new resource format, the CMFCRibbonBar::SaveToXMLFile method can be used to dump the Visual C++ 2008-era code-constructed ribbon to a format that can then be directly imported as a Visual C++ 2010 ribbon resource. Once the resource has been included in the project and built, a call to CMFCRibbonBar::LoadFromResource can be used to replace all the code that manually constructs the ribbon. By doing this, upgraded projects can take advantage of the Visual C++ 2010 ribbon designer.

Conclusion

The Windows Ribbon Framework is a major platform upgrade for accessing application functionality. Visual C++ was the first Microsoft development tool to provide in-built support for a ribbon control, and with the Visual C++ 2010 release, the continuing commitment to keeping MFC a relevant and modern application development toolkit is built upon with comprehensive support for the Windows Ribbon Framework. By providing a simple upgrade path, the investment of early adopters to the ribbon control is protected. The key point for MFC applications being upgraded to use ribbon-based navigation is that ribbons are much more than simply a visual gimmick, and represent a new way for users to select commands within an application. For developers with limited UI design skills, engaging the services of specialized designers in the redesign of an application when incorporating ribbon-based navigation is recommended.



Comments

  • Ted.

    Posted by Ted. on 08/10/2010 03:47pm

    Very cool, however it's not a true operating system level ribbon. What would be nice is true OS ribbon, where it's supported (i.e. the ones used in MSPaint in Windows 7)

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: December 11, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT Market pressures to move more quickly and develop innovative applications are forcing organizations to rethink how they develop and release applications. The combination of public clouds and physical back-end infrastructures are a means to get applications out faster. However, these hybrid solutions complicate DevOps adoption, with application delivery pipelines that span across complex hybrid cloud and non-cloud environments. Check out this …

  • On-demand Event Event Date: October 29, 2014 It's well understood how critical version control is for code. However, its importance to DevOps isn't always recognized. The 2014 DevOps Survey of Practice shows that one of the key predictors of DevOps success is putting all production environment artifacts into version control. In this webcast, Gene Kim discusses these survey findings and shares woeful tales of artifact management gone wrong! Gene also shares examples of how high-performing DevOps …

Most Popular Programming Stories

More for Developers

RSS Feeds