Using StackPanel Silverlight Control


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:

1.gif
 
If we set the Orientation property to horizontal, we would find the following layout: 

2.gif

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:

3.gif
 
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>

4.gif
 
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:

5.gif
 
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:

6.gif
 
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:

7.gif
 
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:

8.gif
 
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:

9.gif
 
References


Silverlight Books


Additional Resources

erver'>
Up Next
    Ebook Download
    View all
    Learn
    View all