Using Silverlight StackPanel Layout Control

Basem_gomaa
Posted by in Silverlight category on for Beginner level | Views : 25944 red flag
Rating: 5 out of 5  
 2 vote(s)

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

 StackPanel to vertically arrange four buttons

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 bellow:

<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 Stretch. 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 bellow:

<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 bellow:

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 bellow:

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 Layout Controls

Silverlight Books

Silverlight 4 Lab Intensive Skills Training

Professional Visual Studio 2010 (Paperback)

C Sharp 4.0 in a Nutshell

Additional Resources

Silverlight Bokks

See Also

Silverlight Grid Control

Page copy protected against web site content infringement by Copyscape

About the Author

Basem_gomaa
Full Name: Bassem Gomaa
Member Level: Starter
Member Status: Member
Member Since: 5/2/2010 1:13:58 AM
Country: Egypt
Bassem Gomaa

Bassem Worked on approximately 16 project using many technologies like ASP.NET, Silverlight, WPF, WWF, SSRS, SSAS, Web Services, Sql Server Database, Oracle T-SQL , and ADO.NET. Bassem worked as a senior .net software developer for several companies like UIC Branch of Elsewedy Cables, TEAComputer Full Service Information Technology Company, Hindawi Online Publishing Coorportation, and EgyptNetwok Software Development Outsourcing Company.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)