Wrap Panel in WPF Using VB.NET

WrapPanel is different type of layout container that we can use to organize and position elements in XAML.Its very useful in .NET.
  • 2311

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.

pehli1.gif

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.

dusri.gif
 

teesri.gif
 

Orientation Properties of WrapPanel

By the orientation property we can be panel horizontally or vertically. there are two options horizontal and vertical.

4th2.png

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

horiz.png
 

Vertical panel

By the orientation property we can set the vertical panel.

verticl.png

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.