WPF Using Wrap Panel in VB.NET

In this article you will learn the functionality of Wrap Panel in WPF.
  • 2278

Wrap panel wraps all child elements to new lines if no space is left. The Orientation can be set toHorizontal or Vertical. The WrapPanel can be used to arrange tabs of a tab control, menu items in a toolbar or items in an Windows Explorer like list.

The WrapPanel is often used with items of the same size, but its not a requirement. In this example we create Wrap Buttons on the Wrap Panel, Lets see how:

Wrap Panel Code
 

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="UseWrapPanel" Height="224" Width="520">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*" />
            <ColumnDefinition Width="50*" />
        </Grid.ColumnDefinitions>
        <WrapPanel Background="Lightgreen" Margin="4,4,4,4" Name="WrapPanel1"Grid.Column="0" VerticalAlignment="Top">
           <Button Height="30" Name="Button1" Width="75">1</Button>
            <Button Height="20" Name="Button2" Width="50">2</Button>
            <Button Height="40" Name="Button3" Width="50">3</Button>
            <Button Height="120" Name="Button4" Width="75">4</Button>
            <Button Height="40" Name="Button5" Width="75">5</Button>
            <Button Height="30" Name="Button6" Width="60">6</Button>
            <Button Height="30" Name="Button7" Width="60">7</Button>
            <Button Height="20" Name="Button8" Width="60">8</Button>     
            
<Button Height="40" Name="Button9" Width="50">9</Button
        
</WrapPanel>
        <WrapPanel Background="Blue" Name="WrapPanel2" Grid.Column="1" Margin="4,4,4,4"Grid.ColumnSpan="1" Orientation="Vertical">
            <Button Height="30" Name="Button10" Width="75">1</Button>
            <Button Height="210" Name="Button11" Width="50">2</Button>
            <Button Height="40" Name="Button12" Width="50">3</Button>
            <Button Height="20" Name="Button13" Width="75">4</Button>
            <Button Height="40" Name="Button14" Width="75">5</Button>
            <Button Height="30" Name="Button15" Width="60">6</Button>
            <Button Height="30" Name="Button16" Width="60">7</Button>
            <Button Height="120" Name="Button17" Width="60">8</Button>
            <Button Height="40" Name="Button18" Width="50">9</Button>
        </WrapPanel>
    </Grid>
</
Window>

Output Window

wrappanel1.gif

Now if you change the size of window, WrapPanel automatically adjust the buttons according to the size of panel.

wrappanel2.gif

I hope this will help you. 

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.