Pull-to-refresh with Xamarin.Forms RefreshView



There are tons of great new features packed into Xamarin.Forms 4.3. A new favorite feature is CollectionView. A highly performant and flexible way of displaying a list of data in a variety of layouts. One frequently-asked question with CollectionView, or other scrolling layouts, is how to add Pull-to-Refresh functionality similar to ListView. The answer: wrap it in the new RefreshView.

Xamarin.Forms RefreshView

This control was introduced alongside CollectionView in Xamarin.Forms 4.3. Which gives you complete control over adding pull-to-refresh to any scrollable control. Let’s take a look at how easy it is to add pull-to-refresh to your app with RefreshView.

Screenshot of a RefreshView refreshing data, on iOS and Android

To setup the code we will need a CollectionView:

In our ViewModel, or code behind, setup an ICommand to be executed when the refresh happens. This acts as the binding property called IsRefreshing that is a boolean to control when the RefreshView is active.

Now, all we need to do is wrap the CollectionView inside of a RefreshView. Then bind the IsRefreshing and Command properties to our properties in our ViewModel.

When running the application, we can now perform a pull-to-refresh on our CollectionView.

Xamarin.Forms RefreshView Android pull-to-refresh enabled.

Controlling IsRefreshing

In the example above, the RefreshView will set IsRefreshing to “True” when the user pulls down. Then manually set the property to false to stop the RefreshView from showing. Use the IsRefreshing property as a gate to control if the data should be refreshed to include a binding mode. This is so that only the code behind updates the property.

In the ViewModel we can now check against the property and set it both ways:

Learn More

Learn more about RefreshView from our amazing documentation. With details such as setting the refresh color, disabling refresh, and even controlling the pull direction on UWP.

James Montemagno

Principal Program Manager, Mobile Developers Tools

Follow James   


    Leave a comment