Office 2007 风格控件(Ribbon)

A Professional Ribbon you will use

By Jose M. Menendez Poó

A serious project on an Office-like Ribbon control

(源程序及演示下载)

Introduction

Because of the lack of good free Ribbon controls on the web, I decided to write one myself. I've analyzed previous work on ribbon-controls, including those on CodeProject. Unfortunately, most existent controls are merely bad tries. Why? well, some lack nice rendering, some lack resizing features, some lack almost everything. Of course, well developed Ribbon controls are available at a price. This ribbon is free.

Why not WPF? Well mainly, because I needed the Ribbon to add it to my existing WinForms applications. In my opinion (the short version) this is not a "no" to WPF, is just a "not yet". Anyway, you can host a WinForms control in WPF (See http://msdn.microsoft.com/en-us/library/ms750944.aspx).

Some of the design goals

Performance - This ribbon is contained on a Control window, and every element inside of it is managed as a bunch of bounds inside the control, just as the ToolStrip control does. Altough this is difficult to manage from the ribboon's inside code, this is a way to keep it at the best performed ribbon. Believe me, download the demo, runit and resize the window. It peforms beautifully.

Consistency with Office's ribbon - I read once about Jakob Nielsen saying that most users prefer that the programs they use look just like word, excel or powerpoint. This is quite obvious, becouse people use this software every day. Providing visual consistency with the office's ribbon is very important because of that, people already know what to expect and that's an usability advantage. I've tried to every element in the ribbon look and behave exactly like it does in the Office's ribbon.

Ease of use for programmers - The naming of components is consistent with most WinForms naming system, even more with the ToolStrip elements. Property, event and method names for similar elements are named just like in the ToolStrip technology items.

Designer support - I will be adding more and more designer support so you can manage the ribbon 100% from the designer. Give it a try.

I will be providing updates and fixes for bugs, as I discover them or you kindly let me know about them.

Using the Ribbon

The ribbon is located in the

System.Windows.Forms

namespace, just as every other control, I think it's annoying to use controls named as

MyCoolFirm.MyCoolNameSpace.MyCoolSubNameSpace

and so on (Please do that only for bussiness objects).

You can add a reference to the compiled dll: System.Windows.Forms.Ribbon.dll or you can directly copy the source files to a folder on your project. The code is currently designed so you can just copy the source files, it doesn't need any extra resources.

Hands on: Quick Guide

The ribbon is composed mainly by three kind of elements, the tabs, the panels on the tabs (other developers call them groups) and the items inside the panels.







These elements are represented by

RibbonTab

,

RibbonPanel

and

RibbonItem

types.

RibbonItem

is an abstract class that provides basic functionallity for any item hosted on a

RibbonPanel

or on a

RibbonDropDown

.

You can add tabs from the smart tag of the Ribbon, you can add panels to the tab by selecting the tab and calling the "AddPanel" verb on the bottom part of the property grid.

The elements on the ribbon are resized according to the available space for the ribbon. This is a key feature of the ribbon. It tries to bring all possible commands to the screen by resizing them, instead of hidding them on an overflow button like the old ToolStrip.

I treat this as three kinds of sizes: Large, Medium and Compact. An additional size is used for panels, because panels can be collapsed, and then they will adopth the Overflow size.



Note: There's no way to directly affect the bounds of the elements on the ribbon, the size will always be determined the layout engine inside the ribbon. In fact, the layout depends on two factors: the available horizontal space on the ribbon and the size modes on the items.

If there's no available space on the ribbon for a panel, panel will be collapsed. If all panels are collapsed and space is not available yet, a scroll button will appear so user can scroll the panels horizontally.

See Image

Buttons

There's only one type of button:

RibbonButton

. It can be setted to three styles:

RibbonButton

adds the

SmallImage

property so you can set the image shown when button is in medium or compact mode. Although it's not restricted by functionallity, it's highly recommended to use just 32 x 32 pixels for Image property and 16 x 16 for SmallImageproperty. Results are unexpected when sizes are different.

Note: Use the

DropDownItems

property to add items to the dropdown of the button.

The appearance of the buttons vary thru size modes.

ItemGroups

The buttons like those on the Font and Paragraph panels are

RibbonButton

buttons hosted inside a

RibbonItemGroup

group.



Items added to

RibbonItemGroup

will be always measured and treated in compact size mode.

Important: If a

RibbonPanel

will host

RibbonItemGroup

objects, you must set the

RibbonPanel.FlowsTo

property to

Right

. The layout on those items are treated different because groups flow as rows.

Lists

Lists are represented by

RibbonButtonList

and provides two collections:

Buttons

and

DropDownItems

, this is because the list can be scrolled on the ribbon and can dropdown more items. The dropdown of list supports resizing by a grip on the south east corner.

If you want the buttons on the list to be shown on the dropdown, you will have to explicitly add another list with those buttons to the

DropDownItems

property

Separators

Separators are represented by

RibbonButtonSeparator

and provides the well known separator functionallity. When in a dropdown, separators can actually contain text. When they contain text they will be rendered differently.

Known Bugs

- Multiple dropdowns not managed accurately
- Drawing of collapsed panels when mouse down

Things to do

- Contextual tabs
- ToolTips
- (OK) TextBox, ComboBox
- Checkbox and NumericUpDown RibbonItems
- Orb and Quickaccess tools
- Vista clientarea docking
- Keyboard quick access thru Alt key
- Font and Color selectors
- Right to left orientation
- Ribbon minimization

History

8 May 2008 - Original Post
29 May 2008 - Update

Enabled

property now working
Added

RibbonTextBox

- A regular textbox with label and image
Added

RibbonComboBox

- (Interited from

RibbonTextBox

) Offers a dropdown
Added

RibbonColorChooser

- A button that shows a color bar. See property

Color

License

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

About the Author

Jose M. Menendez Poó

Jose Manuel Menéndez Poó Mexico I've been programming Windows and Web apps since 1997. My greatest concern nowadays is user interface usability. My blog: www.menendezpoo.com Occupation: Team Leader Location: Mexico