Extreme Form Makeover with C1Ribbon

What is a Ribbon?

A Ribbon, in computing terms, is a tabbed interface of buttons and controls which replace traditional menus and toolbars at the top of a window. The Microsoft Ribbon interface was first introduced in the Office 2007 applications such as Word, Excel and PowerPoint.

Benefits of using a Ribbon interface

  1. The Ribbon interface is considered to be more user-friendly than traditional menus and toolbars because it allows commands to be more easily discovered by users. This enables users to more quickly learn the features and functions of an application.
  2. The most commonly used commands can be centralized to a single "Home" tab which the user will most often see. Less commonly used commands can remain easily found, but yet not clutter the screen, on secondary tabs.
  3. Users can customize the Quick Access Toolbar (QAT), which is located above or below the ribbon, to suit their particular style and need by choosing which commands to display.
  4. Commands can be repeated in the QAT without repeating functionality during development.
  5. Ribbons contain more visual cues than traditional menus, where all commands are mostly text-based. And in general, Ribbons increase the visual appeal of any application which uses them.

ComponentOne Ribbon for WinForms

With ComponentOne Ribbon for WinForms you can deliver the same look and feel as the Microsoft Office 2007 UI in your own applications. Ribbon for WinForms includes 2 main controls: C1Ribbon and C1StatusBar, a template form: C1RibbonForm, as well as 19 native Ribbon elements with over 700 stock images for these elements.

Form Remodeling

When your kitchen gets old and dated looking it's time to remodel and upgrade, right? Otherwise, how are you ever going to resell your house? The same can be said for windows applications - especially ones which turn a profit. ComponentOne Ribbon for WinForms has started a trend of application developers remodeling their old looking UI's to match the Microsoft Office look and feel. And with the ribbon interface we're not just enhancing the UI; we're also enhancing the user experience, or the UX.

To see this in action, check out this video below. The first half demonstrates the key features and functionalities of Ribbon for WinForms. The second half shows how to get started developing with the ComponentOne Ribbon controls in Visual Studio. You'll see it's very easy and designer-intuitive.


Form Makeover Examples

We here at ComponentOne have used the C1Ribbon UI to enhance some of our own applications you know and love. See the before and after screenshots below.









After: (we provide the source code for this as a C1Preview sample)

C1Editor control


After: (we provide the source code for this as a C1Editor sample)

Ribbon Remodeling Tips

  • Name the first tab "Home" and place most commonly used commands here.
  • Always choose a small image in addition to a larger image for large buttons. This way the Ribbon can display an appropriate icon when large buttons are either resized smaller, or the user selects them for the QAT.
  • RibbonGroups have an Image property which is commonly missed. The image set here is displayed when the RibbonGroup collapses; otherwise you get the standard arrow icon.
  • If you don't like the baby blue color scheme, select the Black or Silver VisualStyles instead.
  • The ribbon is not intended for browsing or navigation so therefore it does not work well with these tasks.
  • The application should not navigate or change pages/forms when users change tabs on the Ribbon. Reconsider a different UI approach for navigation.
  • Ribbon commands that do not apply to the current selected form/page/object should be grayed out- they should not disappear from view.
  • A Ribbon UI should not be forced into an application, nor should an application be built around wanting a Ribbon UI.
  • Ribbons are best suited for applications that have many shared toolbars or centralize around a single "item" whether it is a document, data view, or multi-media element, etc.

For more details, full documentation and features; check out the Ribbon for WinForms product page.

Greg Lutz

comments powered by Disqus