Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Xamarin.Forms ListView Load More

The Problem

What I want to achieve can you basically see here

enter image description here

so when the user scrolls to the end I want to load more, because my List is very large and I want to Maximize Performance.

I'm trying to achieve this as follows, in splitting the Main Collection with the Data so that i can set the ItemSource new when the User reaches the end.

What ive Implemented so far

 public class ViewModel : BaseViewModel {

        public ViewModel() {
            Initialize();
        }

        public List<List<Usermodel>> SplitedUserLists { get; set; }

        //Main List that im Binding to
        public List<Usermodel> ItemSourceCollection { get; set; }

        public int ChunkSize { get; set; }
        #endregion

        private async void Initialize() {

            ItemSourceCollection = await LoadList();

            // Splites the list (in this case the chunk Size is 5)
            SplitedScoreLists = ItemSourceCollection.Split(GetChunkSize()));
            ItemSourceCollection = SplitedScoreLists[0];
        }

        //Gets called from CodeBehind
        public void ListViewItemAppearing(ItemVisibilityEventArgs e) {

            //Bottom Hit!
            if (e.Item == ItemSourceCollection[ItemSourceCollection.Count - 1]) {

                if (ChunkSize >= SplitedScoreLists.Count) {
                    return;
                }

                foreach (var usermodel in SplitedScoreLists[ChunkSize].ToList()) {
                    ItemSourceCollection.Add(usermodel);
                }

                if (ChunkSize < SplitedScoreLists.Count) {
                    ChunkSize++;
                }
            }
        }
 }

Questions

  1. The problem with my Implementation is that the List is actually longer than the Count of the original List due to duplicates.

  2. Is this the right way to achieve something like this?

  3. Am I actually increasing Performance with this? I need to cause the List is 1000+ entries.

like image 445
iNCEPTiON_ Avatar asked Mar 29 '17 19:03

iNCEPTiON_


1 Answers

There are nice tutorials on how to achieve this:

http://motzcod.es/post/107620279512/load-more-items-at-end-of-listview-in

https://github.com/jguibault/Xamarin-Forms-Infinite-Scroll

http://www.codenutz.com/lac09-xamarin-forms-infinite-scrolling-listview/

The key point is when to raise the "load more" command:

public class InfiniteListView : ListView
{
    public static readonly BindableProperty LoadMoreCommandProperty = BindableProperty.Create<InfiniteListView, ICommand>(bp => bp.LoadMoreCommand, default(ICommand));

    public ICommand LoadMoreCommand
    {
        get { return (ICommand) GetValue(LoadMoreCommandProperty); }
        set { SetValue(LoadMoreCommandProperty, value); }
    }

    public InfiniteListView()
    {
        ItemAppearing += InfiniteListView_ItemAppearing;
    }

    void InfiniteListView_ItemAppearing(object sender, ItemVisibilityEventArgs e)
    {
        var items = ItemsSource as IList;

        if (items != null && e.Item == items[items.Count - 1])
        {
            if(LoadMoreCommand != null && LoadMoreCommand.CanExecute(null))
                LoadMoreCommand.Execute(null);
        } 
    }
}
like image 177
Mario Galván Avatar answered Oct 15 '22 04:10

Mario Galván