Layout Control in Windows Store Apps

Introduction

Today we explain how to add layout controls or layout panels in Windows Store apps. We use layout panels to arrange a group of UI elements in your app. The main thing to consider when choosing a layout panel is how the panel positions and sizes its child elements. You might also need to consider how overlapping child elements are layered on top of each other.

In Windows Store apps there are four types of layout panels available for arranging UI elements in your app.

Canvas

The Canvas layout controls the positioning and resizing of the child elements. The elements are positioned using the "Canvas.Top" and "Canvas.Left" properties. The panel does not affect the sizing of the child elements.

<Canvas Width="200" Height="200">

    <Rectangle Fill="Red" Height="100" Width="100"/>

    <Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20" Height="100" Width="100"/>

    <Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40" Height="100" Width="100"/>

    <Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60" Height="100" Width="100"/>

</Canvas>

StackPanel

The StackPanel layout adds child elements, either vertically or horizontally.

<StackPanel>

    <Rectangle Fill="Red" Height="100" Width="100"/>

    <Rectangle Fill="Blue" Height="100" Width="100"/>

    <Rectangle Fill="Green" Height="100" Width="100"/>

    <Rectangle Fill="Yellow" Height="100" Width="100"/>

</StackPanel>

Grid

The Grid Layout arranges UI Elements in rows and columns. Elements are positioned using the "Grid.Row" and "Grid.Column" properties. Using the "Grid.RowSpan" and "Grid.ColumnSpan" properties, elements can span multiple rows and columns.

<Grid>

  <Grid.RowDefinitions>

     <RowDefinition Height="100"/>

     <RowDefinition Height="100"/>

     <RowDefinition Height="79*"/>

     <RowDefinition Height="489*"/>

   </Grid.RowDefinitions>

   <Grid.ColumnDefinitions>

     <ColumnDefinition Width="100"/>

     <ColumnDefinition Width="100"/>

 </Grid.ColumnDefinitions>

         <Rectangle Fill="Red"/>

         <Rectangle Fill="Blue" Grid.Row="1"/>

         <Rectangle Fill="Green" Grid.Column="1"/>

         <Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/>

</Grid>

VariableSizedWrapGrid

The "VariableSizedWrapGrid" layout arranges elements in rows or columns that automatically wrap to a new row or column when the "MaximumRowsOrColumns" value is reached. Rows or columns are specified by the "Orientation" property. Elements can span multiple rows and columns using the "VariableSizedWrapGrid.RowSpan" and "VariableSizedWrapGrid.ColumnSpan" attached properties.

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">

    <Rectangle Fill="Red"/>

    <Rectangle Fill="Blue" Height="80"

        VariableSizedWrapGrid.RowSpan="2"/>

    <Rectangle Fill="Green" Width="80"

        VariableSizedWrapGrid.ColumnSpan="2"/>

    <Rectangle Fill="Yellow" Height="80" Width="80"

        VariableSizedWrapGrid.RowSpan="2"

        VariableSizedWrapGrid.ColumnSpan="2"/>

</VariableSizedWrapGrid>