The Windows Club

Silverlight Layout Controls: Windows Phone Apps Development Tutorial – Part 16

After learning about XAML, as a part of this tutorial series, let us learn about Silverlight Layout Controls. Laying out the controls while designing a website is very difficult as there are number of browsers and due to different screen resolutions but while designing application for Windows Phone, as a developer, you will it more easy to lay out controls as Windows Phone OS has some predefined screen requirements.

Now we will look at each of the layout control. All the layout controls can be dragged from the toolbar to designer screen.


The grid control is designed to allow you to add number of rows and columns and then place controls in those cells accordingly. You can define the rows and columns either through the code or using designer area itself. Starting and ending tags will create a grid. () now once grid is defined, you can add this code to add multiple rows and columns.

     <RowDefinition Height="80*" />
     <RowDefinition Height="50*"/>
     <ColumnDefinition Width="366*" />
     <ColumnDefinition Width="183*" />

You can later add multiple columns or rows as needed. The asterisk (*) denotes that the child column/row should be given any additional space if there is! There are many properties with which you can toy around to get the expected functionality.

You can also create rows and columns by clicking on the border of grid at the desired length. That’s much easier, isn’t it? Once you’ve created grid, you can place controls between cells just by mentioning grid.row and grid.column properties. (Remember values for these properties start from 0).

Stack Panel:

Stack panel is pretty simple. All the controls placed on stack panel are displayed in vertical stack. Once you create a stack panel, you can simply add controls between the starting and ending tags of stack panel.

<StackPanel Height="350" HorizontalAlignment="Left" Name="stackPanel1" VerticalAlignment="Top" Width="338">
                <TextBlock Name="txt1" Text="textblock 1" />
                <TextBlock Name="txt2" Text="textblock 1" />
                <TextBlock Name="txt3" Text="textblock 1" />
                <TextBlock Name="txt4" Text="textblock 1" />


Canvas lets you place controls on screen wherever you want them to appear. So instead of margin, catch property is used. But canvas has a flaw in rendering as if dimension of the phone changes or phone orientation is changed, it may produce some unwanted results.

<Canvas Height="322" HorizontalAlignment="Left" Margin="55,46,0,0" Name="canvas1" VerticalAlignment="Top" Width="330">
           <Button Canvas.Left="122" Canvas.Top="112" Content="Button" Height="72" Name="button1" Width="160" />

See here, we have defines position of text block using attached property of canvas. So now if you move our canvas, the controls will move along with it.

So here comes our layout tutorial to an end. Remember, while laying out controls, check them both in portrait as well as landscape mode. In next tutorial we will learn about XAML events as well as input controls.