Designing Ribbon Views
Now we can start with the actual design of the ribbon. The Views tab of the Ribbon Designer lets you design the two types of views that the Ribbon Framework supports: Ribbons and Context Popups.
Working with the Designer
The designer consist of a tree view of all the controls and other design elements in the ribbon document. The hierarchy of this tree represents the hierarchy of the ribbon document somewhat. When we look at WordPad for example, we can see that the main ribbon consists of 3 tabs: Home, View and Print Preview (when applicable). Furthermore, the Home tab contains 5 groups: Clipboard, Font, Paragraph, Insert and Editing. Finally, each group has one or more controls. For example, the Clipboard group has 3 buttons: Paste, Copy and Cut. Some controls can have further subcontrols. For example, the Paste button has a drop-down menu with the 2 items Paste and Paste special. This hierarchy is shown in the screen shot above.
Whenever you select an element in the tree view, the right pane will show the properties of the selected item. Many elements will only have a couple of common properties, like the command associated with the control and the application modes to which the control applies. More specialized controls, such as the font control or color picker, will show additional properties.
The toolbar above the tree view lets you add and remove elements and reorder them:
The same commands are available through the right-click menu and some keyboard shortcuts (Ctrl+Del, Ctrl+Up and Ctrl+Down). When you click the Add button, or right-click on the tree view, a popup menu will show what kind of elements you can add to the selected element in the tree view. The list that appears depends on the selected element. For example, when you select a ribbon tab, you can only add groups:
But when you select a group, you can add all sorts of controls:
Common Properties
A lot of elements in the tree share some common properties:
- Command: the command associated with the element. This is one of the commands you specified earlier. Among other things, the command determines the caption to use for the element/control.
- Application Modes: the Ribbon Framework has a concept of application modes. Application modes allow you to make the availability of certain controls dependent on one or more modes. You can define up to 32 application modes, which are just numbered 0..31. WordPad defines 2 application modes: the Standard mode (0) and the Print Preview mode (1). In Print Preview mode, the Home and View tabs are hidden, and a different tab Print Preview is shown. To specify application modes for a control, lock the arrow button at the right of the edit control:
Then, you can select to which application modes the control applies:
Here you check all the application modes in which the control must be available. In the WordPad example, you will see that the Home and View tabs are only available in mode 0, while the Print Preview tab is only available in mode 1.
We will start with designing the main ribbon Tabs of the WordPad sample first.