Layout Management in Silverlight

Layout management involves describing the way how objects are arranged in your application. Silverlight provides a very flexible layout management system that lets you specify how controls will appear in your Silverlight application.

Silverlight 3 includes five layout management controls:

1.      Canvas

2.      StackPanel

3.      Grid

4.      WrapPanel

5.      DockPanel

The Canvas Panel:
The Canvas panel is a basic layout control that allows you to position Silverlight objects using explicit coordinates relative to the canvas location. We can position an object within the Canvas panel by using two XAML attached properties: Canvas.Left and Canvas.Top of the panel, which is considered position 0, 0. Canvas is based on absolute positioning.

Let us take an example to see how controls are positioned in Canvas Panel

When we run the above code

To clear the concept more, Let us add one more button to the Canvas, but this time position it below and a little bit right of the first button by setting its Canvas.Top and Canvas.Left properties as shown below:

The Layout looks like the below one

The above code produces the following. When child elements are added to the StackPanel, the panel simply stacks them in a vertical orientation by default. Using the StackPanel’s Orientation property, we can change the panel to stack elements horizontally.

When the StackPanel’s orientation is set to Vertical, the control sets its available height to Infinity, allowing its children to take an infinite amount of vertical space if they have no explicit size set. If the orientation is horizontal, then the panel’s width is set to Infinity.

This is one reason why the StackPanel works well in conjunction with the ScrollViewer control. As a StackPanel’s children begin to exceed the amount of vertical or horizontal space available to the panel, the ScrollViewer allows you to start scrolling them into view, rather than adjusting

Additionally, as with every other element, StackPanel can have its height and width set. If no width is set, the StackPanel will make itself as wide as its widest child. If no height is set, it takes enough height to display all of its children their own size.

We can also set the space between the Controls by using the Margin Property of the Control.
The Stack Panel can also be nested as

Using the following Code

The Grid Control:
The Grid control provides more fine-tuned layout in Silverlight applications. As a comparison, you can think of using the Grid layout control as similar to using table elements to position items in HTML, only more flexible. With the Grid control, you can define rows and columns, thus creating grid cells, and then add objects to individual cells in the grid or to multiple cells, by using spanning.

To specify in which cell to place an object, you use the Grid.Column and Grid.Row attached properties. These properties are base zero, so the top-left cell it is row 0 and column 0.

The below screen shot shows the layout of Grid having three rows and three columns.

Let us see how elements are placed in Grid. The center row and column, you are setting the Height and Width properties to "*". The asterisk tells the row and column to take up all available space. As the Grid control is resized with the browser window, those columns will be resized to take up all the space not consumed by the fixed sized columns.

In the above code we have added three rows and three columns in the grid. The Grid.RowDefinitions will let you set the Height of the rows. Here we have set it to 70, * and 70. This means that the first and last rows of the grid will have height of 70 and the middle one will take all the remaining space. Similarly to set the width of the column set the width property of each column under Grid.ColumnDefinitions. The below screen shot is the output of the above code

The grid can also be nested. The below figure shows the nested grid layout in Silverlight

The WrapPanel Control:
The WrapPanel control is a new control in Silverlight 3 that was previously available through the Silverlight Toolkit. It is very similar to the StackPanel control with one major difference: when items in a WrapPanel will not fit within the width or height of the control, they automatically wrap to a new row (if 56 horizontal orientation) or column (if vertical orientation). This makes the WrapPanel ideal for laying out an unknown number of items as they will automatically wrap to take up the entire space of the control.

As an example, if you look at Figure below you will see how the WrapPanel will handle placing six items when set to horizontal and vertical orientation. Horizontally, the WrapPanel will place the items one after the other to the right, until no other items can fit within the width of the control. At that time, it will start to place the items in a new row directly below the first row. The same is true for vertical orientation except the items are stacked below the previous item until new items cannot fit within the height of the control, at which time they will be place directly to the right of the previous row.

 Let us see how the controls are placed in the wrap panel control in Silverlight

Right click on addItem_Click in the XAML and choose “Navigate to Event Handler.” This will take you to the code behind of xaml file. Add the following code within the addItem_Click event handler.

The output produced by this is shown below

The DockPanel Control:
The DockPanel control is also a new control in Silverlight 3 that was previously available through the Silverlight Toolkit. It provides the ability to dock controls in all four directions: top, bottom, right, and left. Figure shows the possible layout with the DockPanel control involving five controls. The first two controls are docked in the left panel; the third control is docked in the top-center panel; the fourth control is docked in the bottom-center panel; and the fifth control is docked in the right panel.

Let us see how controls are placed in DockPanel in Silverlight

The output of the above will be

Advantages and disadvantages of the layouts of Silverlight: