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>

---

首先，网格列索引从“0”开始（即，如果有4列，其索引将为[0,1,2,3]）

回到问题上来：

您的方法似乎很奇怪：您将4个元素“独立”放置在4个网格单元中，但其中3个元素必须放置在公共边框内。您可以尝试将这3个元素放在另一个容器中（例如，在堆栈布局中），然后在此容器中添加边框。帧类本身非常差，使用自定义渲染器。

因此，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>我在Xamarin方面没有太多经验，因此，如有任何建议和更正，将不胜感激

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

---

编辑：

谢谢您的回答，但这是我已经实现的，我主要使用网格控制，我在这里共享它，以防您需要类似的屏幕：

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

---

请忽略我之前的回答，这是对我自己问题的更好回答：我改进了代码，现在我在代码隐藏中动态创建了项目，如果需要类似屏幕，请使用以下代码：

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

请注意，我正在代码隐藏中动态创建“GridTests”：

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

examsgriddynamicy（）私有
{
GridTests.RowDefinitions=新建RowDefinitionCollection（）；
grid.BackgroundColor=颜色.白色；
填充=新厚度（0,5,0,5）；
Grid childContainer=新网格（）；
childContainer.HorizontalOptions=LayoutOptions.CenterAndExpand；
childContainer.VerticalOptions=LayoutOptions.CenterAndExpand；
childContainer.BackgroundColor=颜色.白色；
childContainer.RowDefinitions=新的RowDefinitionCollection（）；
childContainer.ColumnDefinitions=新ColumnDefinitionCollection（）
{
新列定义
{
宽度=新的GridLength（1，GridUnitType.Star）
},
新列定义
{
宽度=新的GridLength（4，GridUnitType.Star）
}
};
添加（新行定义{Height=newGridLength（1，GridUnitType.Star）}）；
列表考试=App.Ex