Introduction
Here we see a WrapPanel control in WPF. WrapPanel is different type of layout container that we can use to organize and position elements in XAML. We can place items or elements in the panel and if there is not enough space to fit the items on the current row. The panel will fit the items to the next row or line. The WrapPanel positions the child from left to right, One after another, As long as they fit into the line and then continues the next line. We can set the different types of images in the WrapPanel. Its very useful in .NET. WrapPanel is similar to the StackPanel. It automatically arrange the items when a row filled by these items and they will move to the next line or row after filled first row r line. It can be horizontally or vertically. By default its orientation property becomes horizontal and we can change this and it can be vertical.
Code
When we add WrapPanel in our page the code will look like this.
<WrapPanel Height="463" HorizontalAlignment="Left" Margin="10,12,0,0" Name="wrapPanel1"VerticalAlignment="Top"
Width="276"
</WrapPanel>
We have three WrapPanel in our page and when we drag and drop these panels in our page the code in XAML will look this.
Background of Panel and elements
We can set background to elements and panel also when we colored these Panels then the code on XAML.
Code
<WrapPanel Height="463" HorizontalAlignment="Left" Margin="10,12,0,0" Name="wrapPanel1" VerticalAlignment="Top"Width="276" Background="#FFEF8181">
<Ellipse Height="138" Name="ellipse1" Stroke="Black" Width="267" Fill="#FF96EF96" />
<Ellipse Height="125" Name="ellipse2" Stroke="Black" Width="206" Fill="#FF7A7AEF" />
<Ellipse Height="106" Name="ellipse3" Stroke="Black" Width="162" Fill="#FFEB21CC" />
<Ellipse Height="68" Name="ellipse4" Stroke="Black" Width="129" Fill="#FF24BEFF" />
</WrapPanel>
<WrapPanel Name="wrapPanel2" Margin="326,4,107,259" Background="#FFC6E268">
<Rectangle Height="231" Name="rectangle1" Stroke="Black" Width="82">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FF85F2F2" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Height="204" Name="rectangle2" Stroke="Black" Width="52">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FFE56D6D" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--....---->
<Rectangle Height="220" Name="rectanglel7" Stroke="Black" Width="70">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</WrapPanel>
<WrapPanel Name="wrapPanel3" Margin="326,4,107,259" Background="#FFC6E268">
<Rectangle Height="75" Name="rectangle8" Stroke="Black" Width="46">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FFE65D12" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Height="98" Name="rectangle9" Stroke="Black" Width="42"><Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FFAD5750" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--....---->
<Rectangle Height="98" Name="rectangle14" Stroke="Black" Width="44">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FFAD5750" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</WrapPanel>
Output for above code.
Orientation Properties of WrapPanel
By the orientation property we can be panel horizontally or vertically. there are two options horizontal and vertical.
Some other useful properties of WrapPanel are
Children
Gets a UIElementCollection of child elements of this panel.
Clip
Gets or sets the geometry used to explain the the outline of the contents of an elements.
Uid
Sets or gets the unique identifier.
Background
Sets or Gets the brush that is used to fill the area between the border of a panel.
Margin
Sets or Gets the outer margin of an element.
Horizontal panel
Vertical panel
By the orientation property we can set the vertical panel.
