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()); } }
No comments:
Post a Comment