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.