Skip to main content
Version: 11.0.x

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.


To review the concepts behind UI Composition, see here.

BorderDecorates a single child with a border and background.
CanvasDisplays child controls at specified positions.
DockPanelArranges 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.
GridSplitterCan 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.
RelativePanelAllows 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.
ScrollViewerAdds scroll bars and scrolling behaviour if the (single) child is larger than the space available.
SplitViewAdds a collapsible pane to the edge of its (single child) content zone.
StackPanelAllows multiple child controls, arranged in sequence, horizontally or vertically.
TabControlThe tab control allows you to sub-divide a view into tab items.
UniformGridAllows multiple child controls, arranged in a grid with cells of uniform column and row size.
WrapPanelArranges (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.