How to implement grid panel in windows phone?

Hi Friends Here i am showing you how to implement grid panel for design perspective in windows phone. Here I am explain you Layout of grid panel in this file. This is basically how we are using grid layout in windows phone for design of windows phone.

<phone:PhoneApplicationPage
    x:Class="PhoneApp1.MainPage"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"  FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="3*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Row="0" Grid.Column="0" Fill="AliceBlue"></Rectangle>
        <Rectangle Grid.Row="0" Grid.Column="1" Fill="Black"></Rectangle>
        <Rectangle Grid.Row="1" Fill="Red" Grid.Column="0"></Rectangle>
        <Rectangle Grid.Row="1" Fill="Yellow" Grid.Column="1"></Rectangle>
        <Rectangle Grid.Row="2" Fill="Pink" Grid.Column="0"></Rectangle>
        <Rectangle Grid.Row="2" Fill="Orange" Grid.Column="1"></Rectangle>
    </Grid>
    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->
</phone:PhoneApplicationPage>

Here you can see  this code snippets.

 <Grid.RowDefinitions>

            <RowDefinition Height="*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="3*"/>
        </Grid.RowDefinitions> 

Actually it will divide total  height in total 6 parts.
 1st row contain (1/6(height))
2nd row contain (2/6(height))
3rd row contain (3/6(height))

Here you can see this also.

       <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>

It will divide column in total 2 parts. total prtion is 3. * means 1 and  2* means 2 so total is 3.
1st column width is (1/3(width))
2nd column width is (2/3(width))

Now we have taken rectangles and give row no and column no to each rectangle like this.

 <Rectangle Grid.Row="0" Grid.Column="0" Fill="AliceBlue"></Rectangle>
        <Rectangle Grid.Row="0" Grid.Column="1" Fill="Black"></Rectangle>
        <Rectangle Grid.Row="1" Fill="Red" Grid.Column="0"></Rectangle>
        <Rectangle Grid.Row="1" Fill="Yellow" Grid.Column="1"></Rectangle>
        <Rectangle Grid.Row="2" Fill="Pink" Grid.Column="0"></Rectangle>
        <Rectangle Grid.Row="2" Fill="Orange" Grid.Column="1"></Rectangle>

No I already given you complete description of grid panel. When you run this source code output will look like this.

Download complete Source code

Output: