xaml - Xamarin Forms ListView 在框架中显示行项目

Question

你能给我推荐一些示例代码来创建如图所示的框架线吗？正如您在图像中看到的，例如对于第一行，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>

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