CollectionView's RemainingItemsThresholdReached event firing before loading the data on UI

Question

I have a collectionview on my UI and I load 20 items initially. I have added RemainingItemsThresholdReached event for loading next 20 items when I reach the end of first 20 items. But after loading first 20 it is instantly load the next 20 and again load the next 20 and repeated up to load all the items.

I have added the same kind of logic on a different page and on there it is working fine. So I suspect the issue is with the layout used on that page. Below I have added the layout structure I am using.




    
        
            
            
            
            
        
    
    
    
        
            
                
                    
                
                
                    
                    
                    
                

                    //Header layout
                
            

            
                
                
                    
                    //Middle layout

                    
                        
                            
                                
                                    
                                        
                                        
                                            
                                                
                                                    18
                                                    27
                                                    18
                                                
                                            
                                        
                                    

                                    
                                        
                                            
                                            
                                        

                                        
                                            
                                                
                                                    
                                                        
                                                            20
                                                            30
                                                            20
                                                        
                                                    
                                                    
                                                        
                                                            20
                                                            30
                                                            20
                                                        
                                                    
                                                

                                                
                                                    
                                                        
                                                            16
                                                            24
                                                            16
                                                        
                                                    
                                                
                                            


                                            
                                                
                                                    
                                                        
                                                            14
                                                            21
                                                            14
                                                        
                                                    
                                                
                                            
                                        
                                    
                                
                            
                        
                    

                    
                        
                            
                                
                                
                                
                            
                        
                        
                            
                                18
                                26
                                18
                            
                        
                    

                    
                        
                            
                                600
                                900
                                600
                            
                        

                        

                            
                                
                                    
                                        

                                            
                                        
                                    
                                
                                
                                    
                                        400
                                        600
                                        400
                                    
                                
                            
                        
                    

                    
                        
                            
                                
                                
                                
                            
                        
                        
                            
                                18
                                26
                                18
                            
                        
                    
                
            
            
            

                
                    
                

                
                    
                    
                

                //message sending layout

I have issue with the historyCollectionView and have another CollectionView on the same page.

Can anyone tell what is the issue by checking the above xaml layout codes?

Updates:

xaml.cs codes

public partial class FriendDetailsPage : ContentPage
{
    public ObservableCollection allHistoryList;
    bool loadMoreHistory = false;
    bool haveHistoryItemsToLoad = false;
    
    public FriendDetailsPage(UserFriendHBList friendsdetails)
    {
        allHistoryList = new ObservableCollection();
        await Task.Run(async () => await SetHistoryListItems(monitorId));
    }
    
    public async Task SetHistoryListItems(string selecteduserId)
    {
        try
        {
            //API Call
            if (locationHistory.userLocationHistoryHBList != null)
            {
                if (locationHistory.userLocationHistoryHBList.Count != 0)
                {
                    foreach (var item in locationHistory.userLocationHistoryHBList)
                    {
                        //list iteration and adding list to collection
                        allHistoryList.Add(item);
                    }
                    MainThread.BeginInvokeOnMainThread(async () =>
                    {
                        //setting data to collectionview
                        historylistview.ItemsSource = allHistoryList;
                        UserDialogs.Instance.HideHud();
                    });
                    if (locationHistory.userLocationHistoryHBList.Count == 20)
                    {
                        haveHistoryItemsToLoad = true;
                    }
                    else
                    {
                        haveHistoryItemsToLoad = false;
                    }
                }
                else
                {
                    SetNoHistoryAlert();
                }
            }
            else
            {
                SetNoHistoryAlert();
            }
        }
        catch (Exception ex)
        {
            UserDialogs.Instance.HideHud();
            Debug.WriteLine("Exception:>" + ex);
        }
    }

    //Load more items API call
    void LoadMoreHistory(object sender, EventArgs e)
    {
        if (haveHistoryItemsToLoad)
        {
            haveHistoryItemsToLoad = false;
            loadMoreHistory = true;
            SetHistoryListItems(friendsdata.userId);
        }
    }
}

Answer

We can fix this by explicitly setting a height for the CollectionView, or by placing it in a parent container that restricts its size, like a Frame or BoxView. This will ensure the RemainingItemsThresholdReached event only triggers when the user scrolls near the bottom of the currently visible items.

Solution: Constrain the Height of the CollectionView

Method 1: Explicit HeightRequest

You can set an explicit height for the CollectionView, ensuring it doesn’t expand indefinitely.

Method 2: Constrain Using Parent Container (e.g., Frame)

Wrap the CollectionView in a Frame or BoxView with a constrained height:



    BorderColor="Transparent"
    BackgroundColor="Transparent">

Explicit HeightRequest: Setting an explicit height ensures that the CollectionView does not expand to fit all its items, thus preventing the RemainingItemsThresholdReached event from firing too early.
Using a Parent Container with Set Height: Wrapping the CollectionView in a Frame with a defined HeightRequest ensures it occupies only the specified space, enabling incremental loading as expected.

Share via

CollectionView's RemainingItemsThresholdReached event firing before loading the data on UI

1 answer

Your answer