Xamarin.Forms - Working with RefreshView

In this blog post, you will learn how to implement Pull to Refresh the Entire Page using RefreshView in Xamarin.Forms.

Introduction

Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files are most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.

RefreshView (Pull to Refresh)

RefreshView is a container control that provides a pull to refresh functionality for scrollable content. Therefore, the child of a RefreshView must be a scrollable control, such as ScrollView, CollectionView, or ListView.

Prerequisites

• Visual Studio 2017 or later (Windows or Mac)

Setting up a Xamarin.Forms Project

Start by creating a new Xamarin.Forms project. You wíll learn more by going through the steps yourself.

Create a new or existing Xamarin forms(.Net standard) Project. With Android and iOS Platform.

Use RefreshView

Make sure your Controls should be within ScrollView.

	<RefreshView IsRefreshing="{Binding IsRefreshing}" RefreshColor="Red"
	Command="{Binding RefreshViewCommand}">
	<ScrollView>
	// your controls
	</ScrollView>
	</RefreshView>

view raw RefreshView.xml hosted with ❤ by GitHub

Setting up the User Interface

Here, Add RefreshView in your View. Make sure your content should be within ScrollView.

MainPage.Xaml

	<?xml version="1.0" encoding="UTF-8"?>
	<Pages:XMonkeyBasePage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:Behavior="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
	xmlns:Pages="clr-namespace:XMonkey.Common.Pages"
	xmlns:CustomViews="clr-namespace:XMonkey.Common.CustomViews"
	x:Class="XMonkey.Views.BlogFeedPage">
	<NavigationPage.TitleView>
	<CustomViews:XMonkeyTitleView />
	</NavigationPage.TitleView>
	<Pages:XMonkeyBasePage.Behaviors>
	<Behavior:EventToCommandBehavior EventName="Appearing" Command="{Binding RefreshCommand}"/>
	<Behavior:EventToCommandBehavior EventName="Disappearing" Command="{Binding CleanUpCommand}"/>
	</Pages:XMonkeyBasePage.Behaviors>
	<Pages:XMonkeyBasePage.PageContent>
	<RefreshView IsRefreshing="{Binding IsRefreshing}"
	Command="{Binding RefreshViewCommand}">
	<ScrollView>
	<FlexLayout Direction="Column" Margin="0,100,0,0"
	AlignItems="Center">
	<Label FontSize="Large" Text="{Binding Name}"/>
	</FlexLayout>
	</ScrollView>
	</RefreshView>
	</Pages:XMonkeyBasePage.PageContent>
	</Pages:XMonkeyBasePage>

view raw RefreshView.xaml hosted with ❤ by GitHub

Add RefreshCommand 

Now, Add RefreshCommand for your RefreshView. This Command will perform while pull to refresh. After Refresh your data don't forget set IsRefreshing=false;

MainPageViewModel.cs

	namespace XMonkey.ViewModels
	{
	public class BlogFeedPageViewModel:BaseViewModel
	{
	#region Fields
	private string _name;
	private bool _isRefreshing;
	private Command _refreshViewCommand;
	#endregion
	#region Constructor
	public BlogFeedPageViewModel()
	{
	}
	#endregion
	#region Properties
	public string Name
	{
	get => _name;
	set => SetProperty(ref _name, value);
	}
	public bool IsRefreshing
	{
	get => _isRefreshing;
	set => SetProperty(ref _isRefreshing, value);
	}
	public Command RefreshViewCommand
	{
	get
	{
	return _refreshViewCommand ?? (_refreshViewCommand = new Command(() =>
	{
	this.RefreshData();
	}));
	}
	}
	#endregion
	#region Methods
	private void RefreshData()
	{
	//Do your stuff
	this.Name = "Delpin";
	this.IsRefreshing = false;
	}
	#endregion
	}
	}

view raw PageViewModel.cs hosted with ❤ by GitHub

Click the "Play" button to try it out.

Change Refresh ActivityIndicator Color

Now, Change Refresh ActivityIndicator Color. Set RefreshColor="Color", Check bellow code.

MainPage.xaml

	<RefreshView IsRefreshing="{Binding IsRefreshing}" RefreshColor="Red"
	Command="{Binding RefreshViewCommand}">
	<ScrollView>
	<FlexLayout Direction="Column" Margin="0,100,0,0"
	AlignItems="Center">
	<Label FontSize="Large" Text="{Binding Name}"/>
	</FlexLayout>
	</ScrollView>
	</RefreshView>

view raw RefreshView.xaml hosted with ❤ by GitHub

Click the "Play" button to try it out.

Wow, It's Working.😍

I hope you have understood how to use implement Pull to Refresh the Entire Page using RefreshView in Xamarin.Forms.

Thanks for reading. Please share your comments and feedback. Happy Coding 😀