Problem with ffimageloading and ObservableCollection

Hi!

I have encountered a problem using CardsView together with FFImageLoading and databinding the ItemsSource property to an ObservableCollection. My environment is xamarin.Forms(Android) with latest everything.

Setup: My ObservableCollection initially holds a single ImageModel (this represents my image) which displays fine on the UI. Then I try to add additional ImageModels to the end of the ObservableCollection (ItemsSource).

The problem: After adding the ImageModels to the end of the collection, only a small subset of images are actually toggled on the display when swiping the CardsView. So the user is displayed only with like 4 or 5 images cyclically even though the collection has 50+ images loaded.

The CardsView.SelectedIndex is correctly updated when cycling through the collection running from 0 to last index. The CardsView.SelectedItem.FilePath property (Url) which equals to ImageModel.FilePath and to which FFImageLoading’s UrImageSource property is bound is correctly displayed on the UI (as a debug label) as the user cycles the images.

BUT the actual displayed CardsView image does not correspond to the displayed CardsView.SelectedItem.FilePath

To gain more information, I have replaced FFImageLoading for XamarinForms.Image and then it works properly. Bug is gone.

Below is the code sniped with PanCardsView.

                        <pancardview:CardsView.ItemTemplate>
                            <DataTemplate>
                                <ContentView>
                                    <Frame                                         
                                        HeightRequest="226"
                                        Padding="0" 
                                        HasShadow="false"
                                        IsClippedToBounds="true"
                                        CornerRadius="10"
                                        BackgroundColor="WhiteSmoke"
                                    >
                                        <ffimageloading:CachedImage 
                                            Aspect="AspectFit"                                            
                                            ErrorPlaceholder="movie_backdrop_placeholder_lg"
                                            RetryCount="1">

                                            <ffimageloading:CachedImage.GestureRecognizers>
                                                <TapGestureRecognizer Command="{Binding  Path=BindingContext.TapImageCommand, Source={x:Reference movieDetailPage}}" />
                                            </ffimageloading:CachedImage.GestureRecognizers>

                                            <ffimageloading:CachedImage.Source>
                                                <UriImageSource
                                                    Uri="{Binding Path=FilePath}"
                                                />
                                            </ffimageloading:CachedImage.Source>                                            
                                        </ffimageloading:CachedImage>
                                    </Frame>                                    
                                </ContentView>
                            </DataTemplate>
                        </pancardview:CardsView.ItemTemplate>

                    </pancardview:CardsView>

                            <Label BindingContext="{x:Reference cardView}"
                               Text="{Binding SelectedIndex, Converter={StaticResource Key=intPlusOneToString}}" 
                               FontSize="Micro" 
                               HorizontalOptions="End" 
                               VerticalOptions="Start"/>
                            
                           <Label BindingContext="{x:Reference cardView}"
                               Text="{Binding SelectedItem.FilePath}" 
                               FontSize="Micro" 
                               HorizontalOptions="End" 
                               VerticalOptions="Start"/>

[jungjanos]

Ok, I confirmed that it works!

[AndreiMisiukevich]

@j4ni try IsViewReusingEnabled = false