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.
  • 2542

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.

 

w1.gif

 

Figure1.gif

 

Now change the property Orientation Orientation="Horizontal

 

The form looks like this.

 

w2.gif


Figure2.gif

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.