Pull To Refresh for Xamarin.Forms iOS

James Montemagno -

Update Xamarin.Forms now includes Pull To Refesh out of the box. Please read my article on it.

If you have read my blog then you know that I love pull to refresh functionality in all of my apps. Your users are expecting this functionality in all of their apps and I believe that it should be drop dead simple to bing pull to refresh to an MVVM style of development.

Xamarin.Forms shines in a lot of areas and the team has made it really easy to extend the built in controls or add brand new controls while allowing you to create custom bindable properties. So naturally we should add a bindable pull to refresh for iOS since it is built right into the framework of UITableView.

Custom ListView

So first thing first, let’s create a brand new PullToRefreshListView that will derive from Xamarin.Forms.ListView. We will add 3 new bindable properties to it, which are IsRefreshing to tell the spinner to show, RefreshCommand for what to execute when your users pulls down, and finally Message which is an optional string to display under the spinner. This code will go into our shared code:





Custom UIRefreshControl



Now let’s setup our custom implementation down in our iOS project. I am first going to create my own custom UIRefreshControl with bindable properties on it. You will notice this is nearly the same code as my MvvmCross implementation, because we are basically doing the same thing. I create the same 3 custom properties, but implement them to actually trigger the command or being/end refreshing of the control:



Customer ListView Renderer



Xamarin.Forms is pretty brilliant as you can create your very own custom “Renderers”. This allows you to extend a current control or build your own. There is a wonderful video by Mark Smith on the Xamarin Forums on how to do it yourself in detail. The concept is that every built in control in Xamarin.Forms has a shim renderer on top of it which you can get property change notifications and have access to the Xamarin.Forms “control” such as our new PullToRefreshListView and also the native control, in this case the UITableView. This is awesome, so now we can create a brand new FormsUIRefreshControl when our ListView is created, and then we will subscribe to property change notifications and update the control:



Finally let’s put this thing onto the screen! So I am going to first create a small little ViewModel that has some bindable properties on it, and a Command that I want to be triggered when my user pulls to refresh. Nothing crazy here if you have done MVVM style programming and implementing INotifyPropertyChanged, which is how Xamarin.Forms knows how to trigger updates:



Put it on the page



Finally let’s bind up a new page with our custom properties that will display. I am just updating the default App.cs file here to add our new PullToRefreshListView to a new page and setting the BindingContext of the page to our TestViewModel:



If that wasn’t enough, here is a full video walkthrough and all of the source code is on GitHub: