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.
| Control | Description |
|---|---|
| Border | Decorates a single child with a border and background. |
| Canvas | Displays child controls at specified positions. |
| Dock Panel | Arranges child controls along specified edges (top, bottom, left, right) with one filling any remaining space. |
| Expander | Has a header area (always visible) and a collapsible content section (single child). |
| Grid | Arranges child controls in the cells of a grid, positioned by row and column. The cells can span rows and columns. |
| Grid Splitter | Can be added to a grid to allow the user to resize rows or columns at runtime. |
| Panel | Allows multiple child controls, displayed in sequence. Layout calculated by child size and alignments (horizontal and vertical), relative to the panel itself. |
| Relative Panel | Allows 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 Viewer | Adds scroll bars and scrolling behaviour if the (single) child is larger than the space available. |
| Split View | Adds a collapsible pane to the edge of its (single child) content zone. |
| Stack Panel | Allows multiple child controls, arranged in sequence, horizontally or vertically. |
| Tab Control | The tab control allows you to sub-divide a view into tab items. |
| Uniform Grid | Allows multiple child controls, arranged in a grid with cells of uniform column and row size. |
| Wrap Panel | Arranges (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. |