SandRibbon is a user interface suite designed to mimic the advanced controls seen in Microsoft Office 2007. Its features revolve around a Ribbon control, which presents a well-organised list of available commands, divided into logical groups with some groups displayed contextually. It is designed to plug in to your applications and serve as a replacement for the traditional menus and toolbars paradigm.
All major features of the Office 2007 user interface are made available through this library, and SandRibbon provides many classes to make common tasks easier for document-oriented applications, as well as the user interface controls themselves. In this way it enables you to take advantage of such features as enhanced screentips, recently-used documents lists, rich popups, galleries, live preview, animations and many more. A lot of functionality, such as comprehensive keyboard access and true right-to-left reading order support, is enabled by default for all applications, requiring no extra work.
Along with the top-level controls in the suite, there is a manager component that helps tie your interface together for consistency and ease of development. SandRibbon also provides the RibbonForm class so you can choose to have your applications adopt the new custom shaped windows.
Divelements created an advanced lightweight windowless control library for SandRibbon that sits behind the scenes enabling the smooth animations and transitions that can be seen in the product. This library can be taken advantage of by developers wishing to extend the library with their own custom widgets. It's easy to create a custom control that can be added to any SandRibbon element. Included in the package are blue, silver and black color schemes, and you can easily create your own color schemes or choose to completely redefine how the built-in controls are drawn.
The popup capabilities of the product extend far beyond those of previous menuing controls. Any type of widget, including scrollable galleries, color pickers with graduations, sliders and of course menus can be placed on a popup. SandRibbon supports 'Live Preview' by exposing events that enable your application to show a preview of a menu command before the user activates it.
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
Your form is of course always the top-level object. Divelements mentions 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 Divelements provides the RibbonForm class, which you can make your form inherit from instead of the plain Form class.
The Ribbon component is fully usable on a regular form but elements normally displayed in the titlebar area, such as contextual tab hints and the application button, will be unavailable.
The Ribbon
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 of 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.
The Quick Access Toolbar
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 of your form. You may wish to present this choice to your user for their own customization.
Ribbon Tabs and Chunks
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.
Features in Depth
Application Button
The application button is a name for the Office button in Office. It is a large, round button at the top of the window that presents a dropdown containing functionality previously found in the File menu. The application button typically shows the application icon.
Quick Access Toolbar
Most applications will feature a quick access toolbar alongside the ribbon, which can be placed below or above the ribbon itself. This toolbar can contain the same types of items as the ribbon, and typically presents commands that should be available no matter which ribbon tab is open, like Save and Undo.
Contextual Tabs
Of all the ribbon tabs you have configured for your application, you may want some groups of tabs to only be visible in certain modes. For example, a tab dealing with picture editing should only be visible when a picture is selected.
In SandRibbon, you configure a number of Editing Contexts on the ribbon, then simply associate any number of tabs with an editing context. Those tabs will no longer be visible unless that editing context is active. Setting the active editing context is one method call. Contextual tabs are displayed slightly differently and the color of their editing context is used to differentiate them.
Windowless Control Library
Most of the SandRibbon user interface is run by a proprietary windowless control library Divelements developed especially for the product, that has all the features necessary to power an advanced UI without taking too many system resources. It supports animations, popups and many other tools that will make your SandRibbon experience more rewarding.
Animations
As mentioned previously, Divelements built supports for transitions into the product from the ground up. This made it easy for us to provide the hover and push animations you see while exploring a SandRibbon user interface with the mouse. Animations are used in other places too, like providing smooth scrolling effects in Galleries.
Buttons
Of course, at the core of the ribbon are the buttons that are eventually presented to the user. Buttons can be activated with the keyboard or with the mouse. They come in all shapes and sizes, adjusting to best fit the image and text that have been assigned to them. Buttons are either displayed standalone or in a group.
When a popup is associated with a button it gains a dropdown arrow next to it. The dropdown can be either integral, i.e. clicking anywhere on the button opens it, or separate, i.e. clicking on the button activates the button and clicking on the dropdown shows the popup.
Just like in Office, the dropdown indicator for a vertical button can actually be integrated right into the text, to save space. Small features like this allow better overall presentation of your user interface.
Layout
Of the items that comprise a ribbon layout, there are the interactive items (like buttons) and the items that are designed to contain other items (layouts). Layouts are essential for achieving a good presentation of your commands and are very easy to work with.
StripLayouts align all their items in a horizontal or vertical strip. Properties such as the item justification and spacing, combined with nesting StripLayouts are all you need 99% of the time to configure any ribbon layout.
FlowLayouts lay their items out horizontally, but wrap to the next line whenever the end of horizontal space is encountered. They are used pretty much exclusively by galleries.
Automatic Collapsing of Ribbon Chunks
As screen space diminishes there may not be enough room in any given ribbon tab for all the chunks you have configured. When this happens, SandRibbon will start collapsing them down to a chevron, which just displays their name and image. When the chevron is clicked the entire chunk is shown as a popup, allowing normal selection to take place.
The order in which chunks are selected to be collapsed depends on their Importance property - a simple numeric field that ensures the chunks with the lowest importance are hidden first when space becomes tight.
Right-to-left Support
When writing software it is absolutely essential that it fully supports right-to-left reading order for those locales and languages that demand it (such as Arabic). When using SandRibbon you do not have to worry about this, as Divelements wrote the product from the ground up to natively understand it. You can test this by changing the RightToLeft property on your form - your entire SandRibbon layout will be mirrored as all the strips and buttons reverse their direction.
Extensibility
One of the benefits that comes with the windowless rendering framework Divelements developed is that any element, whether a button or a popup or a layout strip, can be inherited from and its behavior changed. It receives its own mouse, painting, measuring and layout messages that can be extended by the developer.
As well as customization of existing controls this means that entire new widgets can be developed for specific uses in your application. Special purpose control, like the ColorPicker or Slider packaged with the library can be written to seamlessly integrate with your ribbon layout.
Sliders
The slider control is usually situated in the status bar. Like the standard Windows Forms slider and scrollbar controls it has Minimum and Maximum properties, and a thumb that can be slid between them. Glassy plus and minus buttons allow step-by-step changing of the value. In Office and the SandRibbon demonstration application this is used to zoom the document text.
Popup Controls
Popups can be associated with a parent, i.e. a dropdown button or a menu item, or they can be completely standalone such as a context menu that is associated with a normal control on your form.
The popups available in SandRibbon go far beyond what was previously available in terms of flexibility. The same type of control that is used elsewhere in the product is also used on popups, meaning that they need not be considered differently to a menubar or toolbar or statusbar in terms of what they contain. This also makes their API identical to the rest of the suite.
Galleries
The Gallery control offers a scrollable window on to another control or controls. This allows an interface where a group of buttons or other choices is displayed as a scrollable list. This can be placed on a ribbon directly or more commonly within a popup. When placed in a ribbon you can choose to associate a further popup with the gallery.
You will normally couple a Gallery with GalleryButton controls. These are buttons that generate an event when they need to be painted. For example you might want a gallery to display all the different types of Underline styles that are available. You would simply fill a Gallery with as many GalleryButtons as needed and respond to their events to draw a preview of each option.
Live Preview
Live preview refers to the ability for your application to show a preview of what would happen to the user's selection if they clicked an item, as they hover over it. SandRibbon makes this possible by exposing an event and passing the current selection to it. Your application can then make use of this information if it needs to.
Coupled with the event is a useful base class which you can utilize in your application to make the process of showing a preview much easier. SandRibbon automatically calls the Revert method on your class when the preview should be cancelled.
Resizable Popups
Some popups will contain scrollable galleries, and in this case it is natural that the user may want to resize the popup if they have a lot of screen space, so they can see all the options at once. SandRibbons allows you to designate a gallery as the resizable gallery within a popup. Once a gallery is designated the popup shows a resize bar that the user can drag.
Menus in Popups
With the advent of all the new widgets available in ribbon layouts it is sometimes easy to forget that the menu control is still the backbone of all popups. In the Office 2007 user interface menus are still used extensively, the only difference being that they are often mixed with other controls in a popup, and multiple menus in one popup is not uncommon.
Since a menu is just another type of control, they can be laid out in a strip with (for example) galleries and headings around them. Of course, a popup with a single menu control is perfectly possible and you will probably use this configuration a lot in your SandRibbon applications.
Color Pickers
The color picker is a control usually displayed in popups. It is a self-contained control that has a collection of Colors which you, the developer, add to it. These colors are shown in a horizontal strip, optionally with a heading. You can also specify that a number of color graduations are shown, in which case light and dark variations of each color are also made available for selection. These are all presented in an intuitive fashion and the control is very easy to configure.
Color Schemes
SandRibbon ships with the same three color schemes as Office 2007: Blue, Silver and Black. They are all very attractive presentations and you can choose any one for your application. You can also allow your users to make the choice. Blue is the default.
RibbonForm
By choosing to inherit from RibbonForm instead of Form, your windows will adopt the custom shape seen in Office 2007. This will give them different characteristics such as more rounded corners and themed window frames, but more importantly will allow the ribbon to display its elements in the titlebar area.
When your ribbon control is on a RibbonForm this will unlock the ability to show the application button, graphical hints to the position of contextual tabs and the quick access toolbar. When your ribbon control is not used in conjunction with a RibbonForm the quick access toolbar must be shown below it.
Color Tables
A color scheme is analogous to a color table. Each color scheme maps to a color table, which is a class that contains the many color properties that define how all SandRibbon elements are drawn. Although there are three color table implementations packaged with the suite, is it easy to customize them with your own colors.
For example, you may wish your designers to come up with a distinct color for your application. Or you might choose to take your colors from the traditional system color table to ensure they are in keeping with the user's color preferences.
Renderers
Most of the drawing done by SandRibbon to present your forms and layouts goes through the many methods of the RibbonRenderer class. If you wish to customize the way elements are drawn beyond mere color changes (for which you would use color tables) you can inherit from and override members of this class to perform your own drawing.
The possibilities with this level of customization are endless.
Comments