Wahlin on .NET

Using the StackPanel Control

Dan walks through one of Silverlight's most flexible and easy to use layout controls.

• By Dan Wahlin
• 07/21/2008

In this article, I'll provide more details about the StackPanel control and show why it's one of the most flexible layout controls available in Silverlight.

Any time I learn a new technology, I try to make correlations between new controls and HTML or ASP.NET elements/controls that I already know well since it simplifies the learning process. The StackPanel control doesn't directly correlate with any of the container controls available in HTML (although multiple div tags combined with CSS can provide similar functionality), but it's similar to the ASP.NET DataList control in some ways. With the DataList, you can display a list of items vertically or horizontally by changing the RepeatDirection property. Although the StackPanel control doesn't have a RepeatDirection property, it does provide an Orientation property that performs the same overall purpose. By changing the Orientation to Horizontal (Vertical is the default), child controls contained within a StackPanel control will automatically be arranged horizontally. Spacing between controls can be controlled by setting each control's Margin property.

It's important to note that if the child controls don't fit in the parent StackPanel control and flow outside of the container's boundaries, they'll be chopped off in the interface. Unfortunately, th StackPanel control doesn't automatically wrap controls like the ASP.NET DataList. If you need to wrap child controls that flow outside of the container's boundaries,you can use one of several WrapPanel controls for Silverlight that have been built by different developers. One of the custom WrapPanel controls that I've used can be found here.

The StackPanel control is simple to use and provides the ultimate flexibility when it comes to arranging controls because it doesn't worry at all about absolute positioning. Since it doesn't worry about x or y coordinates, it provides one of the best solutions for situations where users can switch to full-screen mode or change the overall size of the user interface. Here's an example of using the StackPanel to organize several buttons horizontally:

<StackPanel x:Name="spButtons" Orientation="Horizontal" 
  Background="LightGray" Height="100" Width="400"
    Margin="10" >
    <Button x:Name="btn3" Content="Button 3" 
       Height="20" Margin="10" />
    <Button x:Name="btn4" Content="Button 4" 
       Height="20" Margin="10" />
    <Button x:Name="btn5" Content="Button 5"  
       Height="20" Margin="10" />
    <Button x:Name="btn6" Content="Button 6"  
       Height="20" Margin="10" />
    <Button x:Name="btn7" Content="Button 7"  
       Height="20" Margin="10" />
    <!--
        Won't wrap properly since it flows 
           outside of the container
        <Button x:Name="btn8" Content="Button 8" 
           Height="30" Margin="10" />
    -->
</StackPanel>

This example gives the StackPanel control a name of spButtons, sets the Orientation to Horizontal and Background to LightGray. The container's dimensions are set to 400 for the Width and by 100 for the Height. Omitting the Height and Width properties would allow the control to fill its parent container. Each Button within the StackPanel parent container has a Margin of 10 to space the controls equally in the container. Looking through the code, you'll notice that the Button named btn8 is commented out since it would flow outside of the StackPanel control's boundaries and be chopped off in the user interface. Figure 1 shows an example of what the StackPanel looks like when rendered by Silverlight.

StackPanel controls can be nested inside of each other to create extremely flexible layouts quickly and easily without worrying about child control positioning. The following code shows how two StackPanel controls can be nested in a parent StackPanel. The parent StackPanel stacks the child StackPanel controls vertically (which is the default so the Orientation property could be omitted in this example). Each of the nested StackPanel controls stacks their content horizontally.

<StackPanel Orientation="Vertical">
    <StackPanel Orientation="Horizontal">
        <Button x:Name="btnShrink" Content="Shrink" 
          Height="20" 
          Margin="10" Click="btnShrink_Click" />
        <Button x:Name="btnGrow" Content="Grow"
          Height="20"  
          Margin="10" Click="btnGrow_Click" />
    </StackPanel>
    <StackPanel x:Name="spButtons" Orientation="Horizontal" 
      Background="LightGray" Height="100" Width="400" 
         Margin="10" >
        <Button x:Name="btn3" Content="Button 3" Height="20" 
          Margin="10" />
        <Button x:Name="btn4" Content="Button 4" Height="20" 
          Margin="10" />
        <Button x:Name="btn5" Content="Button 5" Height="20" 
          Margin="10" />
        <Button x:Name="btn6" Content="Button 6" Height="20" 
          Margin="10" />
        <Button x:Name="btn7" Content="Button 7" Height="20" 
          Margin="10" />
        <!--
            Won't wrap properly
            <Button x:Name="btn8" Content="Button 8" 
          Height="30"  Margin="10" />
        -->
    </StackPanel>
</StackPanel>

The output generated by the StackPanel controls is shown in Figure 2.

The StackPanel can also be used with other Silverlight controls such as Grid and Canvas as needed.

In the next article I'll discuss how StackPanel containers can be animated to create clipping effects quickly with a minimal amount of coding on your part.