Xamarin Tutorial Part 5 - Grid in xaml

In Previous blog we learn syntax of grid, we will go through example of grid in xaml.

Grid code in xamarin form in xaml

Please, support my blog by clicking on our sponsors ad!

Grid code for above design

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridExample.MainPage">

    <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,*" ColumnDefinitions="Auto,Auto,Auto,Auto,*">
        <BoxView BackgroundColor="Black" Grid.Row="0"  Grid.Column="0"></BoxView>
        <BoxView BackgroundColor="Gray" Grid.Row="1" Grid.Column="0"></BoxView>
        <BoxView BackgroundColor="Green" Grid.Row="2" Grid.Column="0" ></BoxView>
        <BoxView BackgroundColor="Yellow" Grid.Row="3" Grid.Column="0" ></BoxView>
        <BoxView BackgroundColor="YellowGreen" Grid.Row="4" Grid.Column="0" ></BoxView>

        <BoxView BackgroundColor="Black" Grid.Row="0"  Grid.Column="1"></BoxView>
        <BoxView BackgroundColor="Gray" Grid.Row="1" Grid.Column="1"></BoxView>
        <BoxView BackgroundColor="Green" Grid.Row="2" Grid.Column="1" ></BoxView>
        <BoxView BackgroundColor="Yellow" Grid.Row="3" Grid.Column="1" ></BoxView>
        <BoxView BackgroundColor="YellowGreen" Grid.Row="4" Grid.Column="1" ></BoxView>

        <BoxView BackgroundColor="Black" Grid.Row="0"  Grid.Column="2"></BoxView>
        <BoxView BackgroundColor="Gray" Grid.Row="1" Grid.Column="2"></BoxView>
        <BoxView BackgroundColor="Green" Grid.Row="2" Grid.Column="2" ></BoxView>
        <BoxView BackgroundColor="Yellow" Grid.Row="3" Grid.Column="2" ></BoxView>
        <BoxView BackgroundColor="YellowGreen" Grid.Row="4" Grid.Column="2" ></BoxView>

        <BoxView BackgroundColor="Black" Grid.Row="0"  Grid.Column="3"></BoxView>
        <BoxView BackgroundColor="Gray" Grid.Row="1" Grid.Column="3"></BoxView>
        <BoxView BackgroundColor="Green" Grid.Row="2" Grid.Column="3" ></BoxView>
        <BoxView BackgroundColor="Yellow" Grid.Row="3" Grid.Column="3" ></BoxView>
        <BoxView BackgroundColor="YellowGreen" Grid.Row="4" Grid.Column="3" ></BoxView>

        <BoxView BackgroundColor="Black" Grid.Row="0"  Grid.Column="4"></BoxView>
        <BoxView BackgroundColor="Gray" Grid.Row="1" Grid.Column="4"></BoxView>
        <BoxView BackgroundColor="Green" Grid.Row="2" Grid.Column="4" ></BoxView>
        <BoxView BackgroundColor="Yellow" Grid.Row="3" Grid.Column="4" ></BoxView>
        <BoxView BackgroundColor="YellowGreen" Grid.Row="4" Grid.Column="4" ></BoxView>

        <Grid Grid.Row="5"  RowDefinitions="2*,5*,*" Grid.Column="0" Grid.ColumnSpan="5" HorizontalOptions="FillAndExpand" ColumnDefinitions="*,*,*" RowSpacing="10" ColumnSpacing="10" VerticalOptions="FillAndExpand">
            <BoxView BackgroundColor="Black" Grid.Row="0"  Grid.Column="0"></BoxView>
            <BoxView BackgroundColor="Gray" Grid.Row="1" Grid.Column="0"></BoxView>
            <BoxView BackgroundColor="Green" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"></BoxView>

            <BoxView BackgroundColor="Pink" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1"></BoxView>

            <BoxView BackgroundColor="OrangeRed" Grid.Row="0" Grid.Column="2"></BoxView>
            <BoxView BackgroundColor="Orchid" Grid.Row="1" Grid.Column="2"></BoxView>
        </Grid>
    </Grid>
   

</ContentPage>

I have explain this code in this video. Please watch. 

Hope this is helpful to you, please share your feedback in comment section and thanks for reading.