Wahlin on .NET

Using Silverlight 2 Layout Controls

Dan walks through how to arrange Silverlight controls on an interface using Grid, Canvas and StackPanel.

• By Dan Wahlin
• 07/09/2008

If you're already familiar with the layout options available in HTML, you'll be happy to know that Silverlight 2 provides similar controls that can be used to arrange user interface objects in a flexible manner.

Key layout controls available in Silverlight 2 include Grid, Canvas and StackPanel. A tab control is also available but I'll save that for a future article. The Grid control acts much like the standard HTML table tag, although it allows rows and columns to be defined in a less verbose manner. The Canvas control can be compared to an HTML div tag while the StackPanel can be used to stack controls vertically or horizontally.

This article will introduce you to these controls and see how they can be used to manage UI layout in XAML files.

Using the Grid Control
Silverlight's Grid control allows rows and columns to be defined using RowDefinitions and ColumnDefinitions tags. While the HTML TABLE tag requires TR and TD tags to be used for every row and column within a table, child controls placed within a Grid control can be positioned using attributes resulting in much less markup compared to HTML. An example of a simple Grid that contains 2 rows and 2 columns is shown in Listing 1.

The Grid control's rows are defined before any controls are put into the grid by using the Grid.RowDefinitions XAML tag. The height of each row can be defined on the RowDefinition tag if desired. The columns are defined using the Grid.ColumnDefinitions tag which contains ColumnDefinition tags. This example assigns the first column to a width of 25 percent and the second column to 75 percent. Notice that a decimal value is used along with the * character as opposed to the % character used in HTML tags.

Child controls placed in the grid are assigned to rows and columns using the Grid.Row and Grid.Column attributes. The first TextBlock control is placed in the first row (row 0) and the first column (column 0) while the associated TextBox is placed in row 1 and column 1. By using attributes to assign controls to rows and columns, the amount of markup is significantly reduced -- especially compared to HTML tables.

Using the Canvas Control
Some applications require child controls to be absolutely positioned so that they're displayed properly. Silverlight's Canvas control can be used for this purpose. In a previous article, I wrote about the Canvas control and showed how it could be used in Silverlight 1 applications to position child controls. The Canvas control acts much like the HTML DIV element in many regards since it can have child controls nested inside of it. Children can be positioned absolutely using Canvas.Left and Canvas.Top attached properties as shown in Listing 2.

While the Canvas control isn't as flexible as the Grid or StackPanel controls when it comes to re-sizing user interfaces, it can certainly play a role in situations where child controls need to be positioned in a specific way.

Using the StackPanel Control
The StackPanel control provides the ultimate in control layout flexibility on a user interface. By using the control you can stack controls on top of each other vertically or display them horizontally. Child controls will automatically adjust their positions if the user interface size changes (such as when a user switches to full-screen mode). The StackPanel's Orientation property can be used to control how child controls are arranged.

An example of using the StackPanel to arrange controls horizontally is shown in Listing 3. Each control can be moved closer or further from other controls by setting the respective control's Margin property. The Margin property allows the Left, Top, Right and Bottom margin values to be set.

An example of stacking controls vertically (the default orientation of the control) is shown in Listing 4.

In this article, you've seen how the Grid, Canvas and StackPanel controls can be used to arrange Silverlight controls on an interface. While I've only scratched the surface of what the controls can do, this information should help get you started with arranging controls in a Silverlight application and help you understand the different options that are available.