WrapPanel in WPF

A WrapPanel is very similar to a StackPanel because a WrapPanel stacks child elements side by side or stacked upon each other. In addition, a WrapPanel wraps the Child elements to the next row or column when there is no available space.

Let's create various layouts using a WrapPanel.

 

The following describes a sample of creating a simple layout using a Wrapanel. The default Orientation of a WrapPanel is Horizontal and child elements are arranged from left to right. The ItemHeight and ItemWidth property of a WrapPanel sets a uniform height and width of child elements. If we reduce the size of the window then child elements are moved to the next line or row.

<Window x:Class="WrapPanelExample1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="350" Width="525">
    <WrapPanel ItemHeight="60" ItemWidth="100">
        <Button Content="Button 1" Margin="10"></Button>
        <Button Content="Button 2" Margin="10"></Button>
        <Button Content="Button 3" Margin="10"></Button>
        <Button Content="Button 4" Margin="10"></Button>
        <Button Content="Button 5" Margin="10"></Button>
        <Button Content="Button 6" Margin="10"></Button>
        <Button Content="Button 7" Margin="10"></Button>
        <Button Content="Button 8" Margin="10"></Button>
    </WrapPanel>
</Window>

Preview

 

The following describes a sample of changing the Orientation of a WrapPanel to Vertical. Setting the Orientation to vertical arranges child elements from top to bottom and if neccessary, child elements are move to the next column.

<WrapPanel ItemHeight="60" ItemWidth="100" Orientation="Vertical">
        <Button Content="Button 1" Margin="10"></Button>
        <Button Content="Button 2" Margin="10"></Button>
        <Button Content="Button 3" Margin="10"></Button>
        <Button Content="Button 4" Margin="10"></Button>
        <Button Content="Button 5" Margin="10"></Button>
        <Button Content="Button 6" Margin="10"></Button>
        <Button Content="Button 7" Margin="10"></Button>
        <Button Content="Button 8" Margin="10"></Button>
</WrapPanel>

Preview 

 

 

 

The following describes a sample of changing the FlowDirection Property in a WrapPanel. When we change the WrapPanel's FlowDirection property from right to left, then stacking of the child elements start from the right and proceeds to the left. The default behaviour is LeftToRight.

<WrapPanel ItemHeight="60" ItemWidth="100" FlowDirection="RightToLeft">
        <Button Content="Button 1" Margin="10"></Button>
        <Button Content="Button 2" Margin="10"></Button>
        <Button Content="Button 3" Margin="10"></Button>
        <Button Content="Button 4" Margin="10"></Button>
        <Button Content="Button 5" Margin="10"></Button>
        <Button Content="Button 6" Margin="10"></Button>
        <Button Content="Button 7" Margin="10"></Button>
        <Button Content="Button 8" Margin="10"></Button>
</WrapPanel>

Preview 

 

 

The following describes a sample of setting the VerticalAlignment Property of child elements in a WrapPanel with Horizontal Orientation. We can also adjust the VerticalAlignment Property of child elements in a WrapPanel with Horizontal Orientation and vice-versa.

<WrapPanel ItemHeight="60" ItemWidth="100">
        <Button Content="Button 1" Margin="10" VerticalAlignment="Stretch"></Button>
        <Button Content="Button 2" Margin="10" VerticalAlignment="Top"></Button>
        <Button Content="Button 3" Margin="10" VerticalAlignment="Bottom"></Button>
        <Button Content="Button 4" Margin="10" VerticalAlignment="Center"></Button>
        <Button Content="Button 5" Margin="10"></Button>
</WrapPanel>

Preview

 

I hope you like it. Thanks.