在多列中显示重复项目

Question

我有一个列表视图，在 Xamarin.Forms 中按行显示数据，但我想在三列中显示项目，然后在第 0 列第 1 行中显示第四个项目...依此类推。

这是我的 XAML 代码，如果您知道如何操作，我将非常感谢您的帮助！

<Grid Margin="10,5,10,5">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="1200"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Button Text="CREAR NUEVO ARTICULO" Grid.Row="0" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Fill" Clicked="crearClicked"/>
    <ListView x:Name="ListaArticulos" BackgroundColor="White" VerticalOptions="Fill" Grid.Row="1" Grid.Column="0" SeparatorColor="LightGray" ItemSelected="EventClicked">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Margin="5,0,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="20"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding Articulo1}"  Grid.Row="0" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center"   TextColor="DarkBlue"  />
                        <Label Text="{Binding Precio}"  Grid.Row="0" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center"   TextColor="DarkBlue"  />
                     </Grid>
                 </ViewCell>
             </DataTemplate>
         </ListView.ItemTemplate>
     </ListView>
</Grid>

Answer 1

由于Xamarin.Forms引入了CollectionView，这种布局实现起来非常简单。

去年我写了一篇博文并制作了简单的演示示例，CollectionView因此在这个答案中我将向您展示代码和 gif 代码在最终形式中的外观。

使用CollectionView您可以决定要使用哪种形式的项目布局，如果您的情况是垂直方向的 GridItemsLayout，则您的情况下 Span 属性的值将为 3，因为您想要三列“列表”。

以下是我的演示示例应用程序中的 XAML：

<CollectionView ItemsSource="{Binding Pictures}">
                
     <CollectionView.ItemsLayout>
         <GridItemsLayout Orientation="Vertical" Span="2" />
     </CollectionView.ItemsLayout>

     <CollectionView.ItemTemplate>
         <DataTemplate>

         </DataTemplate>
     </CollectionView.ItemTemplate>
 </CollectionView>

对于您的案例来说，最重要的部分是：

<GridItemsLayout Orientation="Vertical" Span="NUMBER_OF_COLUMNS" />

这将是Span="3"你的情况。

最后，如果我运行此代码，这就是最终结果（在我的例子中 Span 值为 2）：

这个关于不同用法的演示示例项目CollectionView可以在我的 GitHub 存储库中找到，您可以在这里找到它。

希望这对您有所帮助，祝您编码顺利！