Layout

Quill uses a traditional box model for arranging views. Layout has two phases, measure and arrangement. Both phases traverse the view tree top to bottom in a single pass. The measure phase happens first, collecting size constraints accumulatively as it traverses children views. Once all measurements have be calculated the arrangement phase positions views to be ready for rendering and the event system.

Arranging Children

By default all direct children of a view are laid out matching their parent and overlapping each other. The further down the view tree the higher the draw order (so the last child will draw on top of the previous.)

Using the Children Arrange property you can make a parent divide up its available space and layout each child vertically, horizontally, or wrapping.

Min & Max

Min/Max Width and Height take precedence over properties like Match Text Height and Maintain Image Aspect Ratio.

A view will never measure larger than its max or smaller than its min. This means that children can measure smaller or larger than their parent. In which case Align X and Align Y are used to control where in its parent a view lays out.

When there is extra space to layout children (for vertical and horizontal arrangements) each child is first allocated their minimum requirement, then are given the remaining space equally up to their maximum.

View Anchoring

When using view anchor properties the view will move its position to the referenced view. Anchoring a view does not remove it from its parent's layout. The parent and sibling views won't change behavior or layout in any way.

View anchoring is often used for positioning scenes.

Scaling

To accommodate high density displays, or adding a global UI scaling option to your program, uiink allows setting a scale factor. The runtime scales all images and dimensions (with the exception of Real Pixel Values) by the given scale factor.

Fonts and vector graphics are properly re-rasterized for changes in scaling. For bitmap data you can specify variants to use instead of the original asset.

Draw Order

Draw order has the following priority:

  1. Layer. (larger values are rendered on top)
  2. Scene order.
  3. Position in view tree. (Views are drawn above their parents and previous siblings.)

Icon Font Quirks

Icon font images do not have an intrinsic size like traditional bitmap images. This results in Match Image Width and Match Image Height properties not behaving as you might expect. Match Image Width is ignored and Match Image Height is inferred from the rendered width.