Displaying repeating items in multiple columns

user_13012767 0
Viewed 2800

I have a list view displaying data in rows in Xamarin.Forms but I would like to display the items in three columns and then display the fourth item in column 0 row 1... and so on.

Here is my XAML code, if you know how to do it I would really appreciate your help!

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

enter image description here

xamarin.forms xamarin android ios
1 Answers

Since Xamarin.Forms introduced the CollectionView, this kind of layout is pretty simple to implement.

Last year I wrote a blog post and made simple demo examples with CollectionView so in this answer I will show you a code and gif how the code will look in the final form.

Using CollectionView you can decide which form of items layout you want to use, in your case that one is GridItemsLayout with Vertical orientation, the value of Span property in your case will be three, because you want to have three-column "list".

Here is the XAML from my demo example app:

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

     <CollectionView.ItemTemplate>
         <DataTemplate>

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

The most important part of this for your case is this one:

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

which will be Span="3" in your case.

In the end, if I run this code this is the final result (in my case Span value is 2):

enter image description here

This demo sample project about different usages of CollectionView is available on my GitHub repository, you can find it here.

Hope this was helpful for you, wishing you lots of luck with coding!

user_51659610
Related