A Simple Proccesable Code to Add a Pull to Refresh Effect in Your Xamarin.Forms

Posted by Anuj Singh on December 12th, 2019

Today there are a ton of technologies and frameworks are come up with a multi-functionality package and promising to tot some awesomeness in the applications. Likewise, the most stylish and the trendiest cross-platform app development environment Xamarin is granting the developers to add a pull to refresh or refreshview in the mobile application using the Xamarin.Forms. In the same way of CollectionView, the Xamarin.Forms 4.3 has introduced the RefreshView. This gives the developers an entire control on the adding of a pull to refresh functionality with the scroll control of the application. So, let’s start to write the code to add a RefreshView in your in an application:

To start with the code writing, for the first, you need a CollectionView to setup the code;

<CollectionView ItemsSource="{Binding Items}">

<CollectionView.ItemsLayout>

<LinearItemsLayout Orientation="Vertical"/>

</CollectionView.ItemsLayout>

<!-- Add ItemTemplate Here -->

</CollectionView>

The RefreshView will go active when the Icommand setup will be executed on the ViewModel on the refresh event of the app. This enacts as the binding property is known as IsRefreshing.

public ICommand RefreshCommand { get; }

public ItemsViewModel()

{

    Title = "Browse";

    Items = new ObservableCollection<Item>();

    RefreshCommand = new Command(ExecuteRefreshCommand);

}

 bool isRefreshing;

public bool IsRefreshing

{

    get => isRefreshing;

    set

    {

        isRefreshing = value;

        OnPropertyChanged(nameof(IsRefreshing));

    }

}

 void ExecuteRefreshCommand()

{

    Items.Clear();

    Items.Add(new Item { Text = "Refreshed Data", Description = "Whoa!" });

        // Stop refreshing

    IsRefreshing = false;

}

Now, it’s the time to combine the CollectionView within the RefreshView. After that you need to bind the properties of the IsRefreshing and Icommand with the properties og the ViewModel. See the mentioned code:

<RefreshView IsRefreshing="{Binding IsRefreshing}"

Command="{Binding RefreshCommand}">

<CollectionView ItemsSource="{Binding Items}">

<CollectionView.ItemsLayout>

<LinearItemsLayout Orientation="Vertical"/>

</CollectionView.ItemsLayout>

<!-- Add ItemTemplate Here -->

</CollectionView>

</RefreshView>

To check the code performance, for the pull to refresh functionality in the collectionview, you need to run the application.

While for the perfect execution of the code, it is required to make some important settings in the properties of the refreshview as set the IsRefreshing to “True” when the user pulls down, and then manually set the property to “False” to stop the RefreshView.

<RefreshView IsRefreshing="{Binding IsRefreshing, Mode=OneWay}"

             Command="{Binding RefreshCommand}">

   <!-- CollectionView -->

</RefreshView>

Use the ViewModel to set and check the property:

void ExecuteRefreshCommand()

{

if (IsRefreshing)

return;

IsRefreshing = true;

Items.Clear();

Items.Add(new Item { Text = "Refreshed Data", Description = "Whoa!" });

IsRefreshing = false;

}