Introducing the New .NET MAUI PullToRefresh Control
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (28).NET MAUI  (215)Angular  (112)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (228)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (69)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (82)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (948)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (160)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (158)Chart  (141)Chart of the week  (55)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (70)Development  (662)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (513)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (619)What's new  (334)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New .NET MAUI PullToRefresh Control

Introducing the New .NET MAUI PullToRefresh Control

In Syncfusion’s Essential Studio 2023 Volume 4 release, we introduced a new PullToRefresh control for the .NET MAUI platform.

The .NET MAUI PullToRefresh (SfPullToRefresh) control allows you to refresh the content displayed within it through a simple pull-to-refresh action. It can load various UI views in its pulling pane, enabling users to initiate the refresh action by pulling down from the top of the view. Additionally, the control offers support for different transition modes and allows comprehensive customization of the user interface.

Let’s explore the key features of this new control and the steps to get started with it!

Key features

The key features of the .NET MAUI PullToRefresh control are:

Pullable content

The .NET MAUI PullToRefresh control allows us to display complex views like the ListView, DataGrid, and other customized layouts within the pullable pane using the PullableContent property and update the data by performing a pull action.

Transition modes

You can enhance the user experience with animated transitions between the pullable content and the refresh indicator when a user performs a pull action. This can be achieved by setting the TransitionMode property.

The PullToRefresh control supports the following two types of built-in transitions:

  • TransitionMode.SlideOnTop: The progress animation slides over the pullable content.
  • TransitionMode.Push: The pullable content gets pushed aside to reveal the progress animation.

Refer to the following images.

.NET MAUI PullToRefresh with SlideOnTop transition mode.NET MAUI PullToRefresh with Push transition mode

Different transition modes in .NET MAUI PullToRefresh control

Custom appearance

You can customize the stroke color, stroke thickness, background, height, and width of the refresh indicator.

Customizing the appearance of the refresh indicator in the .NET MAUI PullToRefresh control
Customizing the appearance of the refresh indicator in the .NET MAUI PullToRefresh control

View templating

Display any view or control in the progress indicator view for both pulling and refreshing actions by setting the SfPullToRefresh.PullingViewTemplate and SfPullToRefresh.RefreshingViewTemplate properties, respectively.

Custom view template feature in .NET MAUI PullToRefresh control
Custom view template feature in .NET MAUI PullToRefresh control

Programmatic support

The PullToRefresh control also allows programmatic refreshing support without UI interaction:

  • StartRefreshing(): To refresh the content without interaction in pullable content.
  • EndRefreshing(): To end the progress animation once the content is refreshed.

Note: For more details, refer to the .NET MAUI PullToRefresh control documentation.

Getting started with the .NET MAUI PullToRefresh control

We have seen the key features of the .NET MAUI PullToRefresh control. Let’s see how to add it to your application.

Step 1: Create a .NET MAUI project

First, create a .NET MAUI project.

Step 2: Add the required NuGet package

Syncfusion .NET MAUI controls are available in the NuGet Gallery. To add the .NET MAUI PullToRefresh control to your project, open the NuGet package manager in Visual Studio, and search for Syncfusion.Maui.PullToRefresh, and then install it.

Step 3: Register the handler

In the MauiProgram.cs file, register the handler for Syncfusion core. Refer to the following code.

using Syncfusion.Maui.Core.Hosting;
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
	var builder = MauiApp.CreateBuilder();
	builder
	   .UseMauiApp<App>()
	   .ConfigureSyncfusionCore()
	   .ConfigureFonts(fonts =>
	   {
		fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
	        fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                fonts.AddFont("Roboto-Medium.ttf", "Roboto-Medium");
                fonts.AddFont("Roboto-Regular.ttf", "Roboto-Regular");
            });
	return builder.Build();
    }
}

Step 4: Add the namespace

Add the Syncfusion.Maui.PullToRefresh namespace in your XAML page.

<xmlns:syncfusion ="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.PullToRefresh">

Step 5: Initialize the .NET MAUI PullToRefresh control

Then, initialize the .NET MAUI PullToRefresh control using the included namespace.

<syncfusion:SfPullToRefresh x:Name="pullToRefresh"/>

Step 6: Defining the PullableContent

You can set any view as the PullableContent for the SfPullToRefresh control. Refer to the following code example.

<?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="GettingStarted.MainPage"
             xmlns:sync="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.PullToRefresh;assembly=Syncfusion.Maui.PullToRefresh"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             xmlns:local="clr-namespace:GettingStarted">
    <ContentPage.Behaviors>
        <local:PullToRefreshViewBehavior />
    </ContentPage.Behaviors>
    
    <ContentPage.Content>
        <syncfusion:SfPullToRefresh x:Name="pullToRefresh"
                                    PullingThreshold="100"
                                    RefreshViewThreshold="2"
                                    TransitionMode="Push">
            <syncfusion:SfPullToRefresh.PullableContent>
                <Grid x:Name="mainGrid"
                      RowSpacing="0"
                      BackgroundColor="{Binding Data.BackgroundColor}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="106" />
                    </Grid.RowDefinitions>
                    <ScrollView VerticalScrollBarVisibility="Never"
                                VerticalOptions="Center"
                                Grid.Row="0">
                        <Grid>
                             .......
                             .......
                             .......
                             .......
                        </Grid>
                    </ScrollView>
                    
                    <Grid x:Name="listViewGrid"
                          Grid.Row="1"
                          BackgroundColor="#61FFFFFF"
                          VerticalOptions="End">
                        <sync:SfListView x:Name="listView"
                                         ItemsSource="{Binding SelectedData}">
                            .......
                            .......
                            .......
                            
                        </sync:SfListView>
                    </Grid>
                </Grid>
            </syncfusion:SfPullToRefresh.PullableContent>
        </syncfusion:SfPullToRefresh>
    </ContentPage.Content>
</ContentPage>

Step 7: Refresh the content by executing the pull-to-refresh action

Users can initiate the refresh action by pulling down from the top of the view. Display the progress indicator by setting the SfPullToRefresh.IsRefreshing property to True before updating the content. To hide it, set the property to False after updating the content in the SfPullToRefresh.Refreshing event.

this.pullToRefresh.Refreshing += this.PullToRefresh_Refreshing;

private void PullToRefresh_Refreshing(object? sender, EventArgs args)
{
    this.pullToRefresh!.IsRefreshing = true;
    Dispatcher.StartTimer(
        new TimeSpan( 0, 0, 0, 1, 3000), () =>
        {
            this.UpdateData();
            this.pullToRefresh.IsRefreshing = false;
            return false;
        });
}

After executing these code examples, we’ll get output like in the following image.

Integrating PullToRefresh control in .NET MAUI app
Integrating PullToRefresh control in the .NET MAUI app

GitHub reference

For more details, refer to the .NET MAUI PullToRefresh control demo on GitHub.

Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new Syncfusion .NET MAUI PullToRefresh control rolled out in the 2023 Volume 4 release. Try out them and leave your feedback in the comments section given below!

Check out our Release Notes and What’s New pages to see other controls and features available with this release. For existing Syncfusion customers, the new version is available on the License and Downloads page. If you’re not yet our customer, you can sign up for a 30-day free trial to evaluate these features.

For questions, you can reach us through our support forumssupport portal, or feedback portal.

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed