Skip to content

Xamarin Forms: Implementing Infinite Scroll on a ListView

March 19, 2015

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;
        }
    }

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: