Skip to main content
Version: 11.0.0

Layout Controls

Layout controls allow you to use UI Composition to arrange your UI in a variety of ways. Some allow just one child control, while others can have multiple child controls and follow specific rules for arranging them.

info

To review the concepts behind UI Composition, see here.

ControlDescription
BorderDecorates a single child with a border and background.
CanvasDisplays child controls at specified positions.
Dock PanelArranges child controls along specified edges (top, bottom, left, right) with one filling any remaining space.
ExpanderHas a header area (always visible) and a collapsible content section (single child).
GridArranges child controls in the cells of a grid, positioned by row and column. The cells can span rows and columns.
Grid SplitterCan be added to a grid to allow the user to resize rows or columns at runtime.
PanelAllows multiple child controls, displayed in sequence. Layout calculated by child size and alignments (horizontal and vertical), relative to the panel itself.
Relative PanelAllows multiple child controls. The position and alignment of the child controls can be specified in relation to the panel itself, or in relation to other child controls. The size of child controls can be specified, or calculated from relations and alignments.
Scroll Bar
Scroll ViewerAdds scroll bars and scrolling behaviour if the (single) child is larger than the space available.
Split ViewAdds a collapsible pane to the edge of its (single child) content zone.
Stack PanelAllows multiple child controls, arranged in sequence, horizontally or vertically.
Tab ControlThe tab control allows you to sub-divide a view into tab items.
Uniform GridAllows multiple child controls, arranged in a grid with cells of uniform column and row size.
Wrap PanelArranges (multiple) child controls in sequence from left to right, while they fit in the width. Starts a new line when there is no space left.