Update: The source codes and the information in this article are compatible with Silverlight 2 RTW.
Introduction
In this article we are going to take a look at one of the layout controls in Silverlight 2 Beta 1 – the Stack Panel. The name is not a coincidence. This panel behaves like a Stack. The controls are ordered one after another. The default order direction is vertical, but it can be changed to horizontal too. Though this is just a panel after all and we will use it for placing and ordering our controls in the Silverlight player.
Overview
So, this is the Stack Panel:
<StackPanel x:Name="Layout"></StackPanel>
Let’s fill it with some controls.
<StackPanel x:Name="Layout" Background="Black">
<Button x:Name="Button1" Content="Click me!"></Button>
<Button x:Name="Button2" Content="And me!" ></Button>
</StackPanel>
Let’s take a look now:
The dimensions of our user control are 300x200 pixels and we can see that the Stack Panel has taken all of them. We haven’t set the Width property of any of the buttons yet. So why are they stretched up to 300 pixels in width? This is because of the “stack”. The element fills its place and then comes the other and the other and so on. When no dimensions are specified, the control takes the whole available space. The same happens if the Orientation property is set to Horizontal:
<StackPanel x:Name="Layout" Background="Black" Orientation="Horizontal">
<Button x:Name="Button1" Content="Click me!"></Button>
<Button x:Name="Button2" Content="And me!" ></Button>
</StackPanel>
In this case the buttons are stretched in their height. We can easily set the height and the width of the buttons so they look normal again. And don’t worry even if you shrink the buttons - the ordering will preserve.
<StackPanel x:Name="Layout" Background="Black" Orientation="Horizontal">
<Button x:Name="Button1" Content="Click me!" Width="60"
Height="30" />
<Button x:Name="Button2" Content="And me!" Width="60" Height="30" />
</StackPanel>
don’t be surprised:
It’s analogical with the horizontal orientation.
We can play a bit with the alignment of the buttons using their VerticalAlignment property for the horizontal and their HorizontalAlignment property for the vertical orientation:
<StackPanel x:Name="Layout" Background="Black" Orientation="Horizontal">
<Button x:Name="Button1" Content="Click me!" Width="60" Height="30" VerticalAlignment="Top" />
<Button x:Name="Button2" Content="And me!" Width="60" Height="30" />
<Button x:Name="Button3" Content="Me not!" Width="60" Height="30" VerticalAlignment="Bottom" />
</StackPanel>
and it should look like that:
Same is with the vertical orientation - you can try it by yourself. Note that for vertical orientation the vertical alignment of the controls, respectively for horizontal orientation the horizontal alignment won’t work. Why’s that? Imagine the Stack Panel is a OneColumn/OneRow table where height/width of the cell corresponds to the height/width of the control in it.
See the following pictures for more clarity:
Let’s take a look at the HorizontalAlignment property of the StackPanel. The default value is Stretched. The controls are centered and the panel takes the entire UserControl.
<StackPanel x:Name="Layout" Background="Black" Orientation="Vertical">
<Button x:Name="Button1" Content="Click me!" Width="60"
Height="30" />
<Button x:Name="Button2" Content="And me!" Width="60" Height="30" />
<Button x:Name="Button3" Content="Me not!" Width="60" Height="30" />
</StackPanel>
If we set the HorizontalAlignment to Right, Left or Center the panel takes the width/height (depends on the orientation) of the longest control and is aligned properly.
<StackPanel x:Name="Layout" Background="Black" Orientation="Vertical" HorizontalAlignment="Right">
<Button x:Name="Button1" Content="Click me!" Width="60"
Height="30" />
<Button x:Name="Button2" Content="And me!" Width="80" Height="30" />
<Button x:Name="Button3" Content="Me not!" Width="60" Height="30" />
</StackPanel>
The same applies to the horizontal oriented panel by using the VerticalAlignment property.
Conclusion
This article is just a brief description of the key features of the StackPanel control. It targets the developer who has just started with the new Silverlight 2 Beta 1 controls. Any comments are welcomed.