In this article, I will discuss how to create a WrapPanel control in WPF.
WrapPanel control
Wrap panel wraps all child elements to new lines if no space is left. WrapPanel is similar to StackPanel but it has an additional feature. If elements that are stacked horizontally or vertically don't fit in the row or column they are in, the remaining elements will wrap around in the same sequence.
Properties - This control has the following properties.
Figure 1.
Orientation - The Orientation property can be set to Horizontal or Vertical.
ItemHeight - The ItemHeight property of WrapPanel are used to set a fixed uniform height that are contained within a WrapPanel.
ItemWidth - The ItemWidth properties of WrapPanel are used to set a fixed uniform width of all items that are contained within a WrapPanel.
Creating a WrapPanel in XAML
<WrapPanel Orientation="Vertical">
</WrapPanel>
The Orientation property is used to wrap child items horizontally or vertically.
For example
Drag and drop some control like WrapPanel, Image, ellipse, rectangle on the form and set the properties of these control.
Set WrapPanel orientation property Orientation="Vertical"
The form looks like this.
Figure 2.
XAML code
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="LayoutRoot" Background="White" >
<WrapPanel Orientation="Vertical">
<Image Width="97.135" Height="28"Source="/WpfApplication19;component/Images/imagec26.jpg" />
<Ellipse Width="80" Height="80" Fill="Tomato" />
<Image Source="/WpfApplication19;component/Images/flowers-image.jpg" Width="43"Height="26" />
<Ellipse Width="40" Height="40" Fill="Green" />
<Ellipse Width="20" Height="20" Fill="Blue" />
<Rectangle Width="100" Height="100" Fill="Cyan" Cursor="None"
FlowDirection="RightToLeft"></Rectangle>
<Rectangle Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="/WpfApplication19;component/Images/dog-animal.jpg" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Width="60" Height="60" Fill="DarkBlue"></Rectangle>
<Rectangle Width="40" Height="154" Fill="Coral"></Rectangle>
<Rectangle Width="20" Height="148" Fill="DarkGoldenrod"></Rectangle>
</WrapPanel>
</Grid>
</Window>
Now change the property Orientation Orientation="Horizontal
The form looks like this.
Figure 3.