Layout system

IntermediateProgrammerDesigner

The Xenko UI layout system is similar to Windows Presentation Foundation (WPF). For more information about the WPF layout system, see the MSDN documentation. Much of the WPF documentation also applies to the Xenko layout system.

Every UIElement in the Xenko UI system has a surrounding rectangle used in layouts. Xenko computes layouts according to the UIElement requirement, available screen space, constraints, margins, padding, and the special behavior of Panel elements (which arrange children in specific ways).

Processing this data recursively, the layout system computes a position and size for every UIElement in the UI system.

Measure and arrange

Xenko performs the layout process recursively in two passes: Measure and Arrange.

Measure

In the Measure pass, each element recursively computes its DesiredSize according to the properties you set, such as Width, Height, and Margin.

Some Panel elements call Measure recursively to determine the DesiredSize of their children, and act accordingly.

Arrange

The Arrange pass arranges the elements, taking into account:

• Margin
• Width
• Height
• HorizontalAlignment
• VerticalAlignment
• Panel
• specific Arrange rules

See also

• MSDN WPF layout documentation
• UI pages
• UI libraries
• UI editor
• Add a UI to a scene