List Items moving or disappearing when scrolled out of screen

Question

I have a Xamarin Forms Application for Android and IOS. When I open one of the larger lists on Android it looks fine when it is loaded. When I now scroll down however and up again on some entries the images are moved or disappeared at all.

Before:

After:

The list is defined with this XAML:

            <ListView x:Name="PaymentList"
                      ItemsSource="{Binding DailyList}"
                      HasUnevenRows="True"
                      CachingStrategy="RecycleElementAndDataTemplate"
                      IsGroupingEnabled="True"
                      SeparatorVisibility="None">

                <ListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <TextCell Text="{Binding Key}"
                                  TextColor="{DynamicResource HeaderColor}" />
                    </DataTemplate>
                </ListView.GroupHeaderTemplate>

                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.ContextActions>
                                <MenuItem Clicked="EditPayment" CommandParameter="{Binding .}"
                                          Text="{Binding Resources[EditLabel]}" />
                                <MenuItem Clicked="DeletePayment" CommandParameter="{Binding .}"
                                          Text="{Binding Resources[DeleteLabel]}"
                                          IsDestructive="True" />
                            </ViewCell.ContextActions>
                            <controls:CardView Margin="{StaticResource SmallLeftRightBottomMargin}" Style="{StaticResource ListItemStyle}">
                                <StackLayout Spacing="0"
                                             Margin="{StaticResource DefaultListItemsMargin}">
                                    <Grid>

                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="70*" />
                                            <ColumnDefinition Width="30*" />
                                        </Grid.ColumnDefinitions>

                                        <Label Grid.Column="0"
                                               Text="{Binding Category.Name}"
                                               Style="{StaticResource ListItemHeaderSmallStyle}" />

                                        <Label Grid.Column="1"
                                               HorizontalTextAlignment="End"
                                               VerticalOptions="CenterAndExpand"
                                               Style="{StaticResource SmallTextStyle}"
                                               Text="{Binding ., Converter={StaticResource PaymentAmountConverter}}" />
                                    </Grid>
                                    <Grid >

                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="70*" />
                                            <ColumnDefinition Width="30*" />
                                        </Grid.ColumnDefinitions>

                                        <Label Grid.Column="0"
                                           Text="{Binding Note}" 
                                           Style="{StaticResource DeemphasizedSmallLabelStyle}" />

                                        <StackLayout Grid.Column="1" Orientation="Horizontal" HorizontalOptions="EndAndExpand">

                                            <Image HeightRequest="15"
                                                   WidthRequest="15"
                                                   IsVisible="{Binding IsTransfer}" >
                                                <Image.Source>
                                                    <FontImageSource
                                                        Glyph="{StaticResource Transfer}"
                                                        FontFamily="{DynamicResource MaterialFontFamily}"
                                                        Color="{DynamicResource PrimaryFontColor}" />
                                                </Image.Source>
                                            </Image>

                                            <Image HeightRequest="15"
                                                   WidthRequest="15"
                                                   IsVisible="{Binding IsRecurring}" >
                                                <Image.Source>
                                                    <FontImageSource
                                                        Glyph="{StaticResource Recurring}"
                                                        FontFamily="{DynamicResource MaterialFontFamily}"
                                                        Color="{DynamicResource PrimaryFontColor}" />
                                                </Image.Source>
                                            </Image>

                                            <Image HeightRequest="15"
                                                   WidthRequest="15"
                                                   IsVisible="{Binding IsCleared}">
                                                <Image.Source>
                                                    <FontImageSource
                                                        Glyph="{StaticResource Cleared}"
                                                        FontFamily="{DynamicResource MaterialFontFamily}"
                                                        Color="{DynamicResource PrimaryFontColor}" />
                                                </Image.Source>
                                            </Image>

                                        </StackLayout>
                                    </Grid>
                                </StackLayout>
                            </controls:CardView>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

I also tried it with another caching mode. But with retain element the elements on scrolling are just empty.

The list has around 130 items.

How can I solve that?

Answer 1

I noticed that when I change HasUnevenRows="True" to False (the default value) and set a fix RowHeight, I can use CachingStrategy="RetainElement" without having emtpy elements. That way the issue seems to not occur anymore.

Answer 2

I suggest you can use FFImageLoading to render the images correctly,I guess that FFImageLoading will solved you issue.

Install Xamarin.FFImageLoading.Forms by NuGet packages...

Here is the detailed info about using FFimageLoading.

https://www.c-sharpcorner.com/article/xamarin-forms-ffimageloading-app2/