Introduction
One of the major features of the Ribbon UI is that the layout and size of controls in the ribbon automatically changes when the width of the application window changes and the controls are displayed in such a way that they are most possible informative at a particular width. For example, when the width of the application window is decreased, a button gets less informative to fit the available space: its size gets smaller, big icon is replaced with a smaller one, and text label hides. Elegant Ribbon allows you to adjust the layout behavior by making some controls more informative than the others. For example, you can make some controls having a persistently small or large size.
In the Ribbon UI, related controls are organized into tab groups. Elegant Ribbon allows you to customize the layout behavior of one or more groups of controls inside a group by putting them into layout groups so that these grouped controls can change their size and other layout-related properties simultaneously when the width of the application window changes.
These adjustment capabilities of Elegant Ribbon enable you to deliver the best user interface possible that can be achieved with the new paradigm of Ribbon UI.
Control Informativeness
In Elegant Ribbon, each control that can change its size and appearance when its parent window's size changes has an Informativeness property, which is a CLR class that exposes several properties and methods relating to the control size and its visual representation.
The most important property of Informativeness is its level (info level), which can take one of the pre-defined values. The number of such pre-defined values depends on the type of control. For example, there are three info levels defined for the Button:
- LargeImageWithText
- Large versions of the button with 32x32 pixel icons at 96 dpi and text label.
- SmallImageWithText
- Small versions of the button with 16x16 pixel icons at 96 dpi and text label.
- SmallImage
- Small versions of the button with 16x16 pixel icons at 96 dpi and no text label.
The Informativeness also has three secondary properties that can help you adjust the adaptive layout: MaximumLevel, MinimumLevel, and ExcludedLevels. Using these properties you can impose restrictions on info levels for a particular control. For example, if you set the maximum level for some button to Small Image, the button will remain small and with no text label regardless of the width of the application window.
Layout Groups
At certain values of the width of the application window, each control can change its info level and, by default, controls change their info levels asynchronously. You can make two or more controls change their levels synchronously by setting the same value in their LayoutGroupName property. This allows you to put related controls into layout groups and all controls in such a group always change their info levels simultaneously.
API Overview
Every control in Elegant Ribbon is derived from the Elegant.Ui.Control base class that has the Informativeness property of ControlInformativeness type:
[C#]
public abstract class ControlInformativeness
{
public Enum Level
{
get;
set;
}
public Enum MinimumLevel
{
get;
set;
}
public Enum MaximumLevel
{
get;
set;
}
public Enum[] Levels
{
get;
}
public virtual List ExcludedLevels
{
get;
}
}
Please note that info levels are represented using CLR enums. This means that, for every particular type of control, there is its own enumeration of informativeness levels defined. For example, for the Button the following enumeration is defined:
[C#]
public enum RibbonGroupButtonInformativenessLevel
{
SmallImage = 0,
SmallImageWithText = 50,
LargeImageWithText = 100
}
The API for layout groups is implemented using IExtenderProvider. You can put controls into layout groups using the following methods:
[C#]
public string GetLayoutGroupName(System.Windows.Forms.Control control)
public void SetLayoutGroupName(System.Windows.Forms.Control control, string value)
Short Tutorial
This tutorial illustrates how to adjust the adaptive layout using Windows Forms Designer.
- Open Visual Studio and create a new Windows Forms project.
- On the form, create a new ribbon, several tabs, groups, and controls.
- Select a control in a group and open the Properties pane.
- Find the Informativeness property and expand it. Try editing its properties.
- Repeat the previous step for different controls and groups and see the results by resizing the application window horizontally.
- Select several controls in a tab group and open the Properties pane.
- Set LayoutGroupName property to some string value (e.g., "Group 1"). See the results.
|