October 19th, 2009

Using the Stack Panel in Blend

Silverlight Blend Tutorials, Working with Silverlight, by Gavin Wignall.

This post is part of a string of posts found here: Learn Blend in a Month.

The ‘StackPanel’ element can be used to group other elements up, including other ‘StackPanels’. A ‘StackPanel’ has properties like any other element, it can be moved around, have a set height and width, have transforms including projection applied, have a background color, have its Opacity set and even have Pixel Shaders applied. All items inside that ‘StackPanel’ will be affected by these properties as a unit.

To read more about how ‘StackPanel’ properties effect their containing elements please read the previous post about the ‘Canvas’ element here.

To draw a ‘StackPanel’, first go to your tool panel, click and hold on the Grid (shown by default) icon and select ‘StackPanel’. Now draw the area you want to have as a ‘StackPanel’.

Elements inside a StackPanel are stacked one after the other either horizontally or vertically. To switch between horizontal and vertical, go to the ‘Properties’ tab and scroll down to the ‘Layout’ section and change the drop down selection titled ‘Orientation’. You can also set the ‘Margin’ and ‘Alignment’ values of each element to refine the spacing and positioning between them.

A ‘Margin’ consists of four values:

  1. Distance from the top of the containing StackPanel
  2. Distance from the left of the containing StackPanel
  3. Distance from the bottom of the containing StackPanel
  4. Distance from the right of the containing StackPanel

Horizontal Alignment’ and ‘Vertical Alignment’ each have 4 values:

  1. Align Left/Top
  2. Align Centre
  3. Align Right/Bottom
  4. Stretch

Alignment can only be set on the opposite of the StackPanels Orientation, for example if your StackPanel is set to horizontal then you cannot set individual elements inside to be left or right aligned.

StackPanels can also have their ‘Height’ and ‘Width’ values set to ‘Auto’. This will allow the StackPanel to automatically grow with the content inside it – this can be helpful later on when wanting to dynamically retrieve the size of changing content or if you are dynamically adding elements inside or changing their size.

Grouping elements into a ‘StackPanel’ is a good thing to do if you want elements on your page to automatically be stacked one after the other.

There is no limit to having multiple StackPanels inside StackPanels.

To read about other container types try out these tutorials:

Back Top

Responses to “Using the Stack Panel in Blend”

  1. No comments yet.
  1. Learn Expression Blend in a Month! » Silverlight Buzz (,October 21, 2009)

    [...] Using the Stack Panel in Blend [...]

Leave a Reply

Back Top