StackPanel in WPF

A StackPanel places child elements in a vertical or horizontal stack. It is one of the popular panels because of its simplicity. By default, a StackPanel's child element grows from the top of the panel to the bottom, in other words in vertical orientation. We can control the position of elements using HorizontalAlignment or VerticalAlignment and control the spacing using margin and padding properties.

 

Let's create various layouts using a StackPanel.

 

Example: Creating Simple Layout using StackPanel.

In this example, I have added one TextBlock and 5 Buttons to a StackPanel. By default, a StackPanel arranges child elements from the top to bottom. All elements inside the StackPanel are streched to the fullest width of the StackPanel.

<Window x:Class="StackPanelExample1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="525">
    <StackPanel>
        <TextBlock Text="This is TextBlock"></TextBlock>
        <Button Content="Button 1"></Button>
        <Button Content="Button 2"></Button>
        <Button Content="Button 3"></Button>
        <Button Content="Button 4"></Button>
        <Button Content="Button 5"></Button>
    </StackPanel>
</Window>

 Preview

 

 

Example: Changing the Orientation of the StackPanel to horizontal

In this example, we arrange child elements of the StackPanel horizontally by setting the Orientation property value to Horizontal. Now the elements are stretched to the full height of the StackPanel.

<StackPanel Orientation="Horizontal">
        <TextBlock Text="This is a TextBlock"></TextBlock>
        <Button Content="Button 1"></Button>
        <Button Content="Button 2"></Button>
        <Button Content="Button 3"></Button>
        <Button Content="Button 4"></Button>
        <Button Content="Button 5"></Button>
</StackPanel>

 Preview

 

 

Example: Changing the FlowDirection property of a StackPanel

On setting the FlowDirection property RightToLeft of a StackPanel (with Horizontal orientation), the stacking of child elements start from right to Left . The default behaviour is LeftToRight.

<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
        <TextBlock Text="This is a TextBlock"></TextBlock>
        <Button Content="Button 1"></Button>
        <Button Content="Button 2"></Button>
        <Button Content="Button 3"></Button>
        <Button Content="Button 4"></Button>
        <Button Content="Button 5"></Button>
</StackPanel>

Preview

 

 

Example: Changing HorizontalAlignment property of child elements in a StackPanel

By default, the HorizonatalAlignment property is Stretch for all the child elements. That's why a child element takes the full width of the Stackpanel. We can change the HorizontalAlignment to Right, Left, Center or Stretch.

<StackPanel>
        <TextBlock Text="This is a TextBlock"></TextBlock>
        <Button Content="Button 1" HorizontalAlignment="Right"></Button>
        <Button Content="Button 2" HorizontalAlignment="Left"></Button>
        <Button Content="Button 3" HorizontalAlignment="Center"></Button>
        <Button Content="Button 4" HorizontalAlignment="Stretch"></Button>
        <Button Content="Button 5"></Button>
</StackPanel>

Preview

 

  

Example: Changing VerticalAlignment property of Child Elements in StackPanel with Horizontal Orientation

<StackPanel Orientation="Horizontal">
        <TextBlock Text="This is a TextBlock"></TextBlock>
        <Button Content="Button 1" VerticalAlignment="Bottom"></Button>
        <Button Content="Button 2" VerticalAlignment="Top"></Button>
        <Button Content="Button 3" VerticalAlignment="Center"></Button>
        <Button Content="Button 4" VerticalAlignment="Stretch"></Button>
        <Button Content="Button 5"></Button>
</StackPanel>

Preview

 

Important Point

Setting the HorizontalAlignment property of a Child Element in a StackPanel with Horizontal Orientation is meaningless because each element gets the exact amount of space they actually need and there is no space to move an element hozrizontally. Setting the VerticalAlignment property of a child element in a StackPanel with Vertical Orientation is also meaningless.

 

Example: Setting Margin Property in StackPanel

Using the margin property, we can set the space between the StackPanel's edge and Window/Container. Here, We set Margin="16" for all the four sides. We can also set various margins for each side (Margin="left,top,right,bottom").

<StackPanel Margin="16">
        <TextBlock Text="This is a TextBlock" Background="BurlyWood"></TextBlock>
        <Button Content="Button 1"></Button>
        <Button Content="Button 2"></Button>
        <Button Content="Button 3"></Button>
        <Button Content="Button 4"></Button>
        <Button Content="Button 5"></Button>
</StackPanel>

Preview

 

 

Example: Nested StackPanel

We can use another StackPanel in Stackpanel. For showing this example, I have created a mini application in which the orientation of the outer Stackpanel is Vertical (the default) and the Inner StackPanel has Horizontal Orientation and HorizontalAlignment is Center.

<StackPanel Margin="30">
        <TextBlock Text="Select your Favorite Programming language" FontSize="14"></TextBlock>
        <RadioButton Margin="10,10,0,0">C#</RadioButton>
        <RadioButton Margin="10,10,0,0">Java</RadioButton>
        <RadioButton Margin="10,10,0,0">VB.Net</RadioButton>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Content="Vote" Margin="5" MinWidth="60"></Button>
            <Button Content="Exit" Margin="5" MinWidth="60"></Button>
        </StackPanel>
</StackPanel>

Preview

 

I hope you like it. Thanks.