Panels

A two-row grid: Name with a text box, Difficulty with a combo box showing Normal

Panels arrange other elements. A StackPanel places its children one after another, in a column or a row. A Grid places them in rows and columns, which suits forms and HUD layouts.

Markup

<!-- Grid places children in rows and columns; StackPanel stacks them. -->
<Grid Width="300">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <TextBlock Grid.Row="0" Grid.Column="0" Margin="0,0,12,8">Name</TextBlock>
  <TextBox Grid.Row="0" Grid.Column="1" Margin="0,0,0,8" Text="{Binding PlayerName}" />
  <TextBlock Grid.Row="1" Grid.Column="0" Margin="0,0,12,0">Difficulty</TextBlock>
  <ComboBox Grid.Row="1" Grid.Column="1" ItemsSource="{Binding Difficulties}" SelectedIndex="1" />
</Grid>

Grid.Row and Grid.Column are attached properties: each child says which cell it sits in.

Key properties

Property	Description
Orientation	`Vertical` (a column) or `Horizontal` (a row).
ColumnDefinitions / RowDefinitions	The columns and rows, each with a size.

A column Width or row Height is one of:

Auto: as big as its content;
a number: that many pixels;
*: a share of the space left over. 2* gets twice the share of *.

Events and commands

Panels raise none of their own.

Styling

Panels draw nothing themselves unless you give them a Background. Use Margin on children for spacing.

Keyboard, gamepad and touch

Panels don't take focus. The arrow keys and the D-pad move focus between the controls inside, to the nearest one in the pressed direction.

StackPanel

Children keep their own size along the stacking direction and, by default, stretch across it (a button in a column stays centered: buttons size to their content).

Grid

A child can span several cells with Grid.RowSpan and Grid.ColumnSpan.

Table of Contents