SandRibbon User Guide

Getting Started

Back to Table of Contents

Ribbon Elements

The intuitiveness of the Office 2007 user interface is ironically made possible by an arrangement of hierarchical controls and widgets that, although not complex, you need to be familiar with to get the most out of this library. Presented below is a diagram and table of the SandRibbon controls and components that come together to create a complete layout.

[diagram]

RibbonForm The base class from which your Form should derive.
Ribbon The top-level ribbon control. Full functionality from this is exposed only when placed on a RibbonForm.
RibbonTab A Ribbon control contains many RibbonTab controls, available either all the time or in certain editing contexts.
RibbonChunk A RibbonTab control is divided into many RibbonChunk instances that go on to host the buttons and other widgets that represent commands in your application.
StatusBar A StatusBar is normally included at the bottom of your form and contains one or two strips of items.

Drag and Drop

To get started with SandRibbon, first create a form that will be the form containing the Office 2007 user interface. Next, assuming you have added the SandRibbon components to your toolbox as detailed in the installer, find the RibbonManager component in your toolbox and double-click it. You will see the SandRibbon controls appear on your form.

At this point, you will probably wish to briefly switch to code view and change the form declaration so that it inherits from Divelements.SandRibbon.RibbonForm rather than from Form directly. This exposes the full ribbon functionality and will give your form a distinctive look and feel. Upon switching back to designer view, you will see your form instantly change to the new shape.

The designers for the ribbon components each have a great understanding of their associated components and are there to make designing a SandRibbon layout a breeze. You will notice that a default layout has been created with a ribbon, a ribbon tab, a ribbon chunk within that tab and a status bar. All these are coupled to the manager you created.

You can click on a the first tab created and change its Text property. In general within SandRibbon, a right-click on an item at design time presents a menu of items you can add to the item and other actions you can perform on it.

Learning Layouts

All layouts in SandRibbon are accomplished by making use of the StripLayout class and its derivatives. This is a widget that holds a collection of other widgets, and looks after laying them out in either a horizontal or vertical strip. This is one of the most important classes to know. Many elements, such as the top-level RibbonChunks seen in a RibbonTab, are derived from StripLayout and perform essentially the same function.

Whenever you see a StripLayout in design view, it will have a faint arrow in the background indicating the direction in which its children are laid out. The key to achieving different layouts is to nest your StripLayouts within each other.

For an example, let's take the Font chunk on the Home tab in the demonstration application. Remember that the chunk itself is a StripLayout. What we want is two horizontal strips of items, one above the other. To accomplish this we change the LayoutDirection property of the chunk itself to Vertical. You will notice the arrow change. Right-click the chunk and choose Add Strip Layout, then repeat this to add another. You will see the two new strips with their arrows pointing horizontally, positioned one above the other in our chunk.

Following the example above you will notice that our new strips have a faint dotted border, and are of a certain size even though they do not have any child items yet. This is enforced at design time to help you see where your layouts are when performing maintenance. You will see several places in SandRibbon that display extra information at design time to help you in this way.

The example is continued in the next section, where we will add some buttons.

Buttons

As you might guess, buttons are integral to the library and the various ways in which buttons can be displayed and used are important to know. Buttons are generally displayed either standalone or in a group. They are activated by the user with either the keyboard or the mouse and are mapped to functionality in your application.

To continue the example from the previous section, right-click one of your empty StripLayouts and choose Add Button Group. You will see a shiny new button appear. What actually happened is that a ButtonGroup component was added to your strip, and then a Button component added to the ButtonGroup.

This brings us to an important note regarding selection and manipulation of widgets on the design surface. Sometimes, and indeed in the case above, you will have a widget containing many other widgets, with very little or none of its own surface visible because its child items take up all the room. This is normal, and it is still easy to manipulate. You can click on a child item (e.g. a button) and one of the commands available in the PropertyGrid is called "Select Parent". Clicking it will select the parent widget, and the new selected widget's commands will be available in the PropertyGrid. So, to add further buttons to our ButtonGroup we can click on the original button, select its parent, then choose "Add Button" as many times as we need buttons.

Now that you have a group of blank buttons you will want to click on each one and set its properties in turn. Normally the Text and Image properties of buttons are used most of all. Further buttons or button groups can be added by selecting the strip we created first and choosing one of its Add commands. In this way, go through creating button groups in each strip and configure them using text and images so they appear how you want.

Every SandRibbon widget has an Activate event, and double-clicking a button will create an event handler in your code that will be run when the user activates the button.

Accessibility

Accessibility is very important and is often overlooked by application designers. Every SandRibbon item has a QuickAccessKey property that can contain a string of one or two characters that represent a keyboard short that can be used to access the item. If your item's text contains a mnemonic (a character preceded by an ampersand) that characted will be used as the quick access key unless another is specified.

When your application is run and the user presses the Alt key, SandRibbon goes into quick access mode. In this mode all your quick access keys are made available. First all the access keys for your ribbon tabs, the application button and anything on your quick access toolbar are shown. Assuming the quick access key for the Home tab is H, pressing H will take the focus into that tab, and all the quick access keys for the items within are displayed. Depending on whether items have one or two characters defined as their quick access keys, the subsequent key press or presses will then activate the desired command. Pressing escape exits the quick access mode.

As an alternative to using the quick access keys the user is free to use tab and shift-tab to move the focus around the ribbon. After pressing Alt, press tab a few times to see this in effect. Simply tab to the item you are interested in and press Enter to activate it. Your application does not need to do anything special; simply handling the Activate event for the item, as you will already be doing, is sufficient.

Next: Taking Control