I’ve spent quite a bit of time with Xamarin over the last year. It’s ability to create cross platform mobile applications at an incredibly efficient rate continues to impress me. One feature I find myself implementing on almost every project is infinite scrolling. Today I will walk you through implementing infinite scrolling.

The main goal with this style of infinite loading, is to prevent the user from ever seeing the “end of the page.” We accomplish this by invoking the onAppearing function of the ListView; As you get near the bottom, the web service loads more data in the background. When the changes hit the ObservableCollection, the UI immediately reflects the changes.

You can find the full source here:

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

    public class InfiniteScrollExample : ContentPage
    {
        private int itemsPerPage = 20;
        private int pageNumber;
        private bool dataLoading;
        private ObservableCollection<TextCellData> UIData;

        protected override void OnAppearing()
        {
            base.OnAppearing ();
            pageNumber = 0;
            UIData = new ObservableCollection<TextCellData>(FakeWebService.GetData (pageNumber, itemsPerPage));

            var list = new ListView ();
            var cell = new DataTemplate (typeof (TextCell)); 
            cell.SetBinding (TextCell.TextProperty, Text);
            cell.SetBinding (TextCell.DetailProperty, Detail);
            list.ItemTemplate = cell;
            list.ItemsSource = UIData;

            list.ItemAppearing += (object sender, ItemVisibilityEventArgs e) => {
                var item = e.Item as TextCellData;
                int index = UIData.IndexOf(item);
                if(UIData.Count  2 <= index)
                    AddNextPageData();
            };
            list.ItemTapped += (sender, args) => {
                System.Diagnostics.Debug.WriteLine (ItemTapped);
            };

            Content = list;
        }

        private void AddNextPageData() {
            if (dataLoading)
                return;

            dataLoading = true;

            pageNumber++;
            List<TextCellData> nextPage = FakeWebService.GetData (pageNumber, itemsPerPage);
            foreach(var item in nextPage)
                UIData.Add(item);

            dataLoading = false;
        }
    }

public class TextCellData {

        public string Text {get;set;}
        public string Detail {get;set;}

        public TextCellData(string t, string d) {
            Text = t;
            Detail = d;
        }
    }

 public static class FakeWebService

    {
        public static List<TextCellData> GetData(int pageNumber, int pageLength) {
            List<TextCellData> data = new List<TextCellData> ();

            for (int i = (pageNumber * pageLength); i < (pageNumber + 1) * pageLength; i++) {
                data.Add (new TextCellData(Item  + i.ToString (), Infinite Scroll Example));
            }

            return data;
        }
    }

Leave a comment
%d bloggers like this: