.NET MAUI RefreshView Commands
The RefreshView executes a command when a refresh starts. Use the command to load data in your view model when you follow the Model-View-ViewModel (MVVM) pattern.
Refresh Command Properties
The RefreshView exposes the following command properties:
Command(ICommand)—Specifies the command that the RefreshView executes when a refresh starts. The command executes before theRefreshingevent, if the command can execute.CommandParameter(object)—Specifies the parameter passed to theCommand.
While the CanExecute method of the command returns false, pull gestures don't start a refresh. Setting IsRefreshing to true still starts a refresh.
Execute a Command on Refresh
The following example demonstrates how to bind the Command, CommandParameter, and IsRefreshing properties of the RefreshView to a view model.
-
Define the RefreshView in XAML:
XAML<telerik:RadRefreshView Grid.Row="1" IsRefreshing="{Binding IsRefreshing}" Command="{Binding RefreshCommand}" CommandParameter="News"> <VerticalStackLayout Padding="20" Spacing="10" BackgroundColor="#EEEEEE"> <Label Text="Pull down to execute the RefreshCommand." /> <Label Text="{Binding Headline}" FontAttributes="Bold" /> <Label Text="{Binding Status}" TextColor="Gray" /> </VerticalStackLayout> </telerik:RadRefreshView> -
Add the
teleriknamespace:XAMLxmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" -
Define the command in your view model. When the data is loaded, set
IsRefreshingtofalseto end the refresh:C#public class ViewModel : NotifyPropertyChangedBase { private readonly string[] headlines = { "Telerik UI for .NET MAUI ships a new RefreshView", "Pull-to-refresh now works with any content", "Customize the refresh indicator with styles and templates", }; private readonly Command refreshCommand; private bool isRefreshing; private bool canRefresh = true; private int refreshCount; private string headline; private string status = "Not refreshed yet"; public ViewModel() { this.headline = this.headlines[0]; this.refreshCommand = new Command(this.ExecuteRefresh, this.CanExecuteRefresh); } public ICommand RefreshCommand => this.refreshCommand; public bool IsRefreshing { get => this.isRefreshing; set => this.UpdateValue(ref this.isRefreshing, value); } public bool CanRefresh { get => this.canRefresh; set { if (this.UpdateValue(ref this.canRefresh, value)) { this.refreshCommand.ChangeCanExecute(); } } } public string Headline { get => this.headline; set => this.UpdateValue(ref this.headline, value); } public string Status { get => this.status; set => this.UpdateValue(ref this.status, value); } private bool CanExecuteRefresh(object parameter) => this.CanRefresh; private async void ExecuteRefresh(object parameter) { await Task.Delay(1500); this.refreshCount++; this.Headline = this.headlines[this.refreshCount % this.headlines.Length]; this.Status = $"{parameter} refreshed {this.refreshCount} time(s)"; this.IsRefreshing = false; } }
For a runnable example demonstrating the RefreshView commands, see the SDKBrowser Demo Application and go to the RefreshView > Commands category.