C H A P T E R 3

■ ■ ■

39 Layout Management in
Silverlight 3
The previous chapter provided an overview of Visual Studio 2008, one of the primary tools used in
developing Silverlight applications. In this chapter, you are going to start to dive into some Silverlight 3
development by looking at the layout management controls.
As you have learned, Silverlight applications consist of a number of Silverlight objects that are
defined by XAML. Layout management involves describing the way that these objects are arranged in
your application. Silverlight 3 includes five layout management controls: Canvas, StackPanel, Grid,
WrapPanel, and DockPanel. You will take a look at each of these in-depth. By the end of this chapter, you
should have a good understanding of when to use which layout control.
Layout Management
Silverlight provides a very flexible layout management system that lets you specify how controls will
appear in your Silverlight application. You can use a static layout as well as a liquid layout that allows
your layout to automatically adjust as your Silverlight application is resized in the browser.
Each of the five layout controls provided in Silverlight 3 has its advantages and disadvantages, as
summarized in Table 3-1.
Let’s begin by looking at the most basic layout control: the Canvas panel.
Table 3-1. Layout Control Pros and Cons
Control Description Pros Cons
Canvas Based on absolute
position of controls.
Very simple layout. Requires that every control have a
Canvas.Top and Canvas.Left
property attached to define its

complex at times. Nesting Grid
components can be confusing.
WrapPanel Based on horizontal
or vertical “stacks”
of controls
wrapping to a
second row or
column when width
or height is reached.

Very similar to the
StackPanel, except the
WrapPanel automatically
wraps items to a second
row or column so it is
ideal for layouts
containing an unknown
number of items.
Limited control of layout as
wrapping is automatic when items
reach maximum width or height.
DockPanel Layout is based on
“docked” horizontal
or vertical panels.

Provides an easy way to
create basic layout,
consuming the entire
application space in
vertical or horizontal

<UserControl x:Class="Ch3_CanvasPanel.MainPage"
xmlns="
xmlns:x="
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">

<Canvas Background="Green" Width="300" Height="200">
</Canvas>

</Grid>
</UserControl>
3. At this point, your Silverlight application doesn’t look that exciting. It contains
only a single green rectangle positioned at the very center of your application,
as shown in Figure 3-2.

Figure 3-2. Default Canvas with an empty background
4. Let’s add a button to this Canvas panel. Add the following code to place the
button, which has the label Button1, a Width property of 100, and a Height
property of 30. (The Button control is covered in detail in Chapter 4.)
CHAPTER 3 ■ LAYOUT MANAGEMENT IN SILVERLIGHT 3

42

<UserControl x:Class="Ch3_CanvasPanel.MainPage"
xmlns="
xmlns:x="
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">

<Canvas Background="Green" Width="300" Height="200">

browser. The output is shown in Figure 3-5.

Figure 3-5. The canvas and two buttons as seen in a browser
CHAPTER 3 ■ LAYOUT MANAGEMENT IN SILVERLIGHT 3

44

Filling the Entire Browser Window with Your Application
By default, in a new Silverlight project, the root UserControl object is set to a width of 400 and a height of
300. In some cases, you may wish to set the width and height of your Silverlight application within the
browser. At other times, however, you will want your Silverlight application to take up the entire window of
your browser, and to resize as the browser is resized. This is done very easily within Silverlight. When you
wish for the width and height to be set to 100%, simply omit the element’s Height and Width attributes.
As an example, the following source has been adjusted for the Canvas panel and the Silverlight
application to take up the entire browser:
<UserControl x:Class="Ch3_CanvasPanel.MainPage"
xmlns="
xmlns:x="
<Grid x:Name="LayoutRoot" Background="White">

<Canvas Background="Green">
</Canvas>

</Grid>
</UserControl>
With the omission of the Height and Width declarations for UserControl and Canvas, when you run
the Silverlight application, you will see that the canvas takes up 100% of the browser window, as shown
in Figure 3-6. It will resize as the browser resizes.

Figure 3-6. Silverlight application taking up the entire browser

46

<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<Button Width="100" Height="30" Content="Button 1"></Button>
<Button Width="100" Height="30" Content="Button 2"></Button>
<Button Width="100" Height="30" Content="Button 3"></Button>
</StackPanel>
</Grid>
</UserControl>
3. At this point, your application should appear as shown in Figure 3-8. Notice
that the buttons are stacked vertically. This is because the default stacking
orientation for the StackPanel control is vertical.

Figure 3-8. The StackPanel control with its default orientation
4. Change the orientation of the StackPanel control to be horizontal by setting
the Orientation property to Horizontal, as follows:
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Horizontal" >
<Button Width="100" Height="30" Content="Button 1"></Button>
<Button Width="100" Height="30" Content="Button 2"></Button>
<Button Width="100" Height="30" Content="Button 3"></Button>
</StackPanel>
</Grid>
5. With this simple change, the buttons are now stacked horizontally, as shown in
Figure 3-9.

Figure 3-9. The StackPanel control with horizontal orientation
6. Notice that all the buttons are touching each other, which is unattractive. You
can easily space them out by using their Margin property. In addition, you can

2. In the MainPage.xaml file, add the following items:
CHAPTER 3 ■ LAYOUT MANAGEMENT IN SILVERLIGHT 3

48

• A StackPanel control to the root Grid with its Orientation property set to
Horizontal and the HorizontalAlignment property set to Center.
• Within that StackPanel, add two buttons with the labels Button Left and
Button Right.
• In between the two buttons, add another StackPanel with Orientation set
to Vertical and VerticalAlignment set to Center.
• Within that nested StackPanel, include three buttons with the labels Button
Middle 1, Button Middle 2, and Button Middle 3.
• All buttons should have a Margin property set to 5, and should have Height
set to 30 and Width set to 100.
3. Here is what the updated source looks like:
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Width="100" Height="30" Content="Button Left" Margin="5" />
<StackPanel VerticalAlignment="Center">
<Button Width="100" Height="30" Content="Button Middle 1"
Margin="5"></Button>
<Button Width="100" Height="30" Content="Button Middle 2"
Margin="5"></Button>
<Button Width="100" Height="30" Content="Button Middle 3"
Margin="5"></Button>
</StackPanel>
<Button Width="100" Height="30" Content="Button Right"
Margin="5"></Button>
</StackPanel>