StackPanel in WPF

StackPanel places child elements in vertical or horizontal stack. It is one of the popular panel because of its simplicity and usefulness. By Default, StackPanel's child element grows from top of the panel to the bottom i.e. 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 layout using Stackpanel.

Example: Creating Simple Layout using StackPanel.

In this Example, I have added one TextBlock and 5 Buttons in StackPanel. By default, StackPanel arranges child elements from top to bottom. All Elements inside the StackPanel Streched to the full 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 StackPanel to horizontal

In this Example, We arrange Child Elements of StackPanel horizontally by setting Orienatation property value as Horizontal. Now Elements are streched to the full height of 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 StackPanel

On setting FlowDirection property RightToLeft of a StackPanel(with Horizontal orientation), stacking of child elements starts from Right to Left . Default behaviour is from 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 StackPanel

By Default, HorizonatalAlignment propert is Stretch for all the Child Elements that's why Child element takes the full width of the Stackpanel. We can change HorizontalAlignment to Right,Left,Center,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 HorizontalAlignment property of a Child Element in a StackPanel with Horizontal Orientation is meaningless because Each Element get the exact amount of space they actually need and there is no space to move element Hozrizontally. Setting VerticalAlignment property of 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 different margin 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 Orientation of Outer Stackpanel is Vertical(default) and Inner Stackpanel is with Horizontal Orientation and  HorizontalAlignment to 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:

That's All.Hope you like it.

Thanks.

[Download Source Code from Google Drive]