Infinite Scrolling in Xamarin.Forms
Behaviors are one of the extremely useful features of Xamarin.Forms. It allows the developer to extend the already existing control and add new features.
Developers have to create a class that inherits from Behavior<T> where ‘T’ is a control that is being extended.
ListView is a control to show the list of objects. Once in a while, Developers need to fetch more data as a user scrolls (For example User feed in Facebook i.e. new user feed is fetched as user scrolls). As there is no existing option for this feature, we will create a Behavior that can accommodate this feature.
- Create a new Mobile App (Xamarin.Forms), provide project and solution name and select blank,
2. Create a Folder named “Behaviors” and add the class InfiniteScroll inside it.
3. Inherit the class Behavior which lies in namespace Xamarin.Forms and add the following codes,
public class InfiniteScroll : Behavior<ListView>
{
public static readonly BindableProperty LoadMoreCommandProperty =
BindableProperty.Create(nameof(LoadMoreCommand), typeof(ICommand), typeof(InfiniteScroll), null);
public ICommand LoadMoreCommand
{
get
{
return (ICommand)GetValue(LoadMoreCommandProperty);
}
set
{
SetValue(LoadMoreCommandProperty, value);
}
}
public ListView AssociatedObject
{
get;
private set;
}
protected override void OnAttachedTo(ListView bindable)
{
base.OnAttachedTo(bindable);
AssociatedObject = bindable;
bindable.BindingContextChanged += Bindable_BindingContextChanged;
bindable.ItemAppearing += InfiniteListView_ItemAppearing;
}
private void Bindable_BindingContextChanged(object sender, EventArgs e)
{
OnBindingContextChanged();
}
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
BindingContext = AssociatedObject.BindingContext;
}
protected override void OnDetachingFrom(ListView bindable)
{
base.OnDetachingFrom(bindable);
bindable.BindingContextChanged -= Bindable_BindingContextChanged;
bindable.ItemAppearing -= InfiniteListView_ItemAppearing;
}
void InfiniteListView_ItemAppearing(object sender, ItemVisibilityEventArgs e)
{
IList items = AssociatedObject.ItemsSource as IList;
if (items != null && e.Item == items[items.Count - 1])
{
if (LoadMoreCommand != null && LoadMoreCommand.CanExecute(null)) LoadMoreCommand.Execute(null);
}
}
}The above code will create a Command named ‘LoadMoreCommandProperty’ which will be invoked when the last item in the source of the list is displayed. We override OnAttachedTo and OnDetachingFrom methods to bind our context and attach event handler in the ItemApperating event of ListView. InfiniteListView_ItemAppearing method is responsible for executing the LoadMoreCommand if the appearing item is the last in a source.
4. Let us create a Store to fetch the paginated data.
public static class NewsStore
{
private const int PageSize = 10;
private static readonly List<string> _news = new List<string>();
static NewsStore()
{
_news.Add("1");
_news.Add("2");
_news.Add("3");
_news.Add("4");
_news.Add("5");
_news.Add("6");
_news.Add("7");
_news.Add("8");
_news.Add("9");
_news.Add("10");
_news.Add("11");
_news.Add("12");
_news.Add("13");
_news.Add("14");
_news.Add("15");
_news.Add("16");
_news.Add("17");
_news.Add("18");
_news.Add("19");
_news.Add("20");
}
public static List<string> GetNews(int page)
{
return _news.Skip((page - 1) * PageSize).Take(PageSize).ToList();
}
}Here NewsStore is a static data store that returns the paginated data from a static List. PageSize is a constant value of 10, so with each load 10 new data is returned when the GetNews method is called.
In real world scenario, data can be fetched from database or from rest API.
5. Let us create a NewsViewModel class to act as a ViewModel of this application.
public class NewsViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private int _currentPage;
public int CurrentPage
{
get { return _currentPage; }
set { _currentPage = value; }
}
public ObservableCollection<string> News
{
get;
set;
}
public ICommand LoadMore
{
get;
set;
}
public NewsViewModel()
{
News = new ObservableCollection<string>(DataStore.NewsStore.GetNews(1));
OnpropertyChanged(nameof(News));
CurrentPage = 2;
LoadMore = new Command(() =>
{
var newNews = DataStore.NewsStore.GetNews(CurrentPage);
CurrentPage++;
foreach (var item in newNews)
{
News.Add(item);
OnpropertyChanged(nameof(News));
}
});
}
void OnpropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}The NewsViewModel will contain a command which is executed when the last item is displayed in mobile view and a List that acts as a source of ListView. This ViewModel will fetch data from the NewsStore which we created in the last step.
6. Add a Listview in MainPage,
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="InfiniteScrollApp.MainPage"
xmlns:b="clr-namespace:InfiniteScrollApp.Behaviors">
<ListView ItemsSource="{Binding News}">
<ListView.Behaviors>
<b:InfiniteScroll LoadMoreCommand="{Binding LoadMore}" />
</ListView.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Label Text="{Binding .}" />
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>7. Finally, Set the BindingContext to a new instance of NewsViewModel.
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.BindingContext = new NewsViewModel();
}
}Now if you run the app you will get new data as you scroll.