Various Types of Layout Controls In Windows Store Apps

In this article I explain the various types of layouts in Windows 8 apps. Their are four types of layouts that we use in it.

Canvas

By using this layout we can control 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 child elements. Now to add the Canvas in our application write the code as:

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

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

      <Rectangle Fill="Violet" Canvas.Left="35" Canvas.Top="33" Height="100" Width="100"/>

      <Rectangle Fill="Gainsboro" Canvas.Left="70" Canvas.Top="66" Height="100" Width="100"/>

      <Rectangle Fill="Red" Canvas.Left="105" Canvas.Top="99" Height="100" Width="100"/>

</Canvas>

The output will look like:

Stack Panel

Using this layout we can add the elements either vertically or horizontally. The code is as:

<StackPanel Orientation="Horizontal">         

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

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

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

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

</StackPanel>

<StackPanel Orientation="Vertical">

      <Rectangle Fill="Blue" Height="100" Width="100" Margin="633,0"/>

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

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

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

The output will look like:

Grid

By using this layout the elements are arranged in rows and columns. Elements are positioned using Grid.Row and Grid.Column properties. Using Grid.RowSpan and Grid.ColumnSpan properties elements can span multiple rows and columns. The code is as follows:

<Grid>

   <Grid.RowDefinitions>

         <RowDefinition Height="100"/>

         <RowDefinition Height="100"/>

   </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>

 

The output looks like:

VariableSizeWrapGrid

Using this type of layout, elements are arranged 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 VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties. The code is as:

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44" Margin="25,31,-25,-31">

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

            <Rectangle Fill="Blue" Height="180"

               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>

The output is as:

Summary

We can add many other controls using these layouts. Suppose I want multiple vertical buttons then that can be done easily using a stack panel layout by setting its orientation property to vertical.

So we can use these layouts to work with it.