Sizing & Scaling
We will finish the Ribbon Design section of this tutorial with the sizing and scaling rules you can specify for the ribbon. Specifying proper sizing and scaling policies for the ribbon can be the most tricky part of the design process, but it pays off with a better user experience.
Size Definitions and Scaling Policies determine how the ribbon behaves when the user decreases the width of the ribbon. You specify these settings at the Group level (remember that a group is a set of controls on the ribbon). Each group can be displayed in 4 different "sizes":
 |
 |
 |
 |
| Large | Medium | Small | Popup |
Each tab has a scaling policy, which determines the size at which each group is displayed.
Scaling Policies
If you don't specify a scaling policy for a tab, each group will be displayed in the largest layout possible. If the groups will not fit on the ribbon, scroll buttons will appear:
You will want to avoid this behavior. If there is plenty of space available on the ribbon, you will want to show each group in a preferred or Ideal Size. In WordPad, the Ideal Sizes look like this:
The Clipboard and Editing groups have an ideal size of Medium, while the other groups have an ideal size of Large. You can specify the ideal sizes with the Ribbon Designer using the "Scaling Policy | Ideal Sizes" node:
For each group in the tab, you should add a Scale node, set the Command property to the command you assigned to the group, and set the Size property to the ideal size.
When the user start decreasing the width of the form, you will want to decrease the sizes of each group in such a way that the most important groups stay visible as long as possible. You can specify which groups should reduce in size first and in what order. Eventually, if the user keeps reducing the size, all groups should end up in Popup mode. WordPad defines 8 scaling stages:
The first stage is no scaling at all. It uses the Ideal Sizes if there is enough room available. Next, the Clipboard group will go to Small size, followed by the Insert group switching to Popup size. Then, some other groups will go to Popup size, followed by the Font group going to Medium size and finally to Popup size. At this point, all groups will have reached Popup size. If the user would reduce the size even further, the entire ribbon will disappear.
You can specify this behavior in the tree view by adding nodes to the Scaling Policy node:
The Scaling Policy nodes are evaluated from top to bottom. Again, for each node you specify the Command property for the group and the Size you want to group to switch to.
The appearance of the Large, Medium and Small sizes depends on the Size Definition for the group.
Size Definitions
We now know how the Ribbon Framework will scale groups from Large to Medium to Small sizes. But what does Large, Medium and Small mean? This depends on the Size Definition you specify for a group. Each group must have a size definition which determines the layout of the controls in the group in Large, Medium and Small mode. You can set the size definition by selecting the Group node in the tree view and changing the Size Definition property:
The Windows Ribbon Framework comes with a selection of predefined size definitions. Looking at the Home tab in the above examples again, we set the Size Definition for each Group as follows:
- Clipboard: "3 Buttons, 1 Big and 2 Small". This size definition requires that you add 3 buttons to the group (the buttons Paste, Cut and Copy in this example). In Large mode, all these buttons will be displayed as large buttons. In Medium mode, the first button (Paste) will be displayed large, while the other two buttons will be displayed small with captions. Finally, in Small mode, the first button will also be displayed large, but the other two buttons will be displayed small without captions.
- Font: "1 Font Control". This size definition requires that you add a single Font Control to the group. The size definition only supports Large and Medium layouts.
- Paragraph: "Custom". The Paragraph group uses a custom size definition. We will get to that shortly.
- Insert: "4 Buttons". This size definitions requires 4 buttons in the group. On Large mode, all buttons will be displayed as large buttons. In Medium mode, the first button (Picture in this example) will be displayed large and the other 3 will be displayed small with captions. Small mode behaves the same, but does not display captions for the 3 small buttons.
- Editing: "3 Buttons". Again, this size definition requires 3 buttons in the group. It only supports Large and Medium modes.In Large mode, all buttons are displayed as large buttons. In Medium mode, all buttons are displayed as small buttons with captions.
There are many other predefined size definitions. Some of them also support optional controls (instead of the required controls in the examples above). You will find detailed information about these size definitions in the MSDN Documentation.
Custom Size Definitions
If the predefined size definitions don't fit your needs, or you want more control over the control layout within a group, then you need to define Custom Size Definitions. In WordPad, the Paragraph group uses a custom size definition:
The group displays 2 rows, containing 8 controls total, grouped into 5 groups:
- First row:
- A group with Decrease Indent and Increase Indent buttons.
- A group with a single List Style split button. Although this group contains only a single control, we still put it inside a group so that it will be rendered with a border around the button. (Buttons that are not part of a group will display without a border, as you can see in the other screenshots on this page).
- A group with a single Line Spacing drop-down button.
- Second row:
- A group with 4 Paragraph Alignment buttons.
- A group with a single Paragraph Dialog button.
There are two ways to create a Custom Size Definition. The first way is to define it at the Ribbon level (under the "Ribbon | Size Definitions" node in the tree view. With this method, you can reuse the same size definition for multiple groups. The second way is to define the size definition directly at the group level. In that case, the size definition will only apply to that group.
Ribbon-Level Custom Size Definitions
For the Paragraph group example, we will create the size definition at the Ribbon level (even though we will not reuse it). The tree for this size definition for Large mode looks like this:
When you add a Size Definition you have to give it a name (ParagraphLayout in this example) and you need to supply a list of (arbitrary) control names for each control in the definition. Since there are 8 controls in this definition, you need to supply 8 names (I used names like ButtonOutdent, ButtonIndent etc. in this example, but you can use any name you want). These names are only used later to put the control in the layout. They have no other meaning.
Next, you need to add between 1 and 3 size definition groups to the size definition. Each group represents the definition for one of the three supported layout sizes (Large, Medium and Small). Then, for each group you specify the layout in that mode by adding Rows, Control Groups, Controls and Column Breaks. You can see in the tree above that this structure mimics the layout of the Paragraph group (2 rows, each with some groups and controls).
With the Custom Size Definition defined, we can now create the Paragraph group on the Home tab:
We need to add 8 controls to the Paragraph group (but we don't have to group them here). Then, we set the Size Definition property to "Custom" and set the Custom Size Definition property to the one we just created (ParagraphLayout). This will automatically group these 8 controls in to 5 groups covering 2 rows.
Group-Level Custom Size Definitions
We also need to create a Custom Size Definition for the Show or hide group on the View tab:
This is a simple group with just 2 controls. We will create the size definition directly at the group level. To do this select the Show or hide group and set the Size Definition property to "Advanced". This will make the "Size Definition" node appear below the group:
We don't need to specify a name for this size definition, since we cannot reuse it later. The size definition itself is very simple; it contains just two controls (no Rows or Control Groups).
Next
With this topic about Sizing and Scaling we have completed the Ribbon Design part of this tutorial. You now know everything you need to know to design simple and complicated ribbons. We finish this section with some tips:
Tip: design your ribbon in small steps, using a couple commands or a single group at a time. After each step, Build (Ctrl+F9) or Preview (F9) the ribbon to check for compiler errors and inspect the results. When you work in small steps at a time, it is much easier to trace potential compiler errors to their source.
Tip: Also, don't forget to resize the preview window when previewing the ribbon. This will show you how your Scaling Policies and Size Definitions work in practice.
Now we are ready to integrate the Ribbon into our Delphi project and start programming!