Grid Layout

Basics

Grid is a container. It partitions the available space into cells and places the child widgets there. The partitioning configuration should be explicity set by creating Grid.Proportion objects, setting their properties and adding to either RowsProportions or ColumnsProportions property.

Every child Widget should also explicity specify which cell(s) it would occupy by setting properties GridPositionX, GridPositionY, GridSpanX and GridSpanY.

I.e. following MML describes simple 2x2 grid with 8 pixels spacing beetween rows and columns, and 3 child widgets:

<Project>
  <Grid ShowGridLines="True" ColumnSpacing="8" RowSpacing="8" >
    <ColumnsProportions>
      <Proportion/>
      <Proportion/>
    </ColumnsProportions>
    <RowsProportions>
      <Proportion/>
      <Proportion/>
    </RowsProportions>
    <TextButton Text="Button" />
    <TextButton Text="Long Button" GridColumn="1" />
    <TextButton Text="Very Long Button" GridRow="1" GridColumnSpan="2" />
  </Grid>
</Project>

It would result in following:

Proportion Types

Grid.Proportion class contains two properties: Type(enum) and Value(float). The Type could have following values:

Name	Description
Auto(default)	The column/row is sized automatically based on the widget with the biggest width/height
Pixels	The column/row has fixed size in pixels specified by the Value property
Part	The column/row size is calculated by following formula: size=(Value*availableSpace)/totalParts. Where availableSpace is space left after processing Auto and Pixels columns/rows. And totalParts is sum of all columns/rows' Value where Type is Part. totalParts could be explicity set by setting Grid.TotalColProportionPart/Grid.TotalRowProportionPart
Fill	The column/row takes all unused space

The following code demonstrates different proportion types:

var grid = new Grid()
{
	ColumnSpacing = 8,
	RowSpacing = 8,
	ShowGridLines = true
};

// First column uses default proportion type(Auto)
grid.ColumnsProportions.Add(new Grid.Proportion());

// Second column width is 200 pixels
grid.ColumnsProportions.Add(new Grid.Proportion(Grid.ProportionType.Pixels, 200));

// Third column will occupy rest of available space
grid.ColumnsProportions.Add(new Grid.Proportion(Grid.ProportionType.Fill));

// First row will take 1/3 of available height
grid.RowsProportions.Add(new Grid.Proportion(Grid.ProportionType.Part, 1.0f));

// Second row will take 2/3 of available height
grid.RowsProportions.Add(new Grid.Proportion(Grid.ProportionType.Part, 2.0f));

var button1 = new TextButton
{
	Text = "Label"
};
grid.Widgets.Add(button1);

var button2 = new TextButton
{
	Text = "Long label",
	GridPositionX = 1,
	Width = 150
};
grid.Widgets.Add(button2);

var button3 = new TextButton
{
	Text = "Very long label",
	GridPositionY = 1,
	GridSpanX = 2,
	HorizontalAlignment = HorizontalAlignment.Right,
	VerticalAlignment = VerticalAlignment.Bottom,
	Left = -10,
	Top = -10
};
grid.Widgets.Add(button3);

var button4 = new TextButton
{
	Text = "The longest label",
	GridPositionX = 2,
	GridPositionY = 1,
	HorizontalAlignment = HorizontalAlignment.Center,
	VerticalAlignment = VerticalAlignment.Center
};
grid.Widgets.Add(button4);

This code would render following:

UI Editor Support

Grid is fully supported in the UI Editor.

Following video demonstrates creation of options screen with 2x3 grid and corresponding controls: https://youtu.be/U7FA3-mXE_o