Implement Pull-to-Refresh

• Jun 17, 2019
• 3 minutes to read

This example shows how to set up the grid so that it allows users to request a content update with the pull-down gesture. To do this, follow the steps below.

1. Set the DataGridView.IsPullToRefreshEnabled property to true to enable the grid’s pull-to-refresh functionality.

2. Create a command to be executed when a user pulls the grid down. Set the DataGridView.IsRefreshing property to false after data is refreshed to hide the refresh indicator in the grid.

3. Bind the DataGridView.PullToRefreshCommand property to the created command.

View Example

C#: Model

using System;
using Xamarin.Forms;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace DataGridView_PullToRefresh.Models {
    public class Product {
        string name;
        string resourceName;

        public string Name {
            get { return name; }
            set {
                name = value;
                if (Photo == null) { 
                    resourceName = "DataGridView_PullToRefresh.Images." + value + ".png";
                    if (!String.IsNullOrEmpty(resourceName))
                        Photo = ImageSource.FromResource (resourceName);
                }
            }
        }
        public Product(string name) {
            this.Name = name;
        }
        public ImageSource Photo { get; set; }
        public string Description { get; set; }
    }

    public class ProductData {
        readonly List<Product> products;
        public ObservableCollection<Product> Products { get; set; }

        public ProductData() : base() {
            this.products = new List<Product>();

            GenerateAllProducts();

            int index = new Random().Next (0, 5);
            Products = GenerateAvailableProducts (index);
        }
        ObservableCollection<Product> GenerateAvailableProducts(int number) {
            ObservableCollection<Product> availableProducts = new ObservableCollection<Product>();
            for (int i = 0; i < 4; i++)
                availableProducts.Add(products[number+i]);
            return availableProducts;
        }

        public void RefreshProducts() {
            int index = new Random().Next(0, 5);
            Products = GenerateAvailableProducts(index);
        }

        void GenerateAllProducts() {
            products.Add(new Product("Beverages") {Description = "Soft drinks, coffees, teas, beers, and ales"});
            products.Add(new Product("Condiments"){Description = "Sweet and savory sauces, relishes, spreads, and seasonings"});
            products.Add(new Product("Confections"){Description = "Desserts, candies, and sweet breads"});
            products.Add(new Product("DairyProducts"){Description = "Cheeses"});
            products.Add(new Product("Grains"){Description = "Breads, crackers, pasta, and cereal"});
            products.Add(new Product("MeatPoultry"){Description = "Prepared meats"});
            products.Add(new Product("Produce"){Description = "Dried fruit and bean curd"});
            products.Add(new Product("Seafood"){Description = "Seaweed and fish"});
        }
    }
}

C#: ViewModel

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Input;
using Xamarin.Forms;
using DataGridView_PullToRefresh.Models;

namespace DataGridView_PullToRefresh.ViewModels {
    public class ViewModel : INotifyPropertyChanged {
        ProductData data;

        bool isRefreshing = false;
        public bool IsRefreshing {
            get { return isRefreshing; }
            set {
                if (isRefreshing != value) {
                    isRefreshing = value;
                    OnPropertyChanged("IsRefreshing");
                }
            }
        }

        ObservableCollection<Product> products;
        public ObservableCollection<Product> Products {
            get { return products; }
            set {
                if (products != value) {
                    products = value;
                    OnPropertyChanged("Products");
                }
            }
        }

        ICommand pullToRefreshCommand = null;
        public ICommand PullToRefreshCommand {
            get { return pullToRefreshCommand; }
            set {
                if (pullToRefreshCommand != value) {
                    pullToRefreshCommand = value;
                    OnPropertyChanged("PullToRefreshCommand");
                }
            }
        }

        public ViewModel() {
            this.data = new ProductData();
            Products = data.Products;
            PullToRefreshCommand = new Command(ExecutePullToRefreshCommand);
        }

        void ExecutePullToRefreshCommand() {
            Task.Factory.StartNew(() => {
                Thread.Sleep(3000);
                Device.BeginInvokeOnMainThread(() => {
                    data.RefreshProducts();
                    Products = data.Products;
                    IsRefreshing = false;
                });
            });
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string name) {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }
}

XAML: View

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dxg="http://schemas.devexpress.com/xamarin/2014/forms/datagrid"
             xmlns:vm="clr-namespace:DataGridView_PullToRefresh.ViewModels"
             x:Class="DataGridView_PullToRefresh.MainPage">
    <ContentPage.BindingContext>
        <vm:ViewModel/>
    </ContentPage.BindingContext>
    <dxg:DataGridView ItemsSource="{Binding Products}" IsReadOnly="True"
                      IsPullToRefreshEnabled="true" 
                      PullToRefreshCommand="{Binding PullToRefreshCommand}" 
                      IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}">
        <dxg:DataGridView.Columns>
            <dxg:ImageColumn FieldName="Photo" Width="170" 
                             VerticalContentAlignment="Center" />
            <dxg:TemplateColumn FieldName="Name"  Caption="Product Category">
                <dxg:TemplateColumn.DisplayTemplate>
                    <DataTemplate>
                        <Grid BindingContext="{Binding Source}" VerticalOptions="Center" Padding="10,0,0,0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Label Text="{Binding Item.Name}" Font="Bold, 28"/>
                            <Label Text="{Binding Item.Description}" Grid.Row="1" Font="Medium"/>
                        </Grid>
                    </DataTemplate>
                </dxg:TemplateColumn.DisplayTemplate>
            </dxg:TemplateColumn>
        </dxg:DataGridView.Columns>
    </dxg:DataGridView>
</ContentPage>

Another way to implement the pull-to-refresh functionality is to handle the PullToRefresh event.