CODEWITHSUNDEEP
c#xamlxamarin.forms
hugo
hugo

Reputation: 475

Add the next 20 elements in CollectionView every time scrolling on collection view

My List MyWordsList has 10000 elements. I am Trying to add the next 100 elements in collectionview every time I scoll down.

Here is my code c#:

   public MainPage()
        {


Var MyWordsList  =  await mywordsdatabase.GetWords();
 WordSList.ItemsSource =MyWordsList.Take(100); // start with 100 elemets in the list;

 WordSList.RemainingItemsThreshold = 5;
 WordSList.RemainingItemsThresholdReached += WordSList_RemainingItemsThresholdReached;

        }       


        private void WordSList_RemainingItemsThresholdReached(object sender, EventArgs e)
        {
            // Load More Data Here when scroll down
            // Take the next 100 elements 
            // if all the elements are added do not add 


        }

Here is Xaml code :

<CollectionView x:Name="WordSList" ItemsLayout="Vertical"    >
     <CollectionView.ItemTemplate >
         <DataTemplate>

              <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                   <Label TextColor="#7D7D7D" Text="{Binding Word1}"  FontSize="15" />
                   <Label TextColor="Black" Text=" - "  FontSize="15" />
                   <Label TextColor="#0F9D58" Text="{Binding Word2}"  FontSize="15" />
                    </StackLayout>
        </DataTemplate>

     </CollectionView.ItemTemplate>
</CollectionView>

Thanks for your help

Upvotes: 0

Views: 832

Answers (2)

LarryX
LarryX

Reputation: 641

Not sure what is your intention here regarding the 10000 items. if you are fine to load them all at once

MyWordsList  =  await mywordsdatabase.GetWords();

Then you don't need the rest of code as CollectView supports virtualization through the underline control. You can feed the whole collection and it will dynamically allocate/deallocate the item UI element as needed efficiently.

If loading 10000 items from database takes too long, that is where you need to mess around with _RemainingItemsThreshold etc. First the database interface needs to be modified to be able to return only segment of items e.g. mywordsdatabase.GetWords(startIndex, count);Then it is probably a good idea to refer some of infinite scrolling implementation:

https://doumer.me/infinite-scroll-with-the-xamarin-forms-collection-view/

Upvotes: 0

Jason
Jason

Reputation: 89204

when you do this you are making a local variable that only exists in the method that contains it.

Var MyWordsList  =  await mywordsdatabase.GetWords();

because you want to use this data later, you need to make it a class variable. You also need a variable to store your data source in

List<MyClass> MyWordsList;
ObservableCollection<MyClass> datasource;
int ndx = 100;

public MainPage()
{
   MyWordsList  =  await mywordsdatabase.GetWords();
   WordSList.ItemsSource = datasource = new ObservableCollection<MyClass>(MyWordsList.Take(ndx));

   ...
   
}

then

private void WordSList_RemainingItemsThresholdReached(object sender, EventArgs e)
{
    datasource.AddRange(MyWordsList.Skip(ndx).Take(100));
    ndx += 100;
}

Upvotes: 1

Related Questions