...
A Toolbar is a container control that makes the most commonly used controls easily accessible. Toolbar typically contains controls that represent actions (e.g. buttons, menu buttons), options (e.g. choice buttons, toggle buttons), information (e.g. labels), or user inputs (e.g. text fields). For visual separation of controls, toolbar may contain separator or spacer control.
Figure 1 Toolbar on desktop, mobile and TV platform
3. Toolbar: Desktop
...
Figure 2 Toolbar placement on desktop platform
3.2 Desktop - Detailed Behaviors
...
Toolbar arranges controls in single or multiple rows (or columns) with defined spacing between controls. Controls can either have fixed or flexible width (height). Flexible width controls (e.g. text field, spacer) take up the whole available width of toolbar. If there are more flexible-width controls inside a toolbar, they evenly divide the available toolbar width while taking into account the minimum width of each flexible-width control. Thus a flexible-width control with larger minimum width should get more from the available toolbar width.
Figure 3 Toolbar layout
Figure 4 Multiple-row Toolbar layout
Figure 5 Vertical Toolbar layout
Shortened toolbar
...
Figure 6 Shortened toolbar with additional popup toolbar
Table 1 Toolbar popup button pointer gestures
...
Figure 7 Toolbar customization
Table 2 Pointer gestures on toolbar items
...
Figure 8 Toolbar popup accessed with keyboard
In customization mode, the user can rearrange items by copy-pasting. If an item is copied, it is marked with a special dotted line visual indication and the focus indicator moves in between items in the toolbar to allow pasting a copied toolbar control between existing toolbar controls. If the user pastes the copied toolbar item, the toolbar items rearrange. See figure below for an example. To cancel copying, the user needs to press the ESC key. The focus indicator then switches to a regular mode where it marks toolbar items instead of space in between
Figure 9 Toolbar customization with keyboard
Table 6 Toolbar keyboard support
...
Figure 10 Toolbar placement on Touch platform in portrait and landscape mode.
4.2 Touch - Detailed Behaviors
...
Overview
Content Tools
ThemeBuilder