Adding "Pull To Refresh" To Your List In Xamarin.Forms

Targeted Audience

People with a basic knowledge of C# and Xamarin.

Tools

Visual Studio with Xamarin installed.

It is necessary to add "Pull to Refresh" to your lists when you are creating a list with a huge number of data because if you add or remove anything from the list, you will see the changes by refreshing it. So, this component is necessary for the ListView.

Let’s see how to achieve this functionality on a “Contact List” in simple steps.

Pull To Refresh

For the start, we have to create a ListView first for this purpose and have to insert some data into it. Add a class in your project with the name “Contacts” and create two properties “Name” and “Address” in it.

C# Code

public class Contacts
{
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private string address;
public string Address
{
get { return address; }
set { address = value; }
}
}

After that, in your XAML file, create a ListView. If you are not familiar with creating ListView, you can create it using the code given below.

XAML Code

<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:PracApp1"
x:Class="PracApp1.MainPage"
x:Name="ContentPage1">
<ListView x:Name="listView" IsPullToRefreshEnabled="True" Refreshing="ListView_Refreshing">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" Detail="{Binding Address}"></TextCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>

I have added two things here in the ListView - “IsPullToRefreshEnabled” allows enabling or disabling the refreshing; and “Refreshing” is basically the method which is called when the list is pulled to refresh.

Now, in the xaml.cs file, all we need is just to bind the list with the data and create the method for refreshing. You can use the code below.

C# Code

List<Contacts> GetContacts()
{
return new List<Contacts> {
new Contacts { Name = "Mosh", Address = "" },
new Contacts { Name = "John", Address = "Hey, Lets Talk!" }
};
}
private void ListView_Refreshing(object sender, EventArgs e)
{
listView.ItemsSource = GetContacts();
listView.EndRefresh();
}
public MainPage()
{
InitializeComponent();
listView.ItemsSource = GetContacts();
this.BindingContext = this;
}

What I have done here is that below IntializeComponent, I bind the item source of the list with a method which returns the list of two objects. Below that method, there is another method which will be called while refreshing. It also sets the list’s item source with the new contacts list. Also, you have to end refreshing as I did, otherwise the activity indicator will not disappear.

The result will be something like this on the iPhone device.

Adding Pull To Refresh To Your List In Xamarin.Forms

This article offered you a brief introduction of how to add "Pull to Refresh" to your list. Remember that the data I put here is just for example purposes. You can bind your list’s item source with the dynamic data. This is just for learning purposes.