Jitesh Byahut 11/18/2014 2327

WrapPanel In Wpf

WrapPanel is similar to StackPanel that store contents in stack manner except that it wrap contents in horizontal and vertical direction by adding row or column when contents width or height is more than panel width or height.

Horizontal Orientation

You can use horizontal orientation for arranging contents in horizontally. Below example demonstrate about horizontal orientation of wrap panel:

<Window x:Class="WrapPanel.OrientationHorizontal"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Horizontal Orientation" Height="300" Width="300">

    <WrapPanel Orientation="Horizontal">

        <Ellipse Width="50" Height="50" Fill="Red" />

        <Ellipse Width="50" Height="50" Fill="DodgerBlue" />

        <Ellipse Width="50" Height="50" Fill="DeepPink" />

        <Ellipse Width="50" Height="50" Fill="DarkViolet" />

        <Ellipse Width="50" Height="50" Fill="DarkOrange" />

        <Ellipse Width="50" Height="50" Fill="Green" />

        <Ellipse Width="50" Height="50" Fill="Maroon" />

    </WrapPanel>

</Window>

Output:

Vertical Orientation

You can use vertical orientation for arranging contents in horizontally. Below example demonstrate about vertical orientation of wrap panel:

<Window x:Class="WrapPanel.OrientationVertical"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Vertical Orientation" Height="300" Width="300">

    <WrapPanel Orientation="Vertical">

        <Ellipse Width="50" Height="50" Fill="Red" />

        <Ellipse Width="50" Height="50" Fill="DodgerBlue" />

        <Ellipse Width="50" Height="50" Fill="DeepPink" />

        <Ellipse Width="50" Height="50" Fill="DarkViolet" />

        <Ellipse Width="50" Height="50" Fill="DarkOrange" />

        <Ellipse Width="50" Height="50" Fill="Green" />

        <Ellipse Width="50" Height="50" Fill="Maroon" />

    </WrapPanel>

</Window>

Output:

Wrap FlowDirection

WrapPanel provide facility to arrange contents from left to right or right to left. For this, use FlowDirection property of wrap panel. By default flow direction is LeftToRight. Below example demonstrate that how to set FlowDirection to RightToLeft:

<Window x:Class="WrapPanel.FlowDirection"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="WrapPanel FlowDirection" Height="300" Width="300">

        <WrapPanel Orientation="Horizontal" FlowDirection="RightToLeft">

            <Ellipse Width="50" Height="50" Fill="Red" />

            <Ellipse Width="50" Height="50" Fill="DodgerBlue" />

            <Ellipse Width="50" Height="50" Fill="DeepPink" />

            <Ellipse Width="50" Height="50" Fill="DarkViolet" />

            <Ellipse Width="50" Height="50" Fill="DarkOrange" />

            <Ellipse Width="50" Height="50" Fill="Green" />

            <Ellipse Width="50" Height="50" Fill="Maroon" />

        </WrapPanel>       

</Window>

Output:

Demo of WrapPanel:

Below example demonstrate that Wrappanel wrap contents on output windows also:



Please give your feedback for improving this page