Prerequisite

It is assumed that you have installed Silverlight 2 on your machine before you begin with the steps below.

The DatePicker Control

This article aims to explore some of the Layout/Container controls provided in Silverlight 2.

Silverlight 2 provides you with a number of container or layout controls. If you are coming from a Windows Forms or ASP.NET environment, you might find these controls totally new in appearance and behavior. Hence, this walkthrough will make it easier for you to understand what these controls are and how to work with them. Canvas, Grid, Border, and StackPanel are the commonly used layout controls.

Let us look at these one by one.

A Canvas layout control

We will first create a new Silverlight 2 application. Assume that it has been named LayoutDemo. In the default XAML code that is generated inside Page.xaml, make changes so that the Grid is replaced with Canvas. The background, height, and width are also to be changed. The code should look like:

Listing 1: Page.xaml with Canvas

This Canvas will be the root and topmost control. All remaining controls that are created henceforth will be child controls.

Next, we create the Grid layout or container control as a child within the Canvas.

A Grid container control allows you greater flexibility as compared to a Canvas because you can arrange child elements in rows and columns in a Grid. This is useful when you want to position items properly on the UI.

Creating the Grid with 2 columns and 2 rows

Add code as shown below after the Canvas block so that a grid of two rows and two columns is created:

Listing 2: Adding Grid

The ShowGridLines property of the Grid can be set to False if you don't want to display the lines. Auto is given for the Height of the RowDefinition to indicate automatic resizing of the row height as per the content. Height, Width, and Margin properties are used to specify the height, width and corner margins of the grid respectively.

After the last RowDefinition line, before the </Grid>, add the following code:

Listing 3: Adding TextBlock

This creates a TextBlock control in the first row, spanning two columns and whose alignment is centered. Notice that row numbering inside the grid begins from 0 for the first row. The Grid.Row and Grid.Column indicate which row and which column you want to place the child control in.

In the line before the <TextBlock> tag, add the following code:

Listing 4: Adding Border

This will create a Border control in the second row, first column with a color of DarkViolet and a thickness of 2. The purpose of a Border control is to place a border around its child control. In our case, the child control is the TextBlock. Hence, the TextBlock will appear with a border around it. Next, we want to add some images within a StackPanel control. A StackPanel is used to stack a group of child elements in a horizontal or vertical fashion.

Now, we will create a StackPanel container control shown below:

Listing 5: Adding StackPanel

Assume that we want to place two images within the StackPanel. So we right click on the project name in the Solution Explorer and select "Add Existing Item", navigate to the My Documents\My Pictures\Sample Pictures folder and select two pictures from the default images one by one. Once the two images are added to the Project, we switch to the XAML view and place the cursor between the <StackPanel></StackPanel> tag. Then we drag and drop an Image control and specify its Source property as one of the newly added images. This results in the following code.

Listing 6: Specifying image source

This completes the code for our application.

The final look of Page.xaml would be as follows:

Listing 7: Page.xaml

We now build and execute it.

The output would be as shown in Figure 1.

Figure 1: Layout controls and child controls

Conclusion

The article described various layout/container controls in Silverlight 2 and demonstrated how to create them.

About Medusa M

Medusa loves experimenting with technology trends, especially that of Microsoft. This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.