Listview items do not render when scrolling quickly.

[Joe Bloggs]

The items render if you scroll slowly and deliberate, but not if you scroll quickly.  The item template contents don't matter, but here is the code I'm using so  you can attempt to reproduce.  The action to reproduce should be scrolling quickly down or up in the Listview displayed horizontally.  Showing the item template, in pertinent part:

            <sync:SfListView.ItemTemplate>

                <DataTemplate>

                    <Grid x:Name="grid" BackgroundColor="WhiteSmoke" RowSpacing="10" Padding="1">

                        <Grid.RowDefinitions>

                            <RowDefinition Height="*" />

                            <RowDefinition Height="1" />

                        </Grid.RowDefinitions>

                        <Grid RowSpacing="1" Padding="2,1,2,1">

                            <Grid.RowDefinitions>

                                <RowDefinition Height="*" />

                                <RowDefinition Height="*" />

                                <RowDefinition Height="*" />

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="70" />

                                <ColumnDefinition Width="*" />

                                <ColumnDefinition Width="Auto" />

                            </Grid.ColumnDefinitions>

                            <!-- Index / Game Number -->

                            <Label TextColor="{StaticResource Gray300}" Grid.Row="0" Grid.Column="0"

                                               LineBreakMode="NoWrap"

                                               HeightRequest="30"

                                               Padding="2,0,0,2"

                                               VerticalOptions="Start"

                                               FontSize="14"

                                               Text="{Binding Index}" />

                            <!-- Game Image Pass / Miss Streak Number -->

                            <Image Grid.Row="1"

                                                   Grid.Column="0"

                                                   Grid.RowSpan="2"

                                                   VerticalOptions="Center"

                                                   HorizontalOptions="Center"

                                                   HeightRequest="50"

                                                   WidthRequest="50">

                                <Image.Source>

                                    <FontImageSource

                                                Glyph="{x:Static f:GoogleMarterialIconFont.Check_circle}"

                                                Color="{Binding BackgroundColor}"

                                                Size="50"

                                                FontFamily="Google" />

                                </Image.Source>

                            </Image>

                            <!-- Game Caption Label -->

                            <Label Grid.Row="0"

                                                   Grid.Column="1"

                                                   LineBreakMode="TailTruncation"

                                                   TextColor="Black"

                                                   Text="{Binding BetCaption}">

                                <Label.FontSize>

                                    <OnPlatform x:TypeArguments="x:Double">

                                        <On Platform="WPF">

                                            <OnIdiom x:TypeArguments="x:Double" Desktop="20"/>

                                        </On>

                                        <On Platform="Android,iOS, UWP">

                                            <OnIdiom x:TypeArguments="x:Double" Phone="16" Tablet="18" Desktop="20"/>

                                        </On>

                                    </OnPlatform>

                                </Label.FontSize>

                            </Label>

                            <!-- Game Description Label -->

                            <Label Grid.Row="1"

                                                   Grid.Column="1"

                                                   LineBreakMode="TailTruncation"

                                                   Text="{Binding ErrorMessage}"

                                                   FontSize="14" />

                            <!-- Game Rolls -->

                            <Label Grid.Row="2"

                                               Grid.Column="1"

                                               LineBreakMode="TailTruncation"

                                               Text="{Binding Caption, StringFormat='Rolls: {0}'}"

                                               FontSize="12"/>

                            <!-- Game Badges Bet Related -->

                            <Grid Grid.Row="0"

                                              Grid.Column="2"

                                              VerticalOptions="Center">

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="*" />

                                    <ColumnDefinition Width="*" />

                                    <ColumnDefinition Width="Auto" />

                                </Grid.ColumnDefinitions>

                                <Image Source="hedging_enabled.png"

                                                   IsVisible="{Binding Missed}"

                                                   VerticalOptions="Center"

                                                   HorizontalOptions="Center"

                                                   WidthRequest="20"/>

                                <Image Grid.Column="1"

                                                   Source="btn_rating_star_on_pressed.png"

                                                   IsVisible="{Binding Missed}"

                                                   VerticalOptions="Center"

                                                   HorizontalOptions="Center"

                                                   WidthRequest="20"/>

                                <Image Grid.Column="2"

                                                   Source="seven_out_streak.png"

                                                   IsVisible="{Binding Missed}"

                                                   VerticalOptions="Center"

                                                   HorizontalOptions="Center"

                                                   WidthRequest="20"/>

                            </Grid>

                            <!-- Game Timestamp (Date) -->

                            <Grid Grid.Row="1"

                                              Grid.Column="2"

                                              RowSpacing="1"

                                              VerticalOptions="Center">

                                <Label LineBreakMode="NoWrap" Grid.Row="0" Margin="0,0,10,0" HorizontalOptions="Center"

                                                   VerticalOptions="Start"

                                                   TextColor="#777777"

                                                   FontSize="12"

                                                   Text="{Binding EntryTimeStamp, StringFormat='{}{0:MMM dd}'}">

                                </Label>

                            </Grid>

                            <!-- Game Timestamp (Time) -->

                            <Grid Grid.Row="2"

                                              Grid.Column="2"

                                              RowSpacing="1"

                                              VerticalOptions="Center">

                                <Label LineBreakMode="NoWrap" Grid.Row="0" Margin="0,0,11,0"

                                                   HorizontalOptions="Center"

                                                   VerticalOptions="Start"

                                                   TextColor="#777777"

                                                   FontSize="12"

                                                   Text="{Binding EntryTimeStamp, StringFormat='{}{0:h:mm:ss}'}"/>

                            </Grid>

                        </Grid>

                        <StackLayout Grid.Row="1" BackgroundColor="#E4E4E4" HeightRequest="1"/>

                    </Grid>

                    <!--<ViewCell>

                        <ViewCell.View>

                        </ViewCell.View>

                    </ViewCell>-->

                </DataTemplate>

            </sync:SfListView.ItemTemplate>

