StackPanel Tutorial

Introduction

The StackPanel in WPF is a simple and useful layout panel. It stacks its child elements below or beside each other, dependening on its orientation. This is very useful to create any kinds of lists. All WPF ItemsControls like ComboBox,ListBox or Menu use a StackPanel as their internal layout panel.

<Window x:Class="GridLayoutExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel Layout Example" 
        MinHeight="325"
        MinWidth="500"
        Height="325"
        Width="500"
        WindowStartupLocation="CenterScreen"
        WindowState="Normal">
    <Window.Resources>
        <Style TargetType="{x:Type Label}">
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="Height" Value="25"/>
            <Setter Property="Margin" Value="10,0,0,5"/>
            <Setter Property="Padding" Value="2,2,0,2"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
        </Style>


        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="Height" Value="25"/>
            <Setter Property="Margin" Value="10,0,5,5"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
        </Style>


        <Style TargetType="{x:Type Button}">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="25"/>
            <Setter Property="Margin" Value="0,0,5,5"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
        </Style>
    </Window.Resources>
    
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250*"/>
        </Grid.ColumnDefinitions>


        <Grid.RowDefinitions>
            <RowDefinition Name="row0" Height="Auto"/>
            <RowDefinition Name="row1" Height="Auto"/>
            <RowDefinition Name="row2" Height="Auto"/>
            <RowDefinition Name="row3" Height="Auto"/>
            <RowDefinition Name="row4" Height="Auto"/>
            <RowDefinition Name="row5" Height="Auto"/>
            <RowDefinition Name="row6" Height="*"/>
        </Grid.RowDefinitions>
        
        <StackPanel Grid.Column="0" Grid.Row="1">
            <Label Content="Name :"/>
            <TextBox Name="txtName"/>
        </StackPanel>


        <StackPanel Grid.Column="0" Grid.Row="2">
            <Label Content="Address :"/>
            <TextBox Name="txtAddress"/>
        </StackPanel>


        <StackPanel Grid.Column="0" Grid.Row="3">
            <Label Content="Phone :"/>
            <TextBox Name="txtPhone"/>
        </StackPanel>


        <StackPanel Grid.Column="0" Grid.Row="4">
            <Label Content="Contact :"/>
            <TextBox Name="txtContact"/>
        </StackPanel>


        <StackPanel Grid.Column="0" Grid.Row="5" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Name="butSave" Content="Save"/>
            <Button Name="butCancel" Content="Cancel"/>
        </StackPanel>


    </Grid>
    
</Window>