Silverlight Layouts and Panel Controls

The Layout means positioning of UI elements on the form. TheSilverlight provides an advanced of position the elements in the application. You can position the controls using absolute positioning method or dynamic layout system. The Absolute position enables to place the controls specified with their exact locations with respect to their parent container control. The Dynamic position of elements is based on the arrangement of controls wrapped inside relative to the parent container control. Both types of Silverlight layout systems are based on the position of child controls with respect to their container elements.  The Silverlight framework provides a set of Panel controls which serve as container controls to provide a well-defined layout to the Silverlight application forms or user controls. Following are the Silverlight Panel controls:

1. Canvas
2. Grid
3. StackPanel

Silverlight Panel Controls and their Layout Behaviors

The Panel controls available in Silverlight enable to design complex layouts that may contain the stacked elements, absolute positioned elements or row/column based layout. Based on your UI design requirements you can choose one of the following container control:
1. Canvas: It defines container area within which you can place the controls by specifying their location with respect to top and left boundary of the parent canvas control. Almost each Silverlight control consists of properties such as Canvas.Top and Canvas.Left which accept integer type value to specify the distance between the associated control and the boundaries of the canvas panel control.

2. Grid: It defines a tabular layout containing a set of rows and columns. You can place the controls by specifying the row and column number of the Grid in which you want to display it. When controls are placed inside the Grid container, they inherit some Grid properties such asGrid.Column and Grid.Row. Both the properties accept integer type values as a zero based index of the respective column and the row as well.

3. StackPanel: It defines a stack based container for placing the controls in horizontally or vertically aligned pattern. You can set the value for Orientation property of StackPanel as Horizontal to arrange the child elements in a linear horizontal direction or can set its value toVertical for displaying them in vertical manner. Additionally a Marginproperty of child elements can be used to add the spacing between individual child controls.