Introduction
The StackPanel control is a simple layout panel that arranges content into a single line that can be oriented horizontally or vertically (the default).The StackPanel control allow us to stack objects one on top of the other, or next to each other.
Overview
One convenience of a StackPanel is that you do not have to provide the position of the objects held by a StackPanel, they are positioned relative to the object declared earlier in the Stack.
StackPanel Orientation Property
We could set the Orientation property of the StackPanel to be Horizontal or Vertical (which is the default).
If we set the StackPanel Orientation to Vertical, whatever controls we place inside our stack panel they will be stacked vertically.
For example, we could use the StackPanel to vertically arrange four buttons on our page using XAML markup like below:
<StackPanel Orientation="Vertical"
>
<Button Content="First"></Button>
<Button Content="Second"></Button>
<Button Content="Third"></Button>
<Button Content="Fourth"></Button>
</StackPanel>
The result will be:
If we set the Orientation property to horizontal, we would find the following layout:
When no dimensions are specified, the button controls takes the whole available space, so let's define the button control dimensions like below:
<StackPanel Orientation="Horizontal">
<Button Content="First" Width="100" Height="50"></Button>
<Button Content="Second" Width="100" Height="50"></Button>
<Button Content="Third" Width="100" Height="50"></Button>
<Button Content="Fourth" Width="100" Height="50"></Button>
</StackPanel>
The result will be:
Silverlight StackPanel Alignment
The default value of the HorizontalAlignment and VerticalAlignment properties is Stretched. The controls are centered and the panel takes the width of its container control.
If we set the HorizontalAlignment/VerticalAlignment property to left/top, right/bottom, or center the StackPanel takes the largest width/Height of its child controls.
In the case of the orientation property is set to Horizontal and HorizontalAlignment is set to Center, The StackPanel width will equal the total width of its child controls like below:
<StackPanel Orientation="Horizontal" Background="BlueViolet" HorizontalAlignment="Center" >
<Button Content="First" Width="100" Height="50"></Button>
<Button Content="Second" Width="100" Height="50"></Button>
<Button Content="Third" Width="100" Height="50"></Button>
<Button Content="Fourth" Width="100" Height="50"></Button>
</StackPanel>
In the case of the orientation Property is set to Vertical and HorizontalAlignment is set to Center, The StackPanel width will equal the largest child control width like below:
In the case of the orientation Property is set to Horizontal and VerticalAlignment is set to Center, The StackPanel Height will equal the largest child control Height like below:
Positioning Elements within the StackPanel Layout Control
HorizontalAlignment and VerticalAlignment Properties
The VerticalAlignment property of the elements for the horizontal StackPanel and the HorizontalAlignment property for the vertical StackPanel have a big effect on elements positions.
The following example shows how to apply the VerticalAlignment property to button elements within a horizontal StackPanel:
<StackPanel Orientation="Horizontal" Background="BlueViolet">
<Button Content="Third" Width="100" Height="50" VerticalAlignment="Top"></Button>
<Button Content="First" Width="100" Height="50" VerticalAlignment="Center"></Button>
<Button Content="Second" VerticalAlignment="Stretch"></Button>
<Button Content="Fourth" Width="100" Height="50" VerticalAlignment="Bottom"
></Button>
</StackPanel>
The preceding code yields a layout similar to the following image:
The following example shows how to apply the HorizontalAlignment property to button elements within a Vertical StackPanel:
<StackPanel Orientation="Vertical" Background="BlueViolet">
<Button Content="Third" Width="100" Height="50" HorizontalAlignment="Left"></Button>
<Button Content="First" Width="100" Height="50" HorizontalAlignment="Center"></Button>
<Button Content="Second" HorizontalAlignment="Stretch"></Button>
<Button Content="Fourth" Width="100" Height="50" HorizontalAlignment="Right"
></Button>
</StackPanel>
The preceding code yields a layout similar to the following image:
The Margin property
The Margin property describes the distance between an element and its child or peers. Margin values can be uniform, by using syntax like Margin="20".
With this syntax, a uniform Margin of 20 device independent pixels would be applied to the element. Margin values can also take the form of four distinct values, each value describing a distinct margin to apply to the left, top, right, and bottom (in that order), like Margin="0,10,5,25". Proper use of the Margin property enables very fine control of an element's rendering position and the rendering position of its neighbor elements and children.
The following example shows how to apply uniform margins around a group of Button elements. The Button elements are spaced evenly with a ten-pixel margin buffer in each direction.
<StackPanel Orientation="Vertical" Background="BlueViolet">
<Button Content="Third" Width="100" Height="50" Margin="10"></Button>
<Button Content="First" Width="100" Height="50" Margin="10"></Button>
<Button Content="Second" Width="100" Height="50" Margin="10"></Button>
<Button Content="Fourth" Width="100" Height="50" Margin="10"></Button>
</StackPanel>
The result will be:
References
Silverlight Books
Additional Resources