SilverLight Layouts are used to arrange controls, the silver light supports three types of layouts

  • Grid
  • Canvas
  • Stack panel


Grid Layout

The grid container the Microsoft designed based on HTML table, depending on the requirement we can arrange collection of controls in the multiple rows and in the multiple columns.

Example:- open new silver light application

Go to XAML mode

In the grid tag


<Grid X: Name = “layout Root” Background = “white”>

<Grid. Colum Definitions>

<Colum definition width =  “100” > </column Definition>

<column definition width = “100”> </column definition>

<column definition width = “100”> </column definition>

</grid.column definitions>


<Row definition Height = “100”> </Row definition>

<Row definition Height = “100”> </Row definition>

<Row definition height = “100”> </Row definition>

</Grid. Row definitions>

<Button X:Name= “b1” Height = “50” width = “50” Grid.Row = “0” Grid. Colum = “1”>


<button Grid.Row = “2” Grid. Column = “1” content = “three”>




Canvas Layout

This layout is used to arrange collection of controls by specifying absolute position using left and top properties, this layout same like c# .net form container

EX:- Open new silverlight application

Go to xaml mode

Remove the grid tag and type the following


<Text block x: Name = “t1” Text = “Welcom” Fontsize = “58” canvas.left = “100” canvas.Top = “100”>

</Text block>

<ellipse X:name = “e1” Height = “120” width = “300” stroke = “green” stoke thickness = “10” canvas. Left = “60” canvas.Top = “50”>







Text Block

This control is used to display read only data, this control like a label control in the previous technologies

  • “X:Name” property used to decide the control name
  • Using “Text” property we can input the data
  • “Font size” property gives font size to the text block control data
  • Using ellipse tag we can create ellipse control
  • Height, weight properties setting control size
  • Stroke property gives border color
  • Fill property gives background color
  • Stroke thickness gives border width


Stack Panel

Using stack panel we can create workspace under grid layout and in the canvas layout, we can create workspace in the horizontal or in the vertical order using this container we can arrange collection of controls in the single row or in the single column.


Example:- open new silverlight application

Go to XAML mode

In the grid tag

<Grid X: Name = “ layout Root” Background = “white”>

<stack panel orientation = “vertical”>

<button Content = “click” Height = “100” width = “150”>


<Ellipse Height = “100” width = “150” Fill = “Red”>


<Rectangle Height = “ 100” width = “150” Fill = “green” stock=”blue”>


</stack panel>