StackLayout

The StackLayout places controls one after another, either top to bottom or left to right. It’s the simplest layout, and handy for lists of controls or rows of buttons.

C#
Content = new StackLayout
{
    Padding = 10, // space around the edge
    Spacing = 5,  // space between each item
    Items =
    {
        "Enter your name:", // strings become labels
        new TextBox(),
        new Button { Text = "OK" }
    }
};

XAML
<StackLayout Padding="10" Spacing="5">
  <Label>Enter your name:</Label>
  <TextBox />
  <Button Text="OK" />
</StackLayout>

JSON
"Content": {
  "$type": "StackLayout",
  "Padding": "10",
  "Spacing": "5",
  "Items": [
    "Enter your name:",
    { "$type": "TextBox" },
    { "$type": "Button", "Text": "OK" }
  ]
}

F#
let layout = new StackLayout(Padding = 10, Spacing = 5)
layout.Items.Add("Enter your name:") // strings become labels
layout.Items.Add(StackLayoutItem(new TextBox()))
layout.Items.Add(StackLayoutItem(new Button(Text = "OK")))
this.Content <- layout

Python
label = forms.Label()
label.Text = "Enter your name:"
button = forms.Button()
button.Text = "OK"

layout = forms.StackLayout(
    forms.StackLayoutItem(label),
    forms.StackLayoutItem(forms.TextBox()),
    forms.StackLayoutItem(button))
layout.Padding = drawing.Padding(10)  # space around the edge
layout.Spacing = 5                    # space between each item
self.Content = layout

Orientation and alignment

Set Orientation to Orientation.Horizontal to place items left to right.

By default each item is placed at the start (top or left) and keeps its natural size. To change that, use HorizontalContentAlignment for a vertical stack, or VerticalContentAlignment for a horizontal one. Stretch makes every item fill the width (or height) of the layout:

C#
new StackLayout
{
    HorizontalContentAlignment = HorizontalAlignment.Stretch,
    Items = { new TextBox(), new TextArea() }
};

XAML
<StackLayout HorizontalContentAlignment="Stretch">
  <TextBox />
  <TextArea />
</StackLayout>

JSON
{
  "$type": "StackLayout",
  "HorizontalContentAlignment": "Stretch",
  "Items": [
    { "$type": "TextBox" },
    { "$type": "TextArea" }
  ]
}

F#
let layout = new StackLayout(HorizontalContentAlignment = HorizontalAlignment.Stretch)
layout.Items.Add(StackLayoutItem(new TextBox()))
layout.Items.Add(StackLayoutItem(new TextArea()))

Python
layout = forms.StackLayout(
    forms.StackLayoutItem(forms.TextBox()),
    forms.StackLayoutItem(forms.TextArea()))
layout.HorizontalContentAlignment = forms.HorizontalAlignment.Stretch

Expanding an item

Wrap a control in a StackLayoutItem to set its alignment, or to make it take up the remaining space:

C#
new StackLayout
{
    Orientation = Orientation.Horizontal,
    Spacing = 5,
    Items =
    {
        new StackLayoutItem(new TextBox(), expand: true),
        new Button { Text = "Search" }
    }
};

XAML
<StackLayout Orientation="Horizontal" Spacing="5">
  <StackLayoutItem Expand="True">
    <TextBox />
  </StackLayoutItem>
  <Button Text="Search" />
</StackLayout>

JSON
{
  "$type": "StackLayout",
  "Orientation": "Horizontal",
  "Spacing": "5",
  "Items": [
    { "Expand": true, "Control": { "$type": "TextBox" } },
    { "$type": "Button", "Text": "Search" }
  ]
}

F#
let layout = new StackLayout(Orientation = Orientation.Horizontal, Spacing = 5)
layout.Items.Add(StackLayoutItem(new TextBox(), true))
layout.Items.Add(StackLayoutItem(new Button(Text = "Search")))

Python
button = forms.Button()
button.Text = "Search"

layout = forms.StackLayout(
    forms.StackLayoutItem(forms.TextBox(), True),
    forms.StackLayoutItem(button))
layout.Orientation = forms.Orientation.Horizontal
layout.Spacing = 5

A null item that expands is an easy way to push the rest to the end, e.g. for buttons aligned to the right:

C#
Items = { new StackLayoutItem(null, expand: true), cancelButton, okButton }

XAML
<StackLayout Orientation="Horizontal" Spacing="5">
  <StackLayoutItem Expand="True" />
  <Button Text="Cancel" />
  <Button Text="OK" />
</StackLayout>

JSON
"Items": [
  { "Expand": true },
  { "$type": "Button", "Text": "Cancel" },
  { "$type": "Button", "Text": "OK" }
]

F#
layout.Items.Add(StackLayoutItem(null, true))
layout.Items.Add(StackLayoutItem(cancelButton))
layout.Items.Add(StackLayoutItem(okButton))

Python
layout.Items.Add(forms.StackLayoutItem(None, True))
layout.Items.Add(forms.StackLayoutItem(cancelButton))
layout.Items.Add(forms.StackLayoutItem(okButton))

For forms with labels and fields that need to line up across rows, use a TableLayout or DynamicLayout instead.

Edit this page on GitHub