WrapPanel in WPF

WrapPanel is much similar to Stackpanel because WrapPanel stacks child elements side by side or stack to each other. In addition, WrapPanel wraps the Child elements to the next row or column when there is no available space.

Let's create various layout using WrapPanel.

Example: Creating Simple layout using Wrapanel.
Default Orientation of WrapPanel is Horizontal and child elements are arranged from left to right direction. ItemHeight and ItemWidth property of WrapPanel sets uniform height and width of Child Elements. If we reduce the size of Window then Child Elements moved to Next line/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:

Example: Changing the Orientation of WrapPanel to Vertical

Setting Orientation as vertical arranges Child Elements from top to Bottom and if neccessary, child elements moves to 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:

Example: Changing FlowDirection Property in WrapPanel

When we change WrapPanel's FlowDirection property to Right to left, then stacking of child elements start from right to 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:

Example: Setting VerticalAlignment Property of Child Elements in WrapPanel with Horizontal Orientation.

We can also adjust VerticalAlignment Property of Child Elements in 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:

Hope you like it. Thanks.

[Download Source Code via Google Drive]