Jitesh Byahut 11/18/2014 2257

StackPanel In Wpf

StackPanel is very famous in all wpf panels. It's arrange as elements as stack inside panel. It's arranging elements one after one as horizontal or vertical. In stack panel, no need for specify corner properties of elements, just need margin of that elements. You can set orientation of stack panel horizontal or vertical.

Horizontal Orientation

StackPanel orientation as horizontal as arrange all elements as horizontal direction.

Below example demonstrate that horizontal orientation of stack panel.

<Window x:Class="StackPanel.HorizontalOrientation"

        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">

    <StackPanel 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" />

    </StackPanel>

</Window>

Vertical Orientation

StackPanel orientation as vertical as arrange all elements as vertical direction.

Below example demonstrate that vertical orientation of stack panel.

<Window x:Class="StackPanel.VerticalOrientation"

        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">

    <StackPanel Orientation="Vertical">

        <!--Vertical orientation is default-->

        <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" />

    </StackPanel>

</Window>

Horizontal Alignment

StackPanel horizontal alignment allow element to align left, center and right direction.

Below example demonstrate that horizontal alignment of elements inside stack panel.

<Window x:Class="StackPanel.Alignment"

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

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

        Title="Vertical Alignment" Height="380" Width="300">

    <StackPanel>

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

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

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

       <Ellipse Width="50" Height="50" Fill="DarkVioletā€HorizontalAlignment="Center"/>

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

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

    </StackPanel>

</Window>

Vertical Alignment

StackPanel vertical alignment allow element to align top, center and bottom direction.

Below example demonstrate that vertical alignment of elements inside stack panel.

<Window x:Class="StackPanel.Alignment"

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

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

        Title="Vertical Alignment" Height="380" Width="300">   

    <StackPanel Orientation="Horizontal">

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

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

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

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

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

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

    </StackPanel>

</Window>


Please give your feedback for improving this page