layout-system.md 2.5 KB
Layout system
Intermediate Programmer Designer
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 @'Xenko.UI.UIElement' in the Xenko UI system has a surrounding rectangle used in layouts. Xenko computes layouts according to the @'Xenko.UI.UIElement' requirement, available screen space, constraints, margins, padding, and the special behavior of @'Xenko.UI.Panels.Panel' elements (which arrange children in specific ways).
Processing this data recursively, the layout system computes a position and size for every @'Xenko.UI.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 @'Xenko.UI.UIElement.Width', @'Xenko.UI.UIElement.Height', and @'Xenko.UI.UIElement.Margin'.
Some @'Xenko.UI.Panels.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:
- @'Xenko.UI.UIElement.Margin'
- @'Xenko.UI.UIElement.Width'
- @'Xenko.UI.UIElement.Height'
- @'Xenko.UI.UIElement.HorizontalAlignment'
- @'Xenko.UI.UIElement.VerticalAlignment'
- @'Xenko.UI.Panels.Panel'
- specific Arrange rules