Adding items to a CollectionView

Question

I'm trying to figure out how the "RemainingItemsThresholdReached" function works for the "CollectionView" element, and I don't understand how to add elements so that they are displayed in the "CollectionView".

CollectionView collection = new CollectionView {
	RemainingItemsThreshold = 10
};

for(index = 0; index < 50; index++)
{
	Items.Add(new Person { Name = "Item: " + index });
}

collection.ItemsSource = Items;

collection.RemainingItemsThresholdReached += (s, e) => {
	Items.Add(new Person { Name = "Demo" });
};

collection.ItemTemplate = new DataTemplate(() => {
	var nameLabel = new Label {
		FontSize = 20,
		TextColor = Color.FromArgb("#006064"),
		Margin = 10
	};

	nameLabel.SetBinding(Label.TextProperty, "Name");
	return nameLabel;
});

Content = refresh;

public class Person
{
	public string Name { get; set; } = "";
}

Answer 1

Hello,

What if "ObservableCollection" is in another class. "SubItem" elements are added to the collection, but they are not displayed in "CollectionView"

Please change your ObservableCollection<Person> Items to static and set index to static, when you execute LoadedCollection, Just add item directly.

public class Http_Request
{
     public static ObservableCollection<Person> Items { get; set; }
     public bool IsLoading { get; private set; } = false;
     public static int index = 0;
 
     public Http_Request()
     {
         Items = new ObservableCollection<Person>();
 
         for (index = 0; index < 50; index++)
         {
             Items.Add(new Person { Name = "Item: " + index });
         }
     }
 
     public void LoadedCollection()
     {
         IsLoading = true;
 
         //for (var i = index; i < (i + 50); i++)
         //{
         //    Items.Add(new Person { Name = "SubItem: " + i });
         //    Debug.WriteLine("SubItem: {0}", i);
         //}
         Items.Add(new Person { Name = "SubItem: " + index++ });
         IsLoading = false;
     }
}

Then you can set collection.ItemsSource = Http_Request.Items; driectly in the DashboardPage.

public Http_Request request = new Http_Request();
 
     public MainPage()
     {
         InitializeComponent();
 
         Grid grid = new Grid { Margin = new Thickness(20) };
 
         CollectionView collection = new CollectionView
         {
             RemainingItemsThreshold = 10
         };
 
         //for (request.index = 0; request.index < 50; request.index++)
         //{
         //    request.Items.Add(new Person { Name = "Item: " + request.index });
         //}
 
         collection.ItemsSource = Http_Request.Items;
 
         collection.RemainingItemsThresholdReached += (s, e) => {
             if (request.IsLoading == true) return;
             request.LoadedCollection();
         };
 
         collection.ItemTemplate = new DataTemplate(() => {
             var nameLabel = new Label { FontSize = 18 };
             nameLabel.SetBinding(Label.TextProperty, "Name");
 
             return nameLabel;
         });
 
         grid.Children.Add(collection);
         Content = grid;

how the "RemainingItemsThresholdReached" function works for the "CollectionView" element, and I don't understand how to add elements so that they are displayed in the "CollectionView".

RemainingItemsThresholdReached event that is fired when the CollectionView is scrolled far enough that RemainingItemsThreshold items have not been displayed. This event can be handled to load more items. From CollectionView load data incrementally document.

You set the RemainingItemsThreshold = 10 and add 50 items in the Collectionview, When the CollectionView slides to the 39th item (items start at item0, displayed item is item38), because the remaining undisplayed items in the CollectionView are equal to or less than 10, if you continue to slide down, RemainingItemsThresholdReached will be triggered, and an item will be added through Items.Add(new Person { Name = "Demo" });.

As note, please do not add a CollectionView that's in a StackLayout, This scenario will cause an infinite loop to occur where the CollectionView will keep expanding. Your item will cannot be added continuously. Please make sure refresh is not a StackLayout at Content = refresh; line.

I test with RefreshView and Gird to add CollectionView, item will be added to the ColletionView normally.

Here is my tested layout.

public partial class MainPage : ContentPage
{
    int count = 0;
    int index = 0;
 
    public ObservableCollection<Person> Items { get; set; }
    public MainPage()
    {
        InitializeComponent();
        Grid grid= new Grid { Margin = new Thickness(20) };
        Items=new ObservableCollection<Person>();
        CollectionView collection = new CollectionView
        {
            RemainingItemsThreshold = 10
        };
 
        for (index = 0; index < 50; index++)
        {
            Items.Add(new Person { Name = "Item: " + index });
        }
 
        collection.ItemsSource = Items;
 
        collection.RemainingItemsThresholdReached += (s, e) => {
            Items.Add(new Person { Name = "Demo" });
        };
 
        collection.ItemTemplate = new DataTemplate(() => {
            var nameLabel = new Label
            {
                FontSize = 20,
                TextColor = Color.FromArgb("#006064"),
                Margin = 10
            };
 
            nameLabel.SetBinding(Label.TextProperty, "Name");
            return nameLabel;
        });
        grid.Children.Add(collection);
        Content = grid;
 
 
}

Best Regards,

Leon Lu

---

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.