Divelements
Because every action starts with the presentation layer
SandRibbon for Windows Forms
  Home Products Downloads Store Support Corporate  
SandRibbon Anatomy

The SandRibbon suite of controls and widgets can greatly improve the usability of your product, especially if you have a lot of features to offer your customers and therefore need to do so intuitively, with excellent discoverability. It is important to understand the anatomy of a Ribbon application and how best to lay out Ribbon components.

The Form


RibbonForm allows Ribbon content in the nonclient area.

Your form is of course always the top-level object. We mention it here because the ribbon paradigm makes use of space on your form that is traditionally in the non-client area, specifically the titlebar. To enable this functionality we provide the RibbonForm class, which you can make your form inherit from instead of the plain Form class.

You can choose not to use the Ribbon controls on your RibbonForm, of course. Like Microsoft Outlook 2007, you may wish to combine the custom form shape with a traditional layout of menus and toolbars.


The Ribbon


The application button boasts several shine effects to draw the attention of the user.

The Ribbon is always docked to the top of your form. It contains many tabs full of features that make up the command set of your application, some of which may only appear in certain contexts (i.e. tabs under "Picture Tools" may only appear when a picture is selected). If your ribbon is hosted on a RibbonForm it will also take responsibility for drawing the titlebar of your form, in which contextual tab hints, the application button and your form title are displayed.

The application button is the gateway to all document-level tasks that would previously have been found under the File menu, and a recently-used-documents list.


The Quick Access Toolbar


The quick access toolbar shown between the ribbon and document.

The toolbar is a place for commands used so frequently they belong outside the scope of any single defined tab in the ribbon. Examples of such commands are Undo, Save and Print. The toolbar is hosted inside the ribbon, which adjusts its space to host it appropriately.

The Quick Access Toolbar can either sit below the ribbon, in which case it reduces the amount of space left to the rest of your form, or inside the titlebar. Customization of the location of the toolbar is automatically provided through a ribbon context menu.


Ribbon Tabs and Chunks


A ribbon tab with all its chunks collapsed due to low screen space.

As mentioned before, within your ribbon are several tabs. Tabs are the main area within the ribbon and are divided into Chunks, which arrange and display your commands. This structure initially seems more complex than it is - when laid out on screen it is very logical.

The great benefit that chunks bring is the ability to collapse gracefully when screen space is tight. You will typically design each tab so that it contains chunks that roughly fill all the space available to users at a targetted screen resolution. However, there are always cases when the amount of space available is less than this, and when this happens chunks collapse and instead make all their commands available through a popup. This helps ensure that commands are never unavailable to your users.


The Status Bar

All controls generally available for the ribbon can also be used on the status bar. This includes buttons, hyperlinks and labels, and you may wish to include more interactive controls such as the Slider too. The status bar is generally found at the bottom of the form.

Controls on a status bar are either placed in the "main area" or the "extended area". The extended area is optional, but when used it presents your commands at the far side of the form, with a different background appearance to separate them visually.

Next: Features in Depth

Copyright © 2003 - 2009 Divelements Limited       About | Contact | Privacy