Layout

Every view has one root layout, and layouts hold the controls and other layouts. There are three kinds:

Layout	What it does
`StackLayout`	Lines its children up in a row or a column.
`DockLayout`	Docks each child to an edge, and gives the rest to the last child.
`GridLayout`	Places each child in a cell of a fixed grid.

A layout can hold another layout: a stack can hold a grid, and a grid cell can hold a stack. Every control also has a Margin, which is the space its parent reserves around it.

Sizes, margins and padding

A size is written as {width,height} in pixels. The braces are required. A size written without them, such as Size="240,30", is not read, and the control gets no size. A single number in braces is a square, so {40} is 40 by 40.

A position is written the same way, as {x,y}.

Margins and padding take four values, {left,top,right,bottom}, or one number for all four sides. A padding of 12 is the same as {12,12,12,12}. A value with two or three numbers is not read, and comes out as zero.

Attribute	Where	What it does
`Margin`	Any control or layout	The space its parent reserves around it.
`Padding`	Layouts and `Repeater`	The space inside the edge, around the children.

A layout with a Size is that size. A stack or a dock without a Size sizes itself to its children, and a grid without one takes its cells' sizes (see below).

Which controls need a Size is listed in Controls.

Stack layouts

A StackLayout stacks its children vertically by default:

<View>
  <StackLayout Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center"
               VerticalSpacing="12" Padding="16">
    <Label Id="title" Size="{240,32}" Text="Settings" FontSize="28" Alignment="Center" />
    <Button Id="ok" Size="{240,40}" Text="OK" Command="OkCommand" />
  </StackLayout>
</View>

Attribute	Default	What it does
`Orientation`	`Vertical`	`Vertical` stacks down; `Horizontal` stacks across.
`HorizontalAlignment`	`Left`	Where the children sit across the stack: `Left`, `Center` or `Right`.
`VerticalAlignment`	`Top`	Where the children sit down the stack: `Top`, `Center` or `Bottom`.
`HorizontalSpacing`	`0`	The gap between children in a horizontal stack.
`VerticalSpacing`	`0`	The gap between children in a vertical stack.

Dock layouts

A DockLayout docks each child to an edge of the space that is still free. Children are placed in order. The Dock attribute is set on the child:

`Dock` value	Where the child goes
`Left`, `Top`, `Right`, `Bottom`	Against that edge.
`Fill`	The rest of the space.
`Overlay`	The whole space, drawn over the other children. It reserves none of it.
`None`	The same as `Fill`.

By default the last child fills what is left (LastChildFill), unless it is an Overlay. Set LastChildFill="false" on the layout to turn that off.

<View>
  <DockLayout Size="{640,480}" Padding="16">
    <Label Id="header" Dock="Top" Size="{608,40}" Text="Inventory" FontSize="28" />
    <Button Id="close" Dock="Bottom" Size="{160,40}" Text="Close" Command="CloseCommand" />
    <StackLayout Id="body" Dock="Fill" Orientation="Vertical" VerticalSpacing="8">
      <Label Size="{300,24}" Text="Gold: 0" />
    </StackLayout>
  </DockLayout>
</View>

A dock layout without a Size sizes itself to its children on both axes.

Grid layouts

A GridLayout divides its Size into Rows and Columns. Each child goes in a Cell with a Row and a Column, counting from zero. A cell can span several rows or columns with RowSpan and ColumnSpan, which both default to 1. A cell outside the grid's Rows and Columns stops the view from being built.

<View>
  <GridLayout Rows="2" Columns="2" Size="{400,200}" RowSpacing="8" ColumnSpacing="8">
    <Cells>
      <Cell Row="0" Column="0" ColumnSpan="2">
        <Label Size="{392,40}" Text="Choose a class" />
      </Cell>
      <Cell Row="1" Column="0">
        <Button Id="warrior" Size="{192,40}" Text="Warrior" Command="PickWarriorCommand" />
      </Cell>
      <Cell Row="1" Column="1">
        <Button Id="mage" Size="{192,40}" Text="Mage" Command="PickMageCommand" />
      </Cell>
    </Cells>
  </GridLayout>
</View>

Attribute	Default	What it does
`Rows`, `Columns`	`1`	The number of rows and columns.
`RowSpacing`, `ColumnSpacing`	`0`	The gap between rows, and between columns.
`CellSpacing`	`0`	Sets both gaps at once. `RowSpacing` or `ColumnSpacing`, when given, wins for its direction.
`HorizontalAlignment`	`Center`	Where a child sits in its cell, across: `Left`, `Center` or `Right`.
`VerticalAlignment`	`Top`	Where a child sits in its cell, down: `Top`, `Center` or `Bottom`.

Each cell is the grid's Size divided by its number of columns and rows. Without a Size, each cell is 100 by 100 pixels. A child is not stretched to fill its cell: it keeps its own size and is placed in the cell by the grid's alignment. A child larger than its cell is drawn past the cell's edge, and a warning is logged.

Fills, borders and shadows

Every layout can be drawn as a box behind its children:

Attribute	What it does
`FillColor`, `FillGradient`	A flat fill, or a gradient in its place, behind the children.
`BorderColor`, `BorderThickness`	A border drawn inside the layout's bounds. The thickness defaults to 1.
`ShadowColor`, `ShadowOffset`, `ShadowBlur`, `ShadowSpread`	A soft shadow. Nothing is drawn without `ShadowColor`.
`Background`	A texture behind the children, filling the layout. Given as a child element, as for a control's texture.
`BackgroundColor`	A tint for the `Background` texture.

The shadow attributes are the same as a control state's, described in Styles and themes.

Hidden controls

A control with Visible="false" is not drawn. In a stack or a dock layout it also takes no space, so the controls after it move up. In a grid it keeps its cell.

Visible can be bound to a view-model property, so a section can appear and disappear as the game changes. See Bindings and commands.

UI scale

IViewManager.UIScale makes the whole UI larger or smaller:

viewManager.UIScale = 1.25f;

The scale multiplies every size, margin, padding, spacing, border thickness and font size that a view declares. It is also multiplied by the display's pixel density. The value is clamped to 0.5 to 4. Setting it rebuilds the views on screen, so each view is built at the scale that is current when it is built.

Panels

A panel is a view shown over the game with ShowPanel, rather than in place of the current view. It is built like any other view. See Navigation and panels.

Table of Contents