.NET MAUI RefreshView Thresholds
The RefreshView thresholds define how far the user must pull the content before the indicator appears and before a refresh starts. Adjust the thresholds to prevent accidental refreshes or to make the gesture shorter on small screens.
Configure the Pull Distances
To configure the pull distances and the indicator size, use the following properties. All values are in device-independent .NET MAUI units:
IndicatorThreshold(double)—Specifies the pull distance at which the indicator starts to appear. The default value is0. If the value isn't less thanPullingThreshold, the indicator appears just before the pulling threshold is reached.PullingThreshold(double)—Specifies the pull distance required to start a refresh when the user releases the gesture. The default value is80. The value must be greater than0.IndicatorAreaLength(double)—Specifies the length of the refresh indicator along the pull direction. The default value is48. The value must be greater than0.
The RefreshView also exposes the read-only Progress (double) property. Progress returns the normalized pull progress from 0.0 to 1.0. The value is 1.0 while a refresh is in progress.
Set Custom Thresholds
The following example demonstrates how to set the IndicatorThreshold, PullingThreshold, and IndicatorAreaLength properties of the RefreshView.
-
Define the RefreshView in XAML:
XAML<telerik:RadRefreshView x:Name="refreshView" IndicatorThreshold="20" PullingThreshold="120" IndicatorAreaLength="64" Refreshing="OnRefreshing"> <VerticalStackLayout Padding="20" Spacing="10" BackgroundColor="#EEEEEE"> <VerticalStackLayout Spacing="4"> <HorizontalStackLayout> <Label Text="{Binding Source={x:Reference refreshView}, Path=IndicatorThreshold, StringFormat='IndicatorThreshold: {0:F0}'}" /> <Slider Maximum="60" Minimum="0" Value="{Binding Source={x:Reference refreshView}, Path=IndicatorThreshold}" /> </HorizontalStackLayout> <HorizontalStackLayout> <Label Text="{Binding Source={x:Reference refreshView}, Path=PullingThreshold, StringFormat='PullingThreshold: {0:F0}'}" /> <Slider Maximum="200" Minimum="80" Value="{Binding Source={x:Reference refreshView}, Path=PullingThreshold}" /> </HorizontalStackLayout> <HorizontalStackLayout> <Label Text="{Binding Source={x:Reference refreshView}, Path=IndicatorAreaLength, StringFormat='IndicatorAreaLength: {0:F0}'}" /> <Slider Maximum="120" Minimum="30" Value="{Binding Source={x:Reference refreshView}, Path=IndicatorAreaLength}" /> </HorizontalStackLayout> <Label Text="{Binding Source={x:Reference refreshView}, Path=Progress, StringFormat='Progress: {0:P0}'}" /> </VerticalStackLayout> <Label Text="Pull down and observe how the thresholds affect the gesture." /> <Label x:Name="statusLabel" Text="Not refreshed yet" /> </VerticalStackLayout> </telerik:RadRefreshView> -
Add the
teleriknamespace:XAMLxmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" -
Handle the
Refreshingevent and end the refresh when the data is loaded:C#private async void OnRefreshing(object sender, EventArgs e) { await Task.Delay(1500); this.refreshCount++; this.statusLabel.Text = $"Refreshed {this.refreshCount} time(s)"; this.refreshView.IsRefreshing = false; }
For a runnable example with the RefreshView Thresholds scenario, see the SDKBrowser Demo Application and go to the RefreshView > Configuration category.