Issue with CollectionView RemainingItemsThresholdReached event

Question

I am facing 2 issues with the CollectionView:

1. I have given RemainingItemsThreshold="0" for CollectionView, but the RemainingItemsThresholdReached event is firing before reaching the last item. It is calling around 6 items before the last item.
2. WhenRemainingItemsThresholdReached is fired, I load the next set of data and append it to the CollectionView. But at that time, the CollectionView is scroll to the first item. It is not stay on the last item where we load more data.

My CollectionView Code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    BackgroundColor="White"
    x:Class="NeedHelp.Pages.FriendDetailsPage">

    <ContentPage.Content>
        <StackLayout>
            <Grid BackgroundColor="#eeeeee">
                
            </Grid>

            <ScrollView 
                x:Name="frienddetails_scrollview"
                IsVisible="False"
                Orientation="Vertical" 
                VerticalOptions="FillAndExpand" 
                HorizontalOptions="FillAndExpand">
                
                <StackLayout
                    Margin="15">
                    
                    <Frame 
                        BorderColor="#efefef"
                        BackgroundColor="White"
                        CornerRadius="5"
                        HasShadow="False"
                        Padding="5">
                        
                    </Frame>

                    <Frame
                        BorderColor="#efefef"
                        Padding="3"
                        x:Name="map_layout"
                        Margin="0,5,0,0">
                        
                    </Frame>

                    <Label
                        Margin="0,5,0,0"
                        x:Name="History_label"
                        Text="History"
                        TextColor="#424242"
                        HorizontalOptions="Center"
                        HorizontalTextAlignment="Center">
                    </Label>

                    <Frame
                        x:Name="Tab_layout"
                        BorderColor="#efefef"
                        Margin="0,5,0,0"
                        BackgroundColor="White"
                        HasShadow="False"
                        CornerRadius="5"
                        Padding="5">

                    </Frame>

                    <ListView 
                        x:Name="historylistview"
                        SeparatorVisibility="None"
                        HasUnevenRows="True"
                        SelectionMode="None"
                        CachingStrategy="RecycleElement"
                        BackgroundColor="#ffffff">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <ViewCell.View>
                                        <StackLayout
                                            Margin="0,0,0,10">
                                            
                                        </StackLayout>
                                    </ViewCell.View>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>

                        <ListView.Footer>
                            <Label/>
                        </ListView.Footer>
                    </ListView>

                    <CollectionView 
                        x:Name="MyTweetsList" 
                        Margin="0,5,0,5"
                        ItemsSource="{Binding AllItems,Mode=TwoWay}"
                        RemainingItemsThreshold="0"
                        RemainingItemsThresholdReached="LoadMoreTweets"
                        HorizontalOptions="Fill">
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <StackLayout
                                    x:Name="Item"
                                    HorizontalOptions="Fill"
                                    VerticalOptions="FillAndExpand"
                                    Orientation="Vertical">

                                </StackLayout>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                        <CollectionView.HeightRequest>
                            <OnIdiom x:TypeArguments="x:Double">
                                <OnIdiom.Phone>400</OnIdiom.Phone>
                                <OnIdiom.Tablet>600</OnIdiom.Tablet>
                                <OnIdiom.Desktop>400</OnIdiom.Desktop>
                            </OnIdiom>
                        </CollectionView.HeightRequest>
                    </CollectionView>

                    <Label
                        VerticalOptions="CenterAndExpand"
                        HorizontalOptions="CenterAndExpand"
                        IsVisible="{Binding ComingSoonVisibility}"
                        HorizontalTextAlignment="Center"
                        Text="No Messages Yet."
                        x:Name="no_announcement_label"/>
                </StackLayout>
            </ScrollView>
            
            <Grid 
                x:Name="tweetBox"
                IsVisible="False"
                Margin="0,0,0,10">

            </Grid>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Answer 1

Hello, On Android platform, right?

It is calling around 6 items before the last item.

I still cannot reproduce this issue. The event be triggered once when sliding to 50, and it will be triggered again when loading more hands to 60.

But at that time, the CollectionView is scroll to the first item.

In the UserTweetsList method of DashBoardViewModel, the model is added to Items, but you set the new ObservableCollection to the Items and AllItems . Please do not set a new object after adding item and add models to AllItems directly.

// Items = new ObservableCollection<UserTweetsList>(Items.Distinct()); 
//  AllItems = new ObservableCollection<UserTweetsList>(Items);

And you can refer to the following code:

// new the ObservableCollection for AllItems

// Constructor
public DashBoardViewModel()
{
    AllItems = new ObservableCollection<UserTweetsList>(Items);
}

Adding model

public async void UserTweetsList()
  {
      try
      {
          if (!loadMore)
          {// add model to AllItems
              AllItems.Add(new UserTweetsList() { tweetData = "message 1", tweetUser = "Albert" });
              AllItems.Add(new UserTweetsList() { tweetData = "message 2", tweetUser = "Albert" });
      ...
          AllItems.Add(new UserTweetsList() { tweetData = "message 49", tweetUser = "Albert" });
              AllItems.Add(new UserTweetsList() { tweetData = "message 50", tweetUser = "Albert" });
          }
          else
          {
              AllItems.Add(new UserTweetsList() { tweetData = "message 51", tweetUser = "Albert" });
             ...
             
              AllItems.Add(new UserTweetsList() { tweetData = "message 60", tweetUser = "Albert" });
          }
         // Items = new ObservableCollection<UserTweetsList>(Items.Distinct());
        //  AllItems = new ObservableCollection<UserTweetsList>(Items);
          Debug.WriteLine("itemCount:>>" + AllItems.Count);
          if (AllItems.Count == 0)
          {
              ComingSoonVisibility = true;
              chatVisibility = false;
          }
          else
          {
              ComingSoonVisibility = false;
              chatVisibility = true;
          }
          isLoading = false;
          if (AllItems.Count != 50)
          {
              haveItemsToLoad = false;
          }
          else
          {
              haveItemsToLoad = true;
          }
      }
      catch (Exception e)
      {
          Debug.WriteLine(e.ToString());
      }
  }

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.