Grid Layout in Silverlight

Grid is most flexible and commonly use layout container. It has format of invisible table means it is collection of rows and columns.

Grid is most flexible and commonly use layout container. It has format of invisible table means it is collection of rows and columns. So grid is divided in cells. Grid layout can be nested means one grid can contain another grid.

We are design a grid like this:

In above grid we have 3 rows and 3 columns means 9 cells and we design it step by step.

Step 1 Create a grid.

<Grid x:Name="LayoutRoot" ShowGridLines="True" Background="#FF009900" Height="360" Width="480" ></Grid> 

<Grid> is a Layout container that has another Silverlight controls and it uses for effective UI.

x:Name="LayoutRoot" is Grid name for identify to grid in a silverlight usercontrol each grid has own unique name.So here Grid name is LayoutRoot

ShowGridLines="True" It shows Grid Horizontal and Vertical lines means it uses to show whole grid in cells visible.

Background="#FF009900" It use to set background of whole Grid. Here the alpha value is FF (255), the red value is 00, and green value is 99 and blue value is  00.By passing alpha value we can partly transparent color.

Height="360"  It uses to set height of grid in pixel.Here we define 360 pixel.

Width="480"  It uses to set width of grid in pixel. Here we define 480 pixel. 

Step 2  Create row collection for grid.

<Grid.RowDefinitions>

            <RowDefinition Height="120"></RowDefinition>

            <RowDefinition Height="120"></RowDefinition>

            <RowDefinition Height="*"></RowDefinition>           

        </Grid.RowDefinitions>

In above code we define three rows in one Grid.RowDefinitions collection.

<Grid.RowDefinitions> It is a property of grid that contains <RowDefinition> objects for each row.

<RowDefinition> It is an object for each row means it defines each row definition.

Height="120" It is define height of row. Here we use 120 means a row has height is 120. If we use  "*" means rows contains remaining height of grid after define all rows. Width of row is same as width of grid. 

Note: When we use row than first row is contain position number 0 and next is respectivly increses by 1.

Step 3 Create column collection 

<Grid.ColumnDefinitions>

            <ColumnDefinition Width="160"></ColumnDefinition>

            <ColumnDefinition Width="160"></ColumnDefinition>

            <ColumnDefinition Width="*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

In above code we define three columns in one Grid.ColumnDefinitions collection 

<Grid.ColumnDefinitions> It is property grid contains <ColumnDefinition> objects for each column.

<ColumnDefinition> It is an object for each column. When we define one column then it apply all the rows in grid it is not necessary to define a column for each row. Here once we define column and creat cell in grid. 

Width="160" It is width of column. Here is width is 160. If we use "*" for remaining width of row after define each column width.Height of column is same as height of row that contains column.

Step 4 Implemantation of grid. 

Here we have nine cell and we put 5 buttons in 5 cells.

<Button Content="East" Grid.Row="1" Grid.Column="0" Height="50" Width="100" ></Button>

        <Button Content="North" Grid.Row="0" Grid.Column="1" Height="50" Width="100"></Button>

        <Button Content="West" Grid.Row="1" Grid.Column="2" Height="50" Width="100"></Button>

        <Button Content="South" Grid.Row="2" Grid.Column="1" Height="50" Width="100"></Button>

        <Button Content="Center" Grid.Row="1" Grid.Column="1" Height="50" Width="100"></Button>

In above code 5 buttons are arrange in 5 cells of grid. 

 Grid.Row it defines which row we are using for put a silverlight control in grid cell. Here row number 0 means first row ,1 means second row and 2 means third row. 

 Grid.Column It defines which cell we are using for put a silverlight control in grid cell. Here column number 0 means first column, 1 means second column and 2 means third row. 

 <Button> It is silverlight control.

Content="East" It is property of <Button> for assign display text on button. Here text display is East.

Height="50" It is height of <Button> control in pixel and it is a property.

Width="100" It is width of <Button> control in pixel and it is a property.