Implementing Pull To Refresh With Collection View In .NET MAUI (MVVM)

Youtube: https://youtu.be/XBuSVcBdYo4

Refresh View: Add any view Inside Refresh View to achieve pull to refresh functionality. Let's go through the following examples.

Model:

Employee.cs

namespace MauiApp1.Models
{
    public class Employee
    {
        public string Name { get; set; }
        public string Address { get; set; }
        public string Email { get; set; }
    }
}
 

Views:

EmployeeListView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.Views.EmployeeListView"
             xmlns:viewModels="clr-namespace:MauiApp1.ViewModels"
             xmlns:models="clr-namespace:MauiApp1.Models"
             x:DataType="viewModels:EmployeeListViewModel"
             Title="Employee List">
    <ContentPage.BindingContext>
        <viewModels:EmployeeListViewModel />
    </ContentPage.BindingContext>
    <StackLayout Margin="10">
        <ActivityIndicator IsRunning="True" IsVisible="{Binding IsBusy}" HeightRequest="50" WidthRequest="50" HorizontalOptions="Center" />
        <RefreshView Command="{Binding PullToRefreshCommand}" IsRefreshing="{Binding IsRefreshing}">
            <CollectionView ItemsSource="{Binding Employees}" >
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="models:Employee">
                        <Grid RowDefinitions="5,Auto,5,1">
                            <StackLayout Grid.Row="1">
                                <Label Text="{Binding Name}" FontSize="18" FontAttributes="Bold" />
                                <Label Text="{Binding Email}" FontSize="16"  />
                                <Label Text="{Binding Address}" FontSize="16"  />
                            </StackLayout>
                            <BoxView Grid.Row="3" HeightRequest="1" BackgroundColor="Gray" />
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </RefreshView>
    </StackLayout>
</ContentPage>
 

ViewModels:

BaseViewModel.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
 
namespace MauiApp1.ViewModels
{
    public class BaseViewModel : INotifyPropertyChanged
    {
        private bool _isBusy;
        public bool IsBusy
        {
            get => _isBusy;
            set => SetProperty(ref _isBusy, value);
        }
 
        private bool _isRefreshing;
        public bool IsRefreshing
        {
            get => _isRefreshing;
            set => SetProperty(ref _isRefreshing, value);
        }
 
        protected bool SetProperty<T>(ref T backingStore, T value,
       [CallerMemberName] string propertyName = "",
       Action onChanged = null)
        {
            if (EqualityComparer<T>.Default.Equals(backingStore, value))
                return false;
 
            backingStore = value;
            onChanged?.Invoke();
            OnPropertyChanged(propertyName);
            return true;
        }
 
        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            var changed = PropertyChanged;
            if (changed == null)
                return;
 
            changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }
}
 

EmployeeListViewModel.cs

using MauiApp1.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
 
namespace MauiApp1.ViewModels
{
    public class EmployeeListViewModel : BaseViewModel
    {
        #region Properties
        public ObservableCollection<Employee> Employees { get; set; } = new ObservableCollection<Employee>();
        #endregion
 
 
        #region Constructor
        public EmployeeListViewModel()
        {
            AddDummyEmployeeList();
        }
        #endregion
 
        #region Methods
        private async void AddDummyEmployeeList()
        {
            IsBusy = true;
            await Task.Delay(500); // Write api call here and add that in list
            Employees.Clear();
            Employees.Add(new Employee { Name = "Pragnesh Mistry", Email = "test@gmail.com", Address = "India" });
            Employees.Add(new Employee { Name = "Janani", Email = "abc@gmail.com", Address = "India" });
            Employees.Add(new Employee { Name = "Rahul", Email = "xyz@gmail.com", Address = "India" });
            Employees.Add(new Employee { Name = "Ankit", Email = "test@gmail.com", Address = "India" });
            Employees.Add(new Employee { Name = "Vijay", Email = "test@gmail.com", Address = "India" });
            Employees.Add(new Employee { Name = "Jay", Email = "test@gmail.com", Address = "India" });
            IsBusy = false;
        }
        #endregion
 
 
        #region Commands
        public ICommand PullToRefreshCommand => new Command(() =>
        {
            IsRefreshing = false;
            AddDummyEmployeeList();
        });
        #endregion
 
 
    }
}
 

On App Start Navigate to EmployeeListView Page.

App.xaml.cs

using MauiApp1.Views;
 
namespace MauiApp1;
 
public partial class App: Application
{
    public App()
    {
	InitializeComponent();

        MainPage = new NavigationPage( new EmployeeListView());
    }
}