Xamarin Forms Pull To Refresh With ListView

The Xamarin Forms ListView control has the ability to allow the user to pull down from the top of the ListView to trigger a refresh command. I say a refresh command, because the pull to refresh, just triggers a command and you can do whatever you want in that command, including not updating the ListView.

Properties

There are 3 properties you need to be aware of to implement the pull to refresh functionality.

 <ListView ItemsSource="{Binding MyList}"
           IsPullToRefreshEnabled="True"
           RefreshCommand="{Binding RefreshCommand}"
           IsRefreshing="{Binding IsRefreshing}" />

Set IsPullToRefreshEnabled=”True” to enable the functionality, then create these 2 properties in your ViewModel.

private bool _isRefreshing = false;
public bool IsRefreshing { 
get { return _isRefreshing; }
set {
    _isRefreshing = value;
    OnPropertyChanged(nameof(IsRefreshing));
    }
}
public ICommand RefreshCommand
{
    get {
        return new Command(async () =>
        {
            IsRefreshing = true;
            
            await RefreshData();

            IsRefreshing = false;
        });
    }
}

Now when you pull down from the top of the listview, it will show a refresh animation, while IsRefreshing=”true”.

Pull To Refresh Android  Pull To Refresh iOS

Pull To Refresh Customization

On each platform we can customize a small part of the refresh animation.

Android

Android uses the SwipeRefreshLayout control to display an animation while the ListView is being updated. The SwipeRefreshLayout is internal in the ListViewRenderer, hence you are not able to call any properties on it directly, unless you want to write a whole new ListViewRenderer. However, due to Android’s styles, you can use these styles to override 3 color elements.

<color name="refresh_progress_1">@color/theme_accent_2</color>
<color name="refresh_progress_2">@color/theme_accent_1</color>
<color name="refresh_progress_3">@color/theme_primary</color>

iOS

In iOS the UIRefreshControl to display the animation while refreshing data. The UIRefreshControl has a TintColor and AttributedTitle, however unlike Android, we have a way to interact with this control. The ListViewRenderer has a ViewController, which is actually a UITableViewController. From here we can reach the RefreshControl.

[assembly: ExportRenderer(typeof(ListView), typeof(ListViewRender))]
namespace Mobile.iOS
{
    public class ListViewRender: ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);

            ((UITableViewController)ViewController).RefreshControl.TintColor = UIColor.Red;
        }
    }
}

Limitations

  • Not available on UWP, or Windows Phone 8.1
  • Not able to easily customize the refresh animation.
  • Only limited styling options available.
Microsoft MVP (Xamarin) | Exrin | Xamarin Forms Developer | Melbourne, Australia | Open to sponsorship to Canada or US

Related Posts

Leave A Comment?