WPF Wrap controls WrapPanel in VB.NET

In this article you will learn that how you can Wrap controls in a WrapPanel.
  • 2982
 

Introduction 

Here in this article I am explaining that how you can wrap Buttons or controls in a WrapPanel. A WrapPanel is similar to the StackPanel but it does not just stack all elements to one row. If their is no space it wraps the elements in newline. Wrappanels are another type of Layout container that you can use to organize and position elements in xaml. a WrapPanel is also said to be a StackPanel and Web enabled. Here we take a Grid, two WrapPanel and eighteen buttons and we are Wrapping nine buttons in one WrapPanel with a color and nine in another WrapPanel.

Getting Started

  • Simply create a new WPF application. 
  • Drag a Grid, WrapPanel and Button control on MainWindow. Your Window will look like below.

    wrap1.gif
     
  • Your MainWindow.xaml page will look like below.

    <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="311" Width
    ="337">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="50*" />
            </Grid.ColumnDefinitions>
            <WrapPanel Background="SteelBlue"  Margin="4,4,4,4" Name="WrapPanel1"Grid.Column="0"
    VerticalAlignment
    ="Top">
                <Button Height="30" Name="btn1" Width="75">one</Button>
                <Button Height="20" Name="btn2" Width="50">two</Button>
                <Button Height="40" Name="btn3" Width="50">three</Button>
                <Button Height="120" Name="btn4" Width="75">four</Button>
                <Button Height="40" Name="btn5" Width="75">five</Button>
                <Button Height="30" Name="btn6" Width="60">six</Button>
                <Button Height="30" Name="btn7" Width="60">seven</Button>
                <Button Height="25" Name="btn8" Width="60">eight</Button>
                <Button Height="40" Name="btn9" Width="50">nine</Button>
            </WrapPanel>
            <WrapPanel Background="Teal"  Name="WrapPanel2" Grid.Column="1"Margin="4,4,4,4"
    Grid.ColumnSpan="1" Orientation
    ="Vertical">
                <Button Height="30" Name="btn10" Width="75">i</Button>
                <Button Height="210" Name="btn11" Width="50">ii</Button>
                <Button Height="40" Name="btn12" Width="50">iii</Button>
                <Button Height="20" Name="btn13" Width="75">iv</Button>
                <Button Height="40" Name="btn14" Width="75">v</Button>
                <Button Height="30" Name="btn15" Width="60">vi</Button>
                <Button Height="30" Name="btn16" Width="60">vii</Button>
                <Button Height="120" Name="btn17" Width="60">viii</Button>
                <Button Height="40" Name="btn18" Width="50">ix</Button>
            </WrapPanel>
        </Grid>
    </
    Window>
     
  • Now run your application.
Output:-

wrap2.gif

wrap3.gif

wrap4.gif

Summary 

In this article you learned that how to wrap controls in a WrapPanel.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.