Learn About A Wrap Panel In WPF

Introduction

Wouldn't it be great to have a panel who arranges its child elements by itself? Well, WPF has you covered. In WPF, we can use WrapPanel: The definition is in the name itself, It wraps the contents until there is no empty place left.

The WrapPanel arranges its child controls next to one other, either horizontally or vertically, unlike a stack panel by default WrapPanel's orientation is horizontal. While wrapping these child controls, one need to have fix height or width for every child control

If the orientation of WrapPanel is Horizontal, then child controls will share the same height as the highest control. If the orientation of WrapPanel is Vertical, then child controls will share the same width as the widest control

Let's see the first example with default orientation, horizontal

We are going to have 3 labels & 3 TextBoxes & 1 Register button on our UI.

<Window x:Class="A.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="220" Width="350" >
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>
<WrapPanel x:Name="GridOuter"
Grid.IsSharedSizeScope="True">
<Grid x:Name="GridInnerUserName">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="FirstColumn"/>
<ColumnDefinition SharedSizeGroup="SecondColumn"/>
</Grid.ColumnDefinitions>
<Label x:Name="LabelUserName"
Content="User Name:"
Margin="0 10 0 0"/>
<TextBox x:Name="TextBoxUserName"
Text="{Binding UserName}"
Height="20"
Width="150"
Grid.Column="1"/>
</Grid>
<Grid x:Name="GridInnerPassword">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="FirstColumn"/>
<ColumnDefinition SharedSizeGroup="SecondColumn"/>
</Grid.ColumnDefinitions>
<Label x:Name="LabelPassword"
Content="Password:" />
<PasswordBox x:Name="TextBoxPassword"
Height="20"
Width="150"
Grid.Column="1"/>
</Grid>
<Grid x:Name="GridInnerEmail">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="FirstColumn"/>
<ColumnDefinition SharedSizeGroup="SecondColumn"/>
</Grid.ColumnDefinitions>
<Label x:Name="LabelEmailId"
Content="Email:" />
<TextBox x:Name="TextBoxEmail"
Height="20"
Width="150"
Grid.Column="1"/>
</Grid>
<Button x:Name="ButtonLogin"
Height="20"
Width="100"
Content="Register"
HorizontalAlignment="Center"
Margin="20 10 0 0"
Command="{Binding RegisterButtonClicked}"
/>
</WrapPanel>
</Window>

Run this project, and you'll be able to do this:

Now if we need to see its horizontal wrapping behaviour, for that we have to change the window size to Height="80" Width="1200" and wrap panel's orientation to vertical Orientation="Vertical"

<Window x:Class="A.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="80" Width="1200">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>
<WrapPanel x:Name="GridOuter"
Orientation = "Vertical"
Grid.IsSharedSizeScope="True">

Alright, once you are done with making these changes, run the project & see the alternate magic:

Conclusion

In this article, we learned how controls can dynamically be arranged.

In layman terms, items are horizontally arranged when the window is stretch horizontally, or items are vertically arranged when the window is stretch vertically.

WPF has rich controls to support rich & dynamic UI.

Thank you for visiting this article. I sure hope you have gained some insight into Wrap panel's behavior.

You can connect with me @