Xamarin Forms: CollectionView is not working in ios

1
votes

I am using CollectionView for the horizontal listview. It is working fine in android but in ios, the items are showing on one top of another. Attaching a screenshot below:

enter image description here

XAML

<CollectionView 
             HeightRequest="30"
             SelectionMode="Single"
             SelectionChanged="ItemTapped"
        ItemsSource="{Binding Items}"
             x:Name="collectionview"
             ItemsLayout="HorizontalList">
             <CollectionView.ItemTemplate>
                   <DataTemplate>
                          <StackLayout Margin="5">
                                  <Label
                                       TextColor="Black"
                                       FontSize="Large"
                                       HorizontalTextAlignment="Center"
                                       VerticalTextAlignment="Center"
                                       Text="{Binding title}"/>
                             </StackLayout>
                        </DataTemplate>
                 </CollectionView.ItemTemplate>
          </CollectionView>

Xaml.cs

public async void ItemTapped(object sender, SelectionChangedEventArgs e)
        {
            var selectedItem = (e.CurrentSelection.FirstOrDefault() as MyModel);
            if (selectedItem != null)
            {
                //Do action
            }
        }

Add below code in AppDelegate class on iOS and MainActivity class on Android, before calling Forms.Init:

Forms.SetFlags("CollectionView_Experimental");

Am I missing something in IOS?

2
xamarin.formscollectionview
Your code works fine on my side . What's the parent view of the CollectionView ? – Lucas Zhang
@LucasZhang-MSFT Stacklayout – Sreejith Sree
@LucasZhang-MSFT Uploaded my XAML file on drive. Drive link: drive.google.com/open?id=1eTRPwq1jEDZem0xyjOmPiN3Fd1g5dUU6 Can you please check? – Sreejith Sree
Your sample looks very complicated(and contains some third library control) . You could create a sample which contains the issue . The codes which you post on the question work fine , so I think maybe the issue caused by other codes. – Lucas Zhang
@LucasZhang-MSFT I will provide you a sample. – Sreejith Sree

2 Answers

2
votes

It seems an existing issue of Xamarin.Forms . As workaround you can update the version of Xamarin.Forms to 4.4 pre2 .

enter image description here

And you can check the Xamarin.forms release notes .

0
votes

I would suggest you add a LinearItemsLayout which would give you some control over how these items look:

 <CollectionView.ItemsLayout>  
 <LinearItemsLayout ItemSpacing="5" Orientation="Horizontal" />
 </CollectionView.ItemsLayout>

Let me know in case if you face any issues!