The grid is a layout control is a container of other silverlight controls. Grid acts like Html table, it places other silverlight controls like Textbox, Checkbox, and Button …

I am going to create 2 rows and 6 columns using Grid layout control

<UserControl xmlns:controls=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit”  x:Class=”ExpanderControl.grid”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

Width=”400″ Height=”400″>

<Grid x:Name=”LayoutRoot” Background=”White” ShowGridLines=”True” >

<Grid.RowDefinitions>

<RowDefinition Height=”30″></RowDefinition>

<RowDefinition Height=”30″></RowDefinition>

<RowDefinition Height=”30″></RowDefinition>

<RowDefinition Height=”30″></RowDefinition>

<RowDefinition Height=”30″></RowDefinition>

<RowDefinition Height=”30″></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”200″></ColumnDefinition>

<ColumnDefinition Width=”200″></ColumnDefinition>

</Grid.ColumnDefinitions>

<controls:Label x:Name=”lblr0c0″ Content=”User Registration” Grid.Row=”0″ Grid.Column=”0″ Margin =”-40,5,5,5″ Grid.ColumnSpan=”2″ HorizontalAlignment=”Center” ></controls:Label>

<controls:Label x:Name=”lblr1c0″   Content=”FirstName” Grid.Row=”1″ Grid.Column=”0″ Margin =”100,5,5,5″ ></controls:Label>

<controls:Label x:Name=”lblr1c1″   Content=”Text” Grid.Row=”1″ Grid.Column=”1″ Margin =”10,5,5,5″ ></controls:Label>

<controls:Label x:Name=”lblr2c0″   Content=”LastName” Grid.Row=”2″ Grid.Column=”0″ Margin =”100,5,5,5″ ></controls:Label>

<controls:Label x:Name=”lblr2c1″   Content=”Text” Grid.Row=”2″ Grid.Column=”1″ Margin =”10,5,5,5″ ></controls:Label>

<controls:Label x:Name=”lblr3c0″   Content=”DOB” Grid.Row=”3″ Grid.Column=”0″ Margin =”100,5,5,5″ ></controls:Label>

<controls:Label x:Name=”lblr3c1″   Content=”Text” Grid.Row=”3″ Grid.Column=”1″ Margin =”10,5,5,5″ ></controls:Label>

<controls:Label x:Name=”lblr4c0″   Content=”Gender” Grid.Row=”4″ Grid.Column=”0″ Margin =”100,5,5,5″ ></controls:Label>

<controls:Label x:Name=”lblr4c1″   Content=”Text” Grid.Row=”4″ Grid.Column=”1″ Margin =”10,5,5,5″ ></controls:Label>

<Button x:Name=”btnTest” Width=”150″ Content=”Register” Grid.Row=”5″ Grid.ColumnSpan=”2″></Button>

</Grid>

</UserControl>

Margin: A value measured by pixels that specifies a uniform Thickness. The uniform value is applied to all four Thickness properties (Left, Top, Right, Bottom).

EX: Margin =”100,5,5,5″

Grid.Colspan will span the columns used in User Registration Title

HorizontalAlignment: alignment of the row

Ex: HorizontalAlignment=”Center”

Result: