Orb Style 2007

Orb Style 2010


Orb Style 2013


Project News Highlight

• 07 Oct 2013 - Office 2013 Theme and several bug fixes
• 10 May 2013 - Ribbon can be worked with MDI Enabled WinForm (WindowState=Maximize) and inheritance of RibbonForm
• 10 Jan 2013 - ThemeBuilder released! Build and Load a Theme (Skin Color) Easily, See ThemeBuilderForm in the Demo App

• Themes for Office 2013, 2010, 2007
• Support .NET 2.0, 3.5, 4.0, 4.5

Project Description

This is the current project of Jose Menendez ribbon. Please Join!
Coded in: C#
Runs in: VB and C#
Needs: Someone who will help develop!

This ribbon is originally created by Jose Menendez Poo. Jose Menendez Poo has done a great job, many thanks and deep appreciation was given for his awesome work. However, the original author of the ribbon has stopped support of it. A group of fans of this ribbon re-host and continue to support and develop the ribbon here.

Original Site: http://ribbon.codeplex.com (By original author)

Below is the original introduction written by Jose Menedez Poo. The original content can still be found at the original site of this project.

Introduction

Written by Jose Menedez Poo - 10th May 2008

This is a Microsoft Office 2007 Ribbon Bar - like control for .NET, as all of the code in my site, is free and open source. At the time this is being written, is yet the best ribbon available for free.

Please refer to my site/blog http://www.menendezpoo.com for more on usage, development and news about this project



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. 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.

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, run it and resize the window. It peforms beautifully.

Consistency with Office's ribbon - I read once about Jakob Nielsen saying that most users prefer the programs they use look just like word, excel or powerpoint. This is quite obvious, because people use this software every day. Providing visual consistency with the office's ribbon is very important because people already know what to expect from a ribbon-like interface. 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 names, 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.

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 functionality 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 hiding 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 adopt 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.

Buttons

There's only one type of button: RibbonButton. It can be set to four styles, three of which are shown below. The fourth style, DropDownListItem, is the same as normal but with no image. It is used in simple dropdown lists like Font Size that don't require icons.



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 functionality, it's highly recommended to use just 32 x 32 pixels for Image property and 16 x 16 for SmallImage property. 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 through 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 always be 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 differently because groups flow as rows.

Lists

Lists are represented by RibbonButtonList and provide 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 functionality. When in a dropdown, separators can actually contain text. When they contain text, they will be rendered differently.



When they don't contain text, they will displayed as a line and can cover the full width of the dropdown to separate different controls, or partially cover the dropdown width to separate similar controls: