Using the Silverlight 2 Xaml StackPanel Element

The next advanced layout element in Xaml is the stack panel. The StackPanel lays out its children either horizontally or vertically without having to define the exact location in the visual tree in Xaml. Take the following listing example of a stack panel.

<StackPanel Width="200" Height="200" Orientation="Vertical" Background="Gray">
<Rectangle Width="50" Height="50" Fill="Green"></Rectangle>
<Rectangle Width="50" Height="50" Fill="Blue"></Rectangle>
</StackPanel>

We can see in this example that we set the size and orientation of the StackPanel. The StackPanel will then start at the root X, Y (0,0) position of its parent by default. Children are then rendered vertically in the panel. Now look at this example StackPanel:

<StackPanel Width="200" Height="200" Orientation="Horizontal" Canvas.Top="200" Background="Gray">
<Rectangle Width="50" Height="50" Fill="Green"></Rectangle>
<Rectangle Width="50" Height="50" Fill="Blue"></Rectangle>
</StackPanel>

In the example we see that the Orientation of the StackPanel is set to Horizontal so its children will be laid out accordingly. When we put both of these StackPanel into some Xaml this is what we get. We can see the first one rendered vertically and the second horizontally.

Using advanced layout, it is easier to create list box functionality or recordsets and using other structures like templates and the like you can pull records data bind and then use StackPanels too easily lay out all the items you need.