WPF WrapPanel control in VB.NET

In this article, I will discuss how to create a WrapPanel control in WPF.
  • 1766

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.

wp1.gif

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.


wp2.gif 

 

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.


wp3.gif 

 

Figure 3.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.