Layout Features

Sizing

Size

The size of a UIBlock's body.

uiBlock.Size = new Vector3(300, 300, 0);
Value Size vs. Percent Size
LengthType Behavior
Value A fixed size, independent of a UIBlock's parent's size.
Percent A relative size, configured as a percentage of a UIBlock's parent's size. 
uiBlock.Size = Length3.FixedValue(250, 250, 0);
uiBlock.Size = Length3.Percentage(0.5f, 0.5f, 0);
Min/Max Size

Clamp size to a desired range.

uiBlock.SizeMinMax.X = new MinMax(min: 200, max: 300);

Lock Aspect Ratio

Lock the aspect ratio of a UIBlock size and adjust the value of all axes proportional to the controlling axis.

// Lock aspect ratio
uiBlock.AspectRatioAxis = Axis.X;

// Unlock aspect ratio
uiBlock.AspectRatioAxis = Axis.None;

Rotate Size

Tells the layout system to process a UIBlock based on the size of its rotated local bounds.

uiBlock.RotateSize = true;

Auto Size

Expand

Expand + Parent Auto Layout Disabled

Match the size of a UIBlock's parent's padded size, while accounting for the UIBlock's margin size.

uiBlock.AutoSize.X = AutoSize.Expand;
Expand + Parent Auto Layout Enabled

Fill the available space within a UIBlock's parent's padded size along the parent's Auto Layout axis, while accounting for the UIBlock's margin size.

// Configure parent
uiBlock.Parent.AutoLayout.Axis = Axis.X;

// Configure child
uiBlock.AutoSize.X = AutoSize.Expand;

Shrink

Shrink + Auto Layout Enabled

Match the total size of this UIBlock's children along the Auto Layout Axis.

uiBlock.AutoSize.XY = AutoSize.Shrink;
Shrink + Auto Layout Disabled

Match the maximum child UIBlock size along the given dimension.

Shrink + Text

Match the rendered text size along the given dimension.

Positioning

Position

The local position of a UIBlock, defined as an offset from its point of alignment.

uiBlock.Position = Length3.Zero;
Min/Max Position

Clamp position to a desired range.

// Clamp position between 0 and float.PositiveInfinity
uiBlock.PositionMinMax = MinMax3.Positive;

Alignment

// Set X, Y, and Z alignments
uiBlock.Alignment = Alignment.TopLeftCenter;

Horizontal Alignment

Axis Alignment
X
  • Left
  • Center
  • Right
 
uiBlock.Alignment.X = HorizontalAlignment.Left;

Vertical Alignment

Axis Alignment
Y
  • Top
  • Center
  • Bottom
 
uiBlock.Alignment.Y = VerticalAlignment.Top;

Depth Alignment

Axis Alignment
Z
  • Front
  • Center
  • Back
 
uiBlock.Alignment.Z = DepthAlignment.Center;
Value Position vs. Percent Position
LengthType Behavior
Value A fixed offset between a UIBlock's point of alignment, relative to its parent's matching point of alignment.
Percent A relative offset between a UIBlock's point of alignment, relative to its parent's matching point of alignment. Configured as a percentage of the UIBlock's parent's size. 
uiBlock.Position.X = Length.FixedValue(100);
uiBlock.Position.X = Length.Percentage(0.25f);

Auto Layout

Axis

Automatically position and align a UIBlock's children along a given axis.

// Set AutoLayout Axis
uiBlock.AutoLayout.Axis = Axis.Y;

// Disable AutoLayout
uiBlock.AutoLayout.Axis = Axis.None;

Spacing

The space inserted between child UIBlocks.

// Manual
uiBlock.AutoLayout.Spacing = 5;

// Auto
uiBlock.AutoLayout.AutoSpace = true;

Alignment

X Y Z
Alignment
  • Left
  • Center
  • Right
  • Top
  • Center
  • Bottom
  • Front
  • Center
  • Back
 
uiBlock.AutoLayout.Axis = Axis.Y;
uiBlock.AutoLayout.Alignment = (int) VerticalAlignment.Top;

Order

X Y Z
Default Left to Right Top to Bottom Front to Back
Reverse Right to Left Bottom to Top Back to Front 
// Reverse order
uiBlock.AutoLayout.ReverseOrder = true;

// Default order
uiBlock.AutoLayout.ReverseOrder = false;

Cross Layout

Position child UIBlocks along the cross axis before wrapping to primary Auto Layout axis.

// Enable Cross Layout
uiBlock.AutoLayout.Cross.Axis = Axis.X;

// Disable Cross Layout
uiBlock.AutoLayout.Cross.Axis = Axis.None;
Expand + Cross Layout

Create an adaptive layout by defining a minimum size for child UIBlocks along the cross axis and setting their Auto Size to Expand.

// Configure parent
uiBlock.Parent.AutoLayout.Axis = Axis.Y;
uiBlock.Parent.AutoLayout.Cross.Axis = Axis.X;

// Configure child
uiBlock.SizeMinMax.X.Min = 70;
uiBlock.AutoSize.X = AutoSize.Expand;

Expand to Grid

Makes the size of expanded child UIBlocks along the cross axis more uniform, so overflow elements on the last row or column aren't undesireably much larger than everything else.

Note

Priority is on uniformity, so there may be empty space along a given row or column.

uiBlock.AutoLayout.Cross.ExpandToGrid = true;

Padding & Margin

Padding

Space applied inward from the edges of a UIBlock.

uiBlock.Padding.Left = Length.FixedValue(50);
uiBlock.Padding.Top = Length.Percentage(0.1f);
Value Padding vs. Percent Padding
LengthType Behavior
Value A fixed amount of space between a UIBlock's body's edge and the edge of the bounds to which child UIBlocks may Auto Size or Align.
Percent A relative amount of space between a UIBlock's body's edge and the edge of the bounds to which child UIBlocks may Auto Size or Align, configured as a percentage of the UIBlock's size. 
// Set both Left and Right 
uiBlock.Padding.X = Length.FixedValue(50);

// Set both Top and Bottom
uiBlock.Padding.Y = Length.Percentage(0.1f);

Margin

Space applied outward from the edges of a UIBlock.

uiBlock.Margin.Right = Length.FixedValue(50);
uiBlock.Margin.Bottom = Length.Percentage(0.1f);
Value Margin vs. Percent Margin
LengthType Behavior
Value A fixed amount of space between a UIBlock's body's edge and the edge of its parent's bounds to which it may Auto Size or Align.
Percent A relative amount of space between a UIBlock's body's edge and the edge of its parent's bounds to which it may Auto Size or Align, configured as a percentage of the UIBlock's parent's size. 
// Set both Left and Right 
uiBlock.Margin.X = Length.FixedValue(50);
uiBlock.Margin.X = Length.Percentage(0.1f);