The VariableSizedWrapGrid class allows you to arrange its elements in rows and columns, wrapped to a new row or column when the maximum rows or columns defined by the MaximumRowsOrColumns property reaches the specified value.

You can arrange the elements from top to bottom and wrap to the next column by setting its orientation to Vertical. When you set it to Horizontal, the elements arrange themselves from left to right and then wrap to the next row.

The RowSpan and/or the ColumnSpan attached properties can be used to span the specified elements across rows and/or columns within the layout. Using this, you can create a layout just like the Windows 10 start screen having multiple small, medium, wide, and large tiles in it.

Let's see an example defining the VariableSizedWrapGrid layout control in action having multiple border controls in it:

  <VariableSizedWrapGrid Orientation="Horizontal"  
     MaximumRowsOrColumns="5"> 
      <Border Background="Orange" Margin="4"  
              Width="100" Height="100" /> 
      <Border Background="Orange" Margin="4"  
              Width="100" Height="100" /> 
      <Border Background="Orange" Margin="4"  
              Width="100" Height="208"  
              VariableSizedWrapGrid.RowSpan="2"/> 
      <Border Background="Orange" Margin="4"  
              Width="208" Height="100"  
              VariableSizedWrapGrid.ColumnSpan="2"/> 
      <Border Background="Orange" Margin="4" 
              Width="100" Height="100" /> 
      <Border Background="Orange" Margin="4"  
              Width="100" Height="100" /> 
      <Border Background="Orange" Margin="4"  
              Width="100" Height="100" /> 
      <Border Background="Orange" Margin="4"  
              Width="100" Height="100" /> 
  </VariableSizedWrapGrid> 

The previous example will result in the following output on the screen, having five columns of different-sized elements:

Please note the following points while using VariableSizedWrapGrid control:

• The content of VariableSizedWrapGrid is not virtualized
• You may see a performance impact when working with large datasets in this panel.
• VariableSizedWrapGrid can be placed inside the ItemsPanel of a GridView or ItemsControl, but cannot be placed inside an ItemsPanel of a ListView.