Silverlight Layout Panels!

In any application, the user interface plays a major role. The basic thing which is very important to know is how to layout your user interfaces. Controlling a layout is the biggest challenge for developers. Having good knowledge of the available layout options and the equipments always makes you comfortable.
Position of the controls, order of placing them and the size of controls plays a major role in usability of your application. Good interfaces will be very simple and will just do what it intends. In an attempt to improve the layout options in silverlight, Microsoft has provided various panels.
  • StackPanel
  • GridPanel
  • CanvasPanel
  • Once you understand these three panels, it will be easy to design a good layout. In next article, let us see wrap panel, dock panel and creating your own custom panels. Let's start with the StackPanel control.

As the name implies, a StackPanel is a control which stacks the elements inside it (children) either horizontally or vertically. In simple terms, if you add your controls inside a StackPanel, the controls will appear one after the other, vertically by default. The StackPanel has a property called Orientation. This property can be used to instruct the panel to stack the items horizontally too. The below skeletons show the structure.

Below example shows how to use stack panel with code.

StackPanel with Vertical orientation (Default)

<Button Content="This is your button" />
<TextBlock>This is a text block</TextBlock>
<HyperlinkButton Content="This is a Hyperlink" />
<CheckBox Content="Checkbox" />
<RadioButton Content="Radiobutton"/>

The output will be

StackPanel with Horizontal orientation

<StackPanel Orientation="Horizontal">
<Button Content="This is your button" />
<TextBlock>This is a text block</TextBlock>
<HyperlinkButton Content="This is a Hyperlink" />
<CheckBox Content="Checkbox" />
<RadioButton Content="Radiobutton"/>

The output will be

One thing to note here is; when the orientation is Vertical, the control sets the available height to infinity. Also, when the orientation is Horizontal, the control sets the available width to infinity.
Additionally, you can also set height and width for the Stackpanel. If no width is set, it will set its width automatically based on that of its widest child. And similarly, if no height is set, it will set its height automatically based on that of its highest child.

StackPanel can be used when you have a requirement such as to create a navigation bar for your application or to arrange controls in a stack.


This is one of the widely used panels to arrange the elements. This is the most powerful panel in the layout system allowing you to create rows and columns and place your controls within them. This reminds me of a table which I used in HTML for positioning the controls.

You will find various properties like Cellpadding, Cellspacing, Rowspan and Colspan in Gridpanel which you might have used when working with html tables.

Here is the basic structure of a Gridpanel.

Below example shows how to use grid panel with Code.

<Grid Background="LightYellow" ShowGridLines="True" Height="260" Width="490">
<RowDefinition />
<RowDefinition />
<ColumnDefinition />
<ColumnDefinition />
<TextBlock Text="Row 0 Cell 0" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="Row 0 Cell 1" Grid.Row="0" Grid.Column="1" />
<TextBlock Text="Row 1 Cell 0" Grid.Row="1" Grid.Column="0" />
<TextBlock Text="Row 1 Cell 1" Grid.Row="1" Grid.Column="1" />

The output will be

In the above example, we have a grid with two rows and two columns. The RowDefinition and ColumnDefinition actually define the number of rows and columns. We have four textblocks outside the definition which supplies the text value and positions them in the table by Grid.Row and Grid.Column properties.

If you do not specify the row and column for a child control, it will be placed in Row 0 & Column 0 of the grid and overlaps any item if exists. Also, one thing to mention here is; Silverlight allows nesting the controls to a great extent. You can place a StackPanel inside a GridPanel cell or vice versa. So, take your time and play with these options to see how it behaves with different combination.


This is one of the rarely used panels to arrange the elements. Suppose you don’t want to place the items in a stack or a grid but, if you want to explicitly supply the co-ordinates and want to arrange your controls, you can use this canvas panel. It is like you position your items on an empty canvas manually. Elements contained in this panel are by default relative to the top left corner of the panel starting from 0,0.
You can use the Top and Left properties to position the items inside the CanvasPanel. Let us see an example.

<TextBlock Canvas.Left="50" Canvas.Top="25" Text="Text Block 1" />
<TextBlock Canvas.Left="100" Canvas.Top="50" Text="Text Block 2" />
<TextBlock Canvas.Left="150" Canvas.Top="75" Text="Text Block 3" />
<TextBlock Canvas.Left="200" Canvas.Top="100" Text="Text Block 4" />
<TextBlock Canvas.Left="250" Canvas.Top="125" Text="Text Block 5" />
<TextBlock Canvas.Left="300" Canvas.Top="150" Text="Text Block 6" />
<TextBlock Canvas.Left="350" Canvas.Top="175" Text="Text Block 7" />
<TextBlock Canvas.Left="400" Canvas.Top="200" Text="Text Block 8" />

The output will be

In the above example you can see that we have absolutely positioned the items. CanvasPanel can be helpful when there is an clear need to position to control in the screen at a particular place. While it gives you flexibility to position absolutely, I still do not recommend you to use it unless there is a definite need. Using it without need can make your life difficult!.

Let us see other panels in next article.

Popular posts from this blog

Facebook Javascript API : Feed and Share Dialog for Beginners

Developing a Link Chopper using C# and API in 1 Hour

WCF: Operation Overloading inside Service Contracts using C#