Grid Layout item order when using Span

Question

I'm using xamarin forms and when I use span I get weird behavior out of a grid layout. When I want use another row in a grid layout I set the span property to two. How do I keep the items moving from left to right NOT down and up.

I would rather the numbers look like 01 02 03 04
Here is all of the code.

        <ListView x:Name="ItemsListView"
                ItemsSource="{Binding Items}"
                VerticalOptions="FillAndExpand"
                HasUnevenRows="true"
                RefreshCommand="{Binding LoadItemsCommand}"
                IsPullToRefreshEnabled="true"
                IsRefreshing="{Binding IsBusy, Mode=OneWay}"
                CachingStrategy="RecycleElement"
                ItemSelected="OnItemSelected">
            <d:ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>First Item</x:String>
                    <x:String>Second Item</x:String>
                    <x:String>Third Item</x:String>
                    <x:String>Forth Item</x:String>
                    <x:String>Fifth Item</x:String>
                    <x:String>Sixth Item</x:String>
                </x:Array>
            </d:ListView.ItemsSource>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="1,10,10,10">
                            <Label Text="{Binding name}" 
                                d:Text="{Binding .}"
                                LineBreakMode="NoWrap" 
                                Style="{DynamicResource ListItemTextStyle}" 
                                FontSize="16" />
                            <Frame BorderColor="Blue" >
                            <RelativeLayout HorizontalOptions="Start" VerticalOptions="Fill" HeightRequest="40"   >
                                <CollectionView ItemsSource="{Binding balls}"
                                                HorizontalOptions="StartAndExpand"
                                                >
                                    <CollectionView.ItemsLayout>
                                        <GridItemsLayout Orientation="Horizontal" Span="2"/>
                                    </CollectionView.ItemsLayout>
                                        <d:CollectionView.ItemsSource>
                                        <x:Array Type="{x:Type x:String}">
                                            <x:String>01</x:String>
                                            <x:String>02</x:String>
                                            <x:String>03</x:String>
                                            <x:String>04</x:String>
                                            <x:String>05</x:String>
                                            <x:String>06</x:String>
                                            <x:String>07</x:String>
                                            <x:String>08</x:String>
                                            <x:String>09</x:String>
                                            <x:String>10</x:String>
                                            <x:String>11</x:String>
                                            <x:String>12</x:String>
                                            <x:String>13</x:String>
                                            <x:String>14</x:String>
                                            </x:Array>
                                    </d:CollectionView.ItemsSource>
                                    <CollectionView.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto"/>
                                                        <ColumnDefinition Width="1" />
                                                    </Grid.ColumnDefinitions>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="40"/>
                                                    </Grid.RowDefinitions>
                                                    <AbsoluteLayout Grid.Column="0">
                                                        <Label Text="{Binding number}" 
                                                               d:Text="{Binding .}"
                                                               Style="{DynamicResource ListItemDetailTextStyle}" 
                                                               FontSize="16"  />
                                                    </AbsoluteLayout>
                                                </Grid>

                                            </DataTemplate>
                                    </CollectionView.ItemTemplate>
                                </CollectionView>
                                </RelativeLayout>
                                </Frame>                              
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>```

Answer 1

If you want to keep the items moving from left to right, I suggest you can replace CollectionView using FlexLayout.

  <ListView
            x:Name="ItemsListView"
            CachingStrategy="RecycleElement"
            HasUnevenRows="true"
            VerticalOptions="FillAndExpand">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>First Item</x:String>
                    <x:String>Second Item</x:String>
                    <x:String>Third Item</x:String>
                    <x:String>Forth Item</x:String>
                    <x:String>Fifth Item</x:String>
                    <x:String>Sixth Item</x:String>
                </x:Array>
            </ListView.ItemsSource>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="1,10,10,10">
                            <Label
                                FontSize="16"
                                LineBreakMode="NoWrap"
                                Text="{Binding .}" />

                            <Frame BorderColor="Blue">
                                <StackLayout HorizontalOptions="Start" VerticalOptions="FillAndExpand">
                                    <FlexLayout
                                        AlignContent="Start"
                                        AlignItems="Start"
                                        Direction="Row"
                                        JustifyContent="SpaceAround"
                                        Wrap="Wrap">

                                        <BindableLayout.ItemsSource>
                                            <x:Array Type="{x:Type x:String}">
                                                <x:String>01</x:String>
                                                <x:String>02</x:String>
                                                <x:String>03</x:String>
                                                <x:String>04</x:String>
                                                <x:String>05</x:String>
                                                <x:String>06</x:String>
                                                <x:String>07</x:String>
                                                <x:String>08</x:String>
                                                <x:String>09</x:String>
                                                <x:String>10</x:String>
                                                <x:String>11</x:String>
                                                <x:String>12</x:String>
                                                <x:String>13</x:String>
                                                <x:String>14</x:String>

                                            </x:Array>
                                        </BindableLayout.ItemsSource>
                                        <BindableLayout.ItemTemplate>
                                            <DataTemplate>
                                                <StackLayout>
                                                    <Label
                                                        Padding="14"
                                                        FontSize="16"
                                                        Text="{Binding .}" />
                                                </StackLayout>
                                            </DataTemplate>
                                        </BindableLayout.ItemTemplate>
                                    </FlexLayout>

                                </StackLayout>
                            </Frame>

                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

This is the screenshot:

This is the article about FlexLayout

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/flex-layout