Xamarin Forms List View Showing Row items in Frames

Please ignore my previous answer, this is a much better answer to my own question: I have improved my code and now I create the items dynamically in the code behind, please use the following code if you need a similar screen:

Please see that I am creating "GridExams" dynamically in the code behind:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XYZProject.Views.Exams.ExamsPage"
             BackgroundColor="White"
             xmlns:controls="clr-namespace:XYZProject.Controls">

  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness"
                iOS="10, 20, 10, 10"
                Android="0,0,0,0"/>
  </ContentPage.Padding>

  <ContentPage.Resources>
    <ResourceDictionary>
      <Style x:Key="LabelStyle" TargetType="Label">
        <Setter Property="TextColor" Value="White"/>
        <Setter Property="Font" Value="Medium"/>
        <Setter Property="VerticalOptions" Value="Center"/>
        <Setter Property="HorizontalOptions" Value="Center"/>
      </Style>
      <Style x:Key="LabelStyleSmall" TargetType="Label">
        <Setter Property="TextColor" Value="#41a4dc"/>
        <Setter Property="Font" Value="Small"/>
        <Setter Property="VerticalOptions" Value="Center"/>
        <Setter Property="HorizontalOptions" Value="Center"/>
      </Style>
    </ResourceDictionary>
  </ContentPage.Resources>

  <Grid RowSpacing="0">
    <Grid.RowDefinitions>
      <RowDefinition Height="1*" />
      <RowDefinition Height="10*" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
      <controls:Navigation/>
    </Grid>

    <Grid RowSpacing="0" Grid.Row="1" Padding="10,10,10,0">
      <Grid.RowDefinitions>
        <RowDefinition Height="145*" />
        <RowDefinition Height="415*" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="88*" />
      </Grid.RowDefinitions>

      <Grid Grid.Row="0" RowSpacing="10" BackgroundColor="#ed004a">
        <Grid.RowDefinitions>
          <RowDefinition Height="*" />
          <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" BackgroundColor="#ed004a" Padding="30,0,0,0">
          <Label Text="Your personal exam history information"
                 Style="{StaticResource LabelStyle}"
                 HorizontalOptions="StartAndExpand"/>
        </Grid>

        <Grid Grid.Row="1"
              BackgroundColor="#0075c1">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
          </Grid.ColumnDefinitions>
          <Label Grid.Column="0"
                 Text=""
                 Style="{StaticResource LabelStyle}"/>
          <Label Grid.Column="1"
                 Text="Type:"
                 Style="{StaticResource LabelStyle}"/>
          <Label Grid.Column="2"
                 Text="Created:"
                 Style="{StaticResource LabelStyle}"/>
          <Label Grid.Column="3"
                 Text="Finished:"
                 Style="{StaticResource LabelStyle}"/>
        </Grid>

      </Grid>

      <Grid Grid.Row="1">
        <ScrollView>
          <Grid x:Name="GridExams">

          </Grid>
        </ScrollView>
      </Grid>

      <BoxView Grid.Row="2" Color="#0075c1" WidthRequest="100" HeightRequest="2"/>

      <Grid Grid.Row="3" Padding="0,0,0,10">
        <Grid.RowDefinitions>
          <RowDefinition Height="1*"/>
          <RowDefinition Height="40*" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="1">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>

          <Grid Grid.Column="0"
                BackgroundColor="{Binding DeleteButtonBackgroundColor}"
                Padding="30,0,0,0">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="5*"/>
              <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>

            <Label Grid.Column="0"
                   x:Name="LabelDeleteSelectedExamsPartOne"
                   Text="{Binding DeleteButtonText}"
                   Style="{StaticResource LabelStyle}"/>

            <Label Grid.Column="1"
                   x:Name="LabelDeleteSelectedExamsPartTwo"
                   Text="&#xf014;"
                   Style="{StaticResource LabelStyle}"
                   Font="Large"/>

            <Grid.GestureRecognizers IsEnabled="{Binding DeleteButtonIsEnabled}">
              <TapGestureRecognizer
                  Command="{Binding DeleteSelectedExamsCommand}"/>
            </Grid.GestureRecognizers>
          </Grid>

          <Grid Grid.Column="2"
                BackgroundColor="#0075c1"
                Padding="30,0,0,0">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="5*"/>
              <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>

            <Label Grid.Column="0"
                   x:Name="LabelCreateNewExamPartOne"
                   Text="Create New Exam "
                   Style="{StaticResource LabelStyle}"/>

            <Label Grid.Column="1"
                   x:Name="LabelCreateNewExamPartTwo"
                   Text="&#xf040;"
                   Style="{StaticResource LabelStyle}"
                   Font="Large"/>

            <Grid.GestureRecognizers>
              <TapGestureRecognizer
                  Command="{Binding CreateNewExamCommand}"/>
            </Grid.GestureRecognizers>
          </Grid>

        </Grid>

      </Grid>

    </Grid>

    <Grid Grid.Row="1"
      IsVisible="{Binding IsLoading}"
      BackgroundColor="Black"
      Opacity="0.25">
      <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
      </Grid.RowDefinitions>

      <ActivityIndicator  Grid.Row="0"
                          IsVisible="{Binding IsLoading}"
                          IsRunning="{Binding IsLoading}"
                          VerticalOptions="End"
                          HorizontalOptions="Center"/>
      <Label Grid.Row="1"
             Text="Please wait..."
             TextColor="White"
             VerticalOptions="Start"
             HorizontalOptions="Center"/>

    </Grid>

  </Grid>

</ContentPage>

Method details that creates the grid dynamically:

private void CrateExamsGridDynamically()
    {
        GridExams.RowDefinitions = new RowDefinitionCollection();
        GridExams.BackgroundColor = Color.White;
        GridExams.Padding = new Thickness(0, 5, 0, 5);

        Grid childContainer = new Grid();
        childContainer.HorizontalOptions = LayoutOptions.CenterAndExpand;
        childContainer.VerticalOptions = LayoutOptions.CenterAndExpand;
        childContainer.BackgroundColor = Color.White;
        childContainer.RowDefinitions = new RowDefinitionCollection();
        childContainer.ColumnDefinitions = new ColumnDefinitionCollection()
        {
            new ColumnDefinition
            {
                Width =new GridLength(1, GridUnitType.Star)
            },
            new ColumnDefinition
            {
                Width=new GridLength(4, GridUnitType.Star)
            }
        };

        GridExams.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });

        List<Exam> exams = App.ExamService.GetExams();

        int top = 0;

        foreach (var exam in exams)
        {
            childContainer.RowDefinitions.Add(new RowDefinition
            {
                Height = new GridLength(60, GridUnitType.Absolute)
            });

            exam.StartDateText = exam.StartDate.HasValue ? exam.StartDate.Value.ToString("dd/MM/yy") : string.Empty;
            exam.FinishedDateText = exam.FinishedDate.HasValue ? exam.FinishedDate.Value.ToString("dd/MM/yy") : "In Progress >";
            string examType = string.Empty;
            switch (exam.Type)
            {
                case ExamTypes.Undefined:
                    break;
                case ExamTypes.Part1:
                    examType = "Part 1";
                    break;
                case ExamTypes.Part2:
                    examType = "Part 2";
                    break;
                case ExamTypes.Both:
                    break;
                default:
                    break;
            }

            #region [ Left Grandchild Container ]

            Grid grandChildContainerLeft = new Grid();
            grandChildContainerLeft.BackgroundColor = Constants.CustomColour.RcpPurple;
            grandChildContainerLeft.Padding = new Thickness(1, 1, 1, 1);

            #region [ Left Great Grandchild Container ]

            Grid greatGrandChildContainerLeft = new Grid();
            // TapGestureRecognizer for Left Container
            var grandChildContainerLeftTapGestureRecognizer = new TapGestureRecognizer();
            grandChildContainerLeftTapGestureRecognizer.Tapped += GrandChildContainerLeftTapGestureRecognizer_Tapped;
            greatGrandChildContainerLeft.GestureRecognizers.Add(grandChildContainerLeftTapGestureRecognizer);
            greatGrandChildContainerLeft.BackgroundColor = Color.White;
            greatGrandChildContainerLeft.Children.Add(new Label
            {
                Text = exam.Name,
                TextColor = Constants.CustomColour.RcpPurple,
                FontAttributes = FontAttributes.Bold,
                BackgroundColor = Color.White,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                VerticalOptions = LayoutOptions.CenterAndExpand
            }, 0, 0);
            // This is to carry exam id
            greatGrandChildContainerLeft.Children.Add(new Label
            {
                Text = exam.Id.ToString(),
                IsVisible = false
            }, 0, 0);

            #endregion

            grandChildContainerLeft.Children.Add(greatGrandChildContainerLeft, 0, 0);

            #endregion

            #region [ Right Grandchild Container ]

            Grid grandChildContainerRight = new Grid();
            grandChildContainerRight.BackgroundColor = Constants.CustomColour.RcpBlue;
            grandChildContainerRight.Padding = new Thickness(1, 1, 1, 1);


            #region [ Right Great Grandchild Container ]

            Grid greatGrandChildContainerRight = new Grid();
            // TapGestureRecognizer for Right Container
            var grandChildContainerRightTapGestureRecognizer = new TapGestureRecognizer();
            grandChildContainerRightTapGestureRecognizer.Tapped += GrandChildContainerRightTapGestureRecognizer_Tapped;
            greatGrandChildContainerRight.GestureRecognizers.Add(grandChildContainerRightTapGestureRecognizer);
            greatGrandChildContainerRight.BackgroundColor = Color.White;

            // We need three columns for each child grid
            greatGrandChildContainerRight.ColumnDefinitions = new ColumnDefinitionCollection()
            {
                new ColumnDefinition
                {
                    Width =new GridLength(1, GridUnitType.Star)
                },
                new ColumnDefinition
                {
                    Width=new GridLength(1, GridUnitType.Star)
                },
                new ColumnDefinition
                {
                    Width=new GridLength(2, GridUnitType.Star)
                }
            };

            // This is for type
            greatGrandChildContainerRight.Children.Add(new Label
            {
                Text = examType,
                TextColor = Constants.CustomColour.RcpBlue,
                BackgroundColor = Color.White,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                VerticalOptions = LayoutOptions.CenterAndExpand,
            }, 0, 0); // Exam type: the first column
            // This is to carry exam id
            greatGrandChildContainerRight.Children.Add(new Label
            {
                Text = exam.Id.ToString(),
                IsVisible = false
            }, 0, 0);

            // This is for created date
            greatGrandChildContainerRight.Children.Add(new Label
            {
                Text = exam.StartDateText,
                TextColor = Constants.CustomColour.RcpBlue,
                BackgroundColor = Color.White,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                VerticalOptions = LayoutOptions.CenterAndExpand,
            }, 1, 0); // Created: the second column

            // This is for finished date
            greatGrandChildContainerRight.Children.Add(new Label
            {
                Text = exam.FinishedDateText,
                TextColor = Constants.CustomColour.RcpBlue,
                BackgroundColor = Color.White,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                VerticalOptions = LayoutOptions.CenterAndExpand,
            }, 2, 0); // Finished: the third column 

            #endregion

            grandChildContainerRight.Children.Add(greatGrandChildContainerRight, 0, 0);

            #endregion

            childContainer.Children.Add(grandChildContainerLeft, 0, top); // First Column for grandChildContainerLeft
            childContainer.Children.Add(grandChildContainerRight, 1, top); // Second Column for grandChildContainerRight

            top++;
        }
        GridExams.Children.Add(childContainer, 0, 0);
    }