Cardview: Problem with ffimageloading and ObservableCollection

[jungjanos]

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

[AndreiMisiukevich]

Hi, does it work if you change CachedImage to Image ?

[AndreiMisiukevich]

Ah, sorry, i see.
So, i don't think it's CardsView issue since it works with Image

[jungjanos]

where do we go from here?

[AndreiMisiukevich]

@j4ni have you posted issue to FFimage proj yet?

[jungjanos]

Not yet.

I dont really know what to tell there and was also hoping that you know right of the bat what causes the problem. Pretty annoying as I really would like to use FFImageLoading instead of image because of the loading/error placeholders

[AndreiMisiukevich]

@j4ni try IsViewReusingEnabled = false

[jungjanos]

The bug is gone!! Thank You very much!

Will this setting have any negative side effects? I expect at max around 60images and casual swiping left and right...

Please dont close yet, I have to try the setting on my head branch

[jungjanos]

Ok, I confirmed that it works!