WrapPanel

The WrapPanel panel is similar to StackPanel, except that it will stack its children in both directions by default. It starts by laying out the child items horizontally and when it runs out of space on the first row, it automatically wraps the next item onto a new row and continues to lay out the remaining controls. It repeats this process using as many rows as are required, until all of the items are rendered.

However, it also provides an Orientation property like StackPanel, and this will affect its layout behavior. If the Orientation property is changed from the default value of Horizontal to Vertical, then the panel's child items will be laid out vertically, from top to bottom until there is no more room in the first column. The items will then wrap to the next column and will continue in this way until all of the items have been rendered.

This panel also declares ItemHeight and ItemWidth properties that enable it to restrict items' dimensions and to produce a layout behavior similar to the UniformGrid panel. Note that the values will not actually resize each child item, but merely restrict the available space that they are provided with in the panel. Let's see an example of this:

<WrapPanel ItemHeight="50" Width="150" TextElement.FontSize="14"> 
  <WrapPanel.Resources> 
    <Style TargetType="{x:Type Button}"> 
      <Setter Property="Width" Value="50" /> 
    </Style> 
  </WrapPanel.Resources> 
  <Button Content="7" /> 
  <Button Content="8" /> 
  <Button Content="9" /> 
  <Button Content="4" /> 
  <Button Content="5" /> 
  <Button Content="6" /> 
  <Button Content="1" /> 
  <Button Content="2" /> 
  <Button Content="3" /> 
  <Button Content="0" Width="100" /> 
  <Button Content="." /> 
</WrapPanel> 

Note that while similar to the output of a UniformGrid panel, the output of this example could not actually be achieved with that panel, because one of the child items is a different size to the others. Let's see the visual output of this example:

We first declare the WrapPanel and specify that each child should only be provided with a height of 50 pixels, while the panel itself should be 150 pixels wide. In the Resources section, we set the width of each button to be 50 pixels wide, therefore enabling three buttons to sit next to each other on each row, before wrapping items to the next row.

Next, we simply define the eleven buttons that make up the panel's children, specifying that the zero button should be twice as wide as the others. Note that this would not have worked if we had set the ItemWidth property to 50 pixels, along with the ItemHeight property. In that case, we would have seen half of the zero button, with the other half covered by the period button and a blank space where the period button currently is.