Best way to load a grouped collection on Xamarin.Forms ListView/CollectionView with incremental loading

Question

What would be the best way to load a grouped collection on Xamarin.Forms ListView/CollectionView with incremental loading?

For example, say a collection contains several groups and each group contains a list of items.

[
    [123, 143, 341234, 234234, 514232, 23511, 673456, ...],
    [12, 143, 341234, 234234, 514232, 23511, , ...],
    [12, 143, 341234, 234234, 514232, 23511, 313, ...],
    [12, 143, 341234, 514232, 23511, 673456, ...],
    [12, 143, 341234, 234234, 514232, 132, 23511, 673456, ...],
    .
    .
    .
    [12, 143, 341234, 234234, 514232, 23511, 673456, ...],
]

Update

With one dimensional list, I could load the data into the ListView or CollectionView using ListView.ItemAppearing/CollectionView.RemainingItemsThresholdReached events.

Infinite Scroll with Xamarin.Forms CollectionView

Load More Items at End of ListView in Xamarin.Forms

listView.ItemAppearing += ListView_ItemAppearing;
IList<Item> originalList = new List<Item> {Item1, ..., Item10000};

private void ListView_ItemAppearing(object sender, ItemVisibilityEventArgs e)
{
    if (// all the items in the original list loaded into the listview) 
    {
        listView.ItemAppearing -= ListView_ItemAppearing;
    }
    else
    {
        // Add next set of items from the original list to the listview
    }
}

So my concern is, what would be the best way (or the best practice) to load incrementally a grouped collection into a ListView or CollectionView?

Answer 1

To load grouped collection, I add some plus data into the ItemsSource like:

    PersonViewModel pvm = new PersonViewModel();
           private  ObservableCollection<PersonGroup> myitems = new ObservableCollection<PersonGroup>();
            public TestGroup()
            {
    
                InitializeComponent();
                myitems = pvm.Persons;
                //set collectionview
                mycol.ItemsSource =myitems;
                mycol.RemainingItemsThreshold = 2;
                mycol.RemainingItemsThresholdReached += Mycol_RemainingItemsThresholdReached;
            }
    
            private void Mycol_RemainingItemsThresholdReached(object sender, EventArgs e)
            {
               
                for (int i = 0; i <= 3; i++)
                {
                    myitems.Add(new PersonGroup("plusgroup", new List<Person> { new 
                    Person { name="plus1",
                    address="11111"},
                   new Person { name="plus2",
                    address="22222"}
    
                     }));
                }
            }

Here are my viewmodel and model:

public class PersonViewModel {


    public ObservableCollection<PersonGroup> Persons { get; set; } = new ObservableCollection<PersonGroup>();

    public List<Person> peoplelist = new List<Person>();

    public PersonViewModel()

    {

        for (int k = 1; k <= 3; k++)

        {

           peoplelist.Add(new Person
            {
                name = "People" + k.ToString(),

                address = "somewhere"+k.ToString()
            });

        }


        for (int i = 1; i < 50; i++)

        {

            Persons.Add(new PersonGroup("Group" + i.ToString(), peoplelist));

        }

    }
}

Model:

public class PersonGroup{
    public string GroupName { set; get; }
    
            public  PersonGroup(string name,List<Person>persons):base(persons)
            {
                GroupName = name;
            }
    
        }

result: