Table of Contents

Introduction

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:local="using:App1" 
    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.

Example: ItemWidth and ItemHeight



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

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

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

Example: RowSpan and ColumnSpan



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





See Also

Object Panel
Quickstart: Defining layouts
Quickstart: Adding layout controls
Attached properties overview

Related controls
Canvas
Grid
ItemsWrapGrid
StackPanel
WrapGrid