WrapPanel control WPF in VB.NET
This article demonstrates how to create and also explains the basic use of the various property of the WrapPanel control in WPF and xaml.
This article demonstrates how to create and also explains the basic use of the various property of the WrapPanel control in WPF and xaml.
WrapPanel control
The Wrap panel wraps all child elements to new lines if no space is left. It 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.
Important properties
This control has the following properties.
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.
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"
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" Height="311" VerticalAlignment="Top">
<Ellipse Width="80" Height="80" Fill="Tomato"/>
<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="82" Height="80">
<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>
<Rectangle Width="60" Height="60" Fill="#FF00FA00"></Rectangle>
<Rectangle Width="40" Height="154" Fill="Coral"></Rectangle>
<Rectangle Width="55" Height="148" Fill="DarkGoldenrod"></Rectangle>
</WrapPanel>
</Grid>
</Window>
Now run the application.
Figure1.gif
Now change the property Orientation Orientation="Horizontal
The form looks like this.
Figure2.gif