[Suthi Yuvaraj]

Hi Joe,

We have checked the reported query “Listview items do not render when scrolling quickly.” , we have already faced the reported issue at our end. We are working on it , we will update you further details on or before September 13, 2022.we will appreciate your patience until then.

Regards,

Suthi Yuvaraj.

[Suthi Yuvaraj]

Hi Joe,

We have internally logged a bug on Items not renderer when scrolling quickly and working on it. We will fix and the fix will be included in our upcoming Vol3 release which is planned to rolled out on September 27 , 2022 . We appreciate your patience until then.

Meanwhile , can you please share the Syncfusion Maui listview version ,latest MAUI framework version and Platform details .which would be more helpful for us to improve compatibility of our control.

Regards,

Suthi Yuvaraj.

[Suthi Yuvaraj]

Hi Jeo,

Sorry for the inconvenience caused.

Due to the complexity of the issue, we are unable to include the fix in our Vol3 release , as the issue is reproduced when scrolling the items in horizontal orientation, items are appears slowly when scrolling quickly. As we have include the fix for the same issue , due to the framework conflicts, issue occurred in horizontal orientation. Currently we are trying to fix the issue at our end,  we will update you further details on or before October 11 , 2022.we will appreciate your patience until then.

Regards,

Suthi Yuvaraj.

[Suthi Yuvaraj]

Hi Jeo,

Sorry for the inconvenience caused.

We are unable to include the fix as mentioned , the issue is reproduced when scrolling the items in horizontal orientation, items are not rendered properly when scrolling quickly. As we have include the fix for the same issue , due to the framework conflicts, issue occurred in horizontal orientation. Currently we are trying to fix the issue at our end,  we will update you further details on or before October 25 , 2022.we will appreciate your patience until then.

Regards,

Suthi Yuvaraj.

[Suthi Yuvaraj]

Hi Jeo,

Sorry for the inconvenience caused.

