Tutorial: Silverlight 2 layout controls

Post to Twitter

Learning some of the basics of Silverlight 2 will help you to learn the more advanced capabilities available. In this tutorial we’ll be starting from the most basic, but arguably the most used controls in Silverlight 2: The Layout Controls.

Silverlight 2 has four layout controls: Canvas, Grid, Border, and StackPanel.

If you want to layout your Silverlight interface with absolute positioning – meaning you specify the exact position you want your objects to appear then you use Canvas.

The StackPanel is typically used in conjunction with the other layout controls but can be used standalone as we will see in the example below. StackPanel can either layout horizontally or vertically.

If you’ve worked with HTML Tables before then you will feel right at home with the Grid layout control. basically everything is laid out in a grid-like format.

The Border control can be used to make some cool rounded effects amongst other things. It can only host one child control though, but we can stack other controls into it like a StackPanel that hosts multiple controls. We’ll see this in the example below.

To work though this tutorial you will need a copy of Visual Studio 2008 (Standard or better – I used Professional. Also, I don’t think the Silverlight 2 development tools works with the Express editions yet). You will also need to download the Silverlight Tools Beta 2 for Visual Studio 2008.

For the first example lets create a new Silverlight 2 project called “SilverlightLayouts”.

When the next dialog comes up make the following selection:

Once Visual Studio 2008 is done working it should put you into the XAML and Design page for the Page.xaml file. Lets add the following code making sure first you delete out the “Grid” tags that are currently in the XAML.

    <canvas Width="400" Height="300" Background="Beige">
        <button x:Name="myButton" Width="100" Height="40" Content="My Button" Canvas.Left="150" Canvas.Top="130" />
    </canvas>

The code should look like this (again, notice that I removed the “Grid” tags and replaced them with the “Canvas” tag instead):

<userControl x:Class="SilverlightLayouts.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <canvas Width="400" Height="300" Background="Beige">
        <button x:Name="myButton" Width="100" Height="40" Content="My Button" Canvas.Left="150" Canvas.Top="130" />
    </canvas>
</userControl>

What we did was use the Canvas layout control and then put a button on it. We positioned the button to be exactly where we wanted it by setting the Canvas.Left and Canvas.Top properties. “Top” is how far below the top of the container we want our object to show up at. “Left” is how far from the left that we want to place our object. Basically an X,Y coordinate system.

We could add more controls easily. Add this code below the button’s code:

<checkBox Content="Check Me" IsChecked="True" Canvas.Left="150" Canvas.Top="170" />

Run the project and you should see this:

Lets move onto the StackPanel layout control. Change the code to look like this:

<userControl x:Class="SilverlightLayouts.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <stackPanel Orientation="Vertical" Width="100" Background="#FFFFFF">
        <button x:Name="myButton" Width="100" Height="40" Content="My Button" />
        <checkBox Content="Check Me" IsChecked="True" />
    </stackPanel>
</userControl>

We can certainly see how the StackPanel gets it’s name here. In this case we told the StackPanel to stack vertically, so each item we toss into the StackPanel will be like adding legos one on top of another. Lets change the “Orientation” property to “Horizontal”. Run the project again with that change.

Whoa! What happened to the checkbox control? Well, its actually still there but it is under the button. Lets fix this by changing the StackPanel’s width property to “200″ and lets also add a “Margin” property so our checkbox isn’t crammed right up against the button.

<userControl x:Class="SilverlightLayouts.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <stackPanel Orientation="Horizontal" Width="200" Background="#FFFFFF">
        <button x:Name="myButton" Width="100" Height="40" Content="My Button" />
        <checkBox Content="Check Me" IsChecked="True" Margin="10" />
    </stackPanel>
</userControl>

For those people that have worked with CSS before, we could have also set the “Margin” property like this:

<checkBox Content="Check Me" IsChecked="True" Margin="10,0,0,0" />

Go ahead and run the project again.

Next up the Border control. Here we will re-use the code above and simply put the StackPanel into a border control. One thing to keep in mind is that the Border control can only contain one child control so you need to do something like what we are about to do in order to display more than one control. Here is the code:

<userControl x:Class="SilverlightLayouts.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <border Background="Beige" Height="60" Width="230" CornerRadius="10">
        <stackPanel Orientation="Horizontal" Width="200">
            <button x:Name="myButton" Width="100" Height="40" Content="My Button" />
            <checkBox Content="Check Me" IsChecked="True" Margin="10,0,0,0" />
        </stackPanel>
    </border>
</userControl>

Not too hard. We put the StackPanel inside of the Border control and put all our controls in the StackPanel. Then we gave the Border control a nice rounded effect and background color.

Finally lets work with the Grid. It will probably be one of your most commonly used layout controls. We will build a simple form that takes a username and password along with a submit button. So we are looking at two labels (called TextBlocks in Silverlight), two textboxes, and one button. This means we will need a grid that has two columns and three rows. The first column will have the labels and the second one will contain the textboxes and the submit button. Here is the code:

<userControl x:Class="SilverlightLayouts.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <grid Width="230" Height="150" Background="Beige">

        <grid.RowDefinitions>
            <rowDefinition Height="50"></rowDefinition>
            <rowDefinition Height="50"></rowDefinition>
            <rowDefinition Height="50"></rowDefinition>
        </grid.RowDefinitions>

        <grid.ColumnDefinitions>
            <columnDefinition Width="100"></columnDefinition>
            <columnDefinition Width="100"></columnDefinition>
        </grid.ColumnDefinitions>

        <textBlock Text="Username" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,5,0" Grid.Row="0" Grid.Column="0" />
        <textBlock Text="Password" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,5,0" Grid.Row="1" Grid.Column="0" />

        <textBox Width="100" Height="30" Grid.Row="0" Grid.Column="1" />
        <textBox Width="100" Height="30" Grid.Row="1" Grid.Column="1" />

        <button x:Name="submitButton" Width="100" Height="30" Content="Submit" Grid.Row="2" Grid.Column="1"></button>

    </grid>
</userControl>

Ok there is a lot going on here. Lets break it down step-by-step.

First we added the Grid layout control. We gave it an appropriate width and height as well as pleasant background color. In order to make use of the Grid layout control we need to define
what its going to look like. For this we use the RowDefinitions and ColumnDefinitions collections placing the appropriate number of rows and columns inside each. Earlier we said we needed three rows and two columns. Looking at the code we can see this has been defined.

Now we get into the actual controls. First we added the labels (TextBlocks) and set their properties to display “Username” and “Password”. What is interesting here is we use the “Grid.Row” and “Grid.Column” properties and set those according to where in the grid they are to show up. Since the grid is zero based the first column is zero. Next we want the “Username” text on top so we set it’s row to zero. For “Password” we simply increment the row number by one but keep it in the same column as the “Username”.

From here on out its basically just adding the rest of the controls and putting them into their correct spots. To help with this in debugging and designing make sure to turn on the “ShowGridLines” property in the Grid control like so:

<grid ShowGridLines="True" Width="230" Height="150" Background="Beige">

This will help you to figure out where your controls and stuff need to go much faster. Also, keep in mind that you can put StackPanels, Borders, Canvases, or other Grids inside of the Grid layout control.

Post to Twitter

This entry was posted in C#, Silverlight. Bookmark the permalink.

2 Responses to Tutorial: Silverlight 2 layout controls

  1. sean potter says:

    Normally I don?t comment on sites but your article was good.

  2. Anonymous says:

    good article…keep writing:)

Comments are closed.