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.
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
- Large versions of the button with 32x32 pixel icons at 96 dpi and text label.
- Small versions of the button with 16x16 pixel icons at 96 dpi and text label.
- Small versions of the button with 16x16 pixel icons at 96 dpi and no text label.
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.
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.
Every control in Elegant Ribbon is derived from the
Elegant.Ui.Control base class that has the
Informativeness property of
public abstract class ControlInformativeness
public Enum Level
public Enum MinimumLevel
public Enum MaximumLevel
public Enum Levels
public virtual List ExcludedLevels
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:
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:
public string GetLayoutGroupName(System.Windows.Forms.Control control)
public void SetLayoutGroupName(System.Windows.Forms.Control control, string value)
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.