Metro style using VariableSizedWrapGrid

facebooktwittergoogle_plusredditpinterestlinkedinmail

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

<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

vgrd1

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>

vgrd2

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

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

vgrd3

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>

vgrd4
Let’s set the property to value of 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>

vgrd5

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.
Eg:

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

vgrd6

Summary
In this article, I discussed the VariableSizedWrapGrid with Orientation , ItemWidth, ItemHeight MaximumRowsOrColumns , RowSpan and ColumnSpan properties . Thanks for reading.

The following two tabs change content below.

Tom Mohan

Tom Mohan is a technologist who loves to code and build. He enjoys working on Microsoft Technologies. Tom specializes in ASP.NET MVC, Web API , Azure, C# ,WPF, SQL etc and holds a Bachelor engineering degree in Computer Science. Certification : MCSD , MCTS