VariableSizedWrapGrid in Windows Store Apps

The VariableSizedWrapGrid is a panel that can create a typical title-based layout as was introduced with Windows 8. The VariableSizedWrapGrid is only available in WinRT. The VariableSizedWrapGrid arranges its children in row and columns.

For example:

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">


        <VariableSizedWrapGrid

                                >
            <Button Content="A"></Button>
            <Button Content="B" Background="Red"></Button>
            <Button Content="C"></Button>
            <Button Content="D"></Button>
            <Button Content="E"></Button>
            <Button Content="F"></Button>
        </VariableSizedWrapGrid>
    </Grid>
</Page

It has an Orientation-Property that is by default vertical. That means it stacks children in columns. You can set it to Horizontal to stack the children in rows.

<VariableSizedWrapGrid Orientation="Horizontal" >
            <Button Content="A"></Button>
            <Button Content="B" Background="Red"></Button>
            <Button Content="C"></Button>
            <Button Content="D"></Button>
            <Button Content="E"></Button>
            <Button Content="F"></Button>
</VariableSizedWrapGrid>

Besides the Orientation-Property, It has the Properties ItemWidth and ItemHeight to define an equal size for all its children.

For example:

<VariableSizedWrapGrid ItemWidth="200" ItemHeight="100"Orientation="Horizontal"  >
        <Rectangle Fill="LightGray" />
        <Rectangle Fill="LightBlue" />
        <Rectangle Fill="Tomato"  />
        <Rectangle Fill="Purple" />
        <Rectangle Fill="Yellow" />
        <Rectangle Fill="Red"/>
        <Rectangle Fill="Green"  />
        <Rectangle Fill="Blue" />
        <Rectangle Fill="Orange" />
 </VariableSizedWrapGrid>

It has another important property, the MaximumRowsOrColumns property. With that property, you define when a break occurs. A vertical VeriableSizedWrapGrid will break to a new column, either when the number of rows is reached that you have defined in the MaximumRowsOrColumns property or when there is no more vertical space left in that column. In a horizontal VariableSizedWrapGrid, the children are stacked in a row. It will break to a new row when the number of columns has reached the number you have defined in the MaximumRowsOrColumns property or when where is no more horizontal space left.

Vertical

<VariableSizedWrapGrid
                     ItemWidth="200"
                    ItemHeight="100"
                                     MaximumRowsOrColumns="2"
                     Orientation="Vertical"  >
      <Rectangle Fill="LightGray" />
      <Rectangle Fill="LightBlue" />
      <Rectangle Fill="Tomato"  />
      <Rectangle Fill="Purple" />

      <Rectangle Fill="Yellow" />
      <Rectangle Fill="Red"

             />
      <Rectangle Fill="Green"  />
      <Rectangle Fill="Blue" />
      <Rectangle Fill="Orange" />
  </VariableSizedWrapGrid>

Let's set the property to the value 2. Now you can see in the Designer the VariableSizedWrapGrid has now only two rows. After the two rows are reached, it breaks to a new column.

Horizontal

<VariableSizedWrapGrid
                       ItemWidth="200"
                      ItemHeight="100"
                                       MaximumRowsOrColumns="2"
                       Orientation="Horizontal"  >
        <Rectangle Fill="LightGray" />
        <Rectangle Fill="LightBlue" />
        <Rectangle Fill="Tomato"  />
        <Rectangle Fill="Purple" />

        <Rectangle Fill="Yellow" />
        <Rectangle Fill="Red"

               />
        <Rectangle Fill="Green"  />
        <Rectangle Fill="Blue" />
        <Rectangle Fill="Orange" />
    </VariableSizedWrapGrid>

Now you can see in the Designer the VariableSizedWrapGrid has now only two columns. After the two columns are reached, it breaks to a new row.
All right, now let's look at the attached properties RowSpan and ColumnSpan.

For example:

<VariableSizedWrapGrid
                       ItemWidth="100"
                      ItemHeight="100"
                       Orientation="Vertical" >
        <Rectangle Fill="Khaki" />
        <Rectangle Fill="LightBlue" />
        <Rectangle Fill="Tomato" VariableSizedWrapGrid.ColumnSpan="2" />
        <Rectangle Fill="Purple" />

        <Rectangle Fill="Yellow" VariableSizedWrapGrid.ColumnSpan="2" />
        <Rectangle Fill="Red"

               VariableSizedWrapGrid.RowSpan="2" />
        <Rectangle Fill="Green" VariableSizedWrapGrid.RowSpan="2" />
        <Rectangle Fill="Blue" />
        <Rectangle Fill="Orange" />
    </VariableSizedWrapGrid>

Summary

This article explained the VariableSizedWrapGrid with the Orientation, ItemWidth, ItemHeight MaximumRowsOrColumns, RowSpan and ColumnSpan properties. Thanks for reading.