We are unable to include the fix as mentioned , the issue is reproduced when scrolling the items in horizontal orientation, items are not rendered properly when scrolling quickly. As mentioned in the previous update. Currently we are trying to fix the issue at our end, we will fix the issue in our
upcoming Vol4 release. Soon we will share the release date. We appreciate
your patience until then.

Regards,

Suthi Yuvaraj.

[Suthi Yuvaraj]

Hi Jeo,

We regret to inform you that we could not include the issue fix for the reported query as promised, items are not rendered properly when scrolling quickly. As the Velocity of scroll is calculated when scrolling quickly , each time the scroll notification will be triggered.Hence we are trying to fix the issue and it is occurred in horizontal orientation. We will fix the issue in our upcoming Vol4 SP release. Soon we will share the release date. We appreciate your patience until then.

Regards,

Suthi Yuvaraj

[Suthi Yuvaraj]

Hi Jeo,

We regret to inform you that we could not include the issue fix for the reported query as promised, items are not rendered properly when scrolling quickly. As the Velocity of the scroll is calculated when scrolling quickly, each time the scroll notification will be triggered. Hence we are trying to fix the issue and it is occurring in horizontal orientation. We will fix the issue in our upcoming Vol1 release. Soon we will share the release date. We appreciate your patience until then.

Regards,

Suthi Yuvaraj

[Marcello Pawlik]

Hi, 

this post is alredy pretty old, but I am still seeing this error in the latest release.

Is there any workaround to support scrolling? I see that including a  small Image in every row (through binding) gives this error. When I comment out the <Image Source"..." /> tag, scrolling works fine.

Regards

[RiyasHameed MohamedAbdulKhader]

Hi Marcello Pawlik,
We have reviewed your reported query.Could you please confirm whether you are facing this problem with vertical or horizontal scrolling? As a workaround, we recommend setting a 'HeightRequest' and 'WidthRequest' for the image to render it without delay. Please refer to the UG below for more details. 

UG link - https://help.syncfusion.com/maui/listview/item-size-customization#limitations

Additionally, as another workaround, we suggest using 'FFImageLoading' for image rendering, which will render the image more quickly. To use it, you need to install the 'FFImageLoadingCompact.Maui' package. We have attached a code snippet for your reference

Code Snippet

<ContentPage x:Class="ListViewMaui.MainPage"

             xmlns:local="clr-namespace:ListViewMaui"

             xmlns:ff="clr-namespace:FFImageLoading.Maui;assembly=FFImageLoading.Compat.Maui"

             xmlns:listView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView">

    <ContentPage.Content>

        <Grid>

            <listView:SfListView x:Name="listView"

                                 ItemSize="70"

                                 ItemsSource="{Binding Items}">

          

                <listView:SfListView.ItemTemplate>

                    <DataTemplate>

                        <Grid x:Name="grid"

                              RowSpacing="1">

                            <Grid.RowDefinitions>

                                <RowDefinition Height="*" />

                                <RowDefinition Height="1" />

                            </Grid.RowDefinitions>

                            <Grid RowSpacing="1">

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="50" />

                                    <ColumnDefinition Width="*" />

                                    <ColumnDefinition Width="70" />

                                </Grid.ColumnDefinitions>

                                <ff:CachedImage Source="{Binding ContactImage}"

                                       VerticalOptions="Center"

                                       HorizontalOptions="Center"

                                       HeightRequest="50" />

                                 ….

                    </DataTemplate>

                </listView:SfListView.ItemTemplate>

            </listView:SfListView>

        </Grid>

    </ContentPage.Content>

</ContentPage>

// MauiProgram.cs

.UseFFImageLoading()

Regards,

Riyas Hameed M

[Marcello Pawlik]

Thank you,

The ListView is scolling vertically. the image is a 19kB jpeg.

Specifying the size made it harder to reproduce, but the scrolling failed eventually.

FFImageLoading seems to fix the problem. I still have to test on some slower phone though.

Regards

[RiyasHameed MohamedAbdulKhader]

Marcello Pawlik,

Please check at your end. We will wait to hear from you. Please let us know if you require any additional assistance. We are happy to help you.