Xamarin表单列表视图在框架中显示行项目

时间:2016-01-28 11:45:58

标签: xaml xamarin

请您推荐一些示例代码来创建框架线,如图所示。正如您在图像中看到的那样,例如对于第一行,M应该在一个帧中,而该行中的所有其他3个项应该在另一行中。

下面请看我的代码,感谢任何帮助。

    <?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="XYZclass.Views.Exams.ExamsPage"
             Title="{Binding PageTitle}">

  <StackLayout VerticalOptions="FillAndExpand">
    <Image Source="XYZclassHeader.png" Aspect="AspectFit" />

    <Grid BackgroundColor="#0075c1">
      <Grid.RowDefinitions>
        <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <Label Grid.Row="0" Grid.Column="1" Text=""  TextColor="White" HorizontalOptions="Center"/>
      <Label Grid.Row="0" Grid.Column="2" Text="Type:" TextColor="White" HorizontalOptions="Center"/>
      <Label Grid.Row="0" Grid.Column="3" Text="Created:" TextColor="White" HorizontalOptions="Center"/>
      <Label Grid.Row="0" Grid.Column="4" Text="Finished:" TextColor="White"  HorizontalOptions="Center"/>
    </Grid>

    <ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Exams}" HorizontalOptions="Center">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <ViewCell.View>
              <Grid>
                <Grid.RowDefinitions>
                  <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*"/>
                  <ColumnDefinition Width="*"/>
                  <ColumnDefinition Width="*"/>
                  <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Frame OutlineColor="Accent" Grid.Row="0" Grid.Column="1"  HorizontalOptions="Center">
                  <Frame.Content>
                    <Label  Text="{Binding DisplayName}" />

                  </Frame.Content>
                </Frame>


                <Label Grid.Row="0" Grid.Column="2" Text="{Binding Type}" HorizontalOptions="Center"/>
                <Label Grid.Row="0" Grid.Column="3" Text="{Binding CreationDate}"  HorizontalOptions="Center"/>
                <Label Grid.Row="0" Grid.Column="4" Text="{Binding CompletionDateInfo}"  HorizontalOptions="Center"/>

              </Grid>
            </ViewCell.View>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>

    <StackLayout BackgroundColor="#0075c1" VerticalOptions="FillAndExpand">
      <StackLayout.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding DeleteSelectedExamsCommand}"/>
      </StackLayout.GestureRecognizers>
      <Label Text="Delete Selected(3) "
             TextColor="White" />
      <Label Text="&#xf014;"
            TextColor="White"
             FontSize="Large" />
    </StackLayout>

    <StackLayout BackgroundColor="#0075c1" VerticalOptions="FillAndExpand">
      <StackLayout.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding CreateNewExamCommand}"/>
      </StackLayout.GestureRecognizers>
      <Label Text="Create New Exam "
             TextColor="White"/>
      <Label Text="&#xf044;"
             TextColor="White"
            FontSize="Large"
            FontFamily="FontAwesome"/>
      <!--Note about FontAwesome for iOS: The FontFamily reference is for iOS. On android it will be ignored-->

    </StackLayout>
  </StackLayout>
</ContentPage>

Page

3 个答案:

答案 0 :(得分:1)

首先,网格列索引从&#39; 0开始(即,如果你有4列,它们的索引将是[0,1,2,3])。

回到问题:

你的方法看起来很奇怪:你将4个元素放在4个网格单元格中,而且这些元素中有3个必须放在公共边界内。您可以尝试将此3个元素放在另一个容器中(例如,在堆栈布局中),然后向此容器添加边框。帧类本身很差,but here is some workaround使用自定义渲染器。

因此,listview单元格可能如下所示:

<StackLayout Orientation="Horizontal">
    <local:FrameWithBorder>
        <Label  Text="{Binding DisplayName}" />
    </local:FrameWithBorder>
    <local:FrameWithBorder HorizontalOptions="FillAndExpand">
        <StackLayout Orientation="Horizontal">
            <Label  Text="{Binding Type}" />
            <Label  Text="{Binding CreationDate}" />
            <Label  Text="{Binding CompletionDateInfo}" />
        </StackLayout>
    </local:FrameWithBorder>
</StackLayout>

PS&GT;我在Xamarin方面经验不足,因此,我们将非常感谢任何建议和更正。

编辑: do not put listview inside scrollview

答案 1 :(得分:1)

感谢您的回答,但这是我实现了它,我主要使用网格控件,我在这里分享它,以防您需要类似的屏幕:

 <?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="XYZclass.Views.Exams.ExamsPage"
             BackgroundColor="White"
             xmlns:controls="clr-namespace:XYZclass.Controls">

  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness"
                iOS="10, 20, 10, 10"
                Android="0,0,0,10"/>
  </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>

      <ScrollView Grid.Row="1">
        <ListView x:Name="ExamList"
                  ItemsSource="{Binding Exams}"
                  HorizontalOptions="Center"
                  RowHeight="70">
          <ListView.ItemTemplate>
            <DataTemplate>
              <ViewCell>
                <ViewCell.View>
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="1*"/>
                      <ColumnDefinition Width="4*"/>
                    </Grid.ColumnDefinitions>

                    <Frame OutlineColor="#ed004a" Grid.Column="0">
                      <Frame.Content>
                        <Label Text="{Binding Name}"
                               Font="Large"
                               Style="{StaticResource LabelStyle}"
                               TextColor="#ed004a"
                               FontAttributes="Bold"/>
                      </Frame.Content>
                    </Frame>

                    <Frame OutlineColor="#ed004a" Grid.Column="1">
                      <Frame.Content>
                        <Grid>
                          <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="2*"/>
                          </Grid.ColumnDefinitions>
                          <Label Grid.Column="0"
                                 Text="{Binding Type}"
                                 Style="{StaticResource LabelStyleSmall}"/>
                          <Label Grid.Column="1"
                                 Text="{Binding StartDateText}"
                                 Style="{StaticResource LabelStyleSmall}"/>
                          <Label Grid.Column="2"
                                 Text="{Binding FinishedDateText}"
                                 Style="{StaticResource LabelStyleSmall}"/>
                        </Grid>
                      </Frame.Content>
                    </Frame>

                  </Grid>
                </ViewCell.View>
              </ViewCell>
            </DataTemplate>
          </ListView.ItemTemplate>
        </ListView>
      </ScrollView>

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

      <Grid Grid.Row="3">
        <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>

</ContentPage>

答案 2 :(得分:1)

请忽略我之前的回答,这是对我自己的问题的一个更好的答案:我已经改进了我的代码,现在我在后面的代码中动态创建项目,如果你需要类似的屏幕,请使用以下代码:< / p>

请注意我正在创建&#34; GridExams&#34;动态地在后面的代码中:

    <?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>

动态创建网格的方法详细信息:

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);
    }