Introducing the New .NET MAUI PullToRefresh Control
Tags: dotnetmaui, mobile, desktop, ui
Published: 2024-01-19 13:04:52

---
title: Introducing the New .NET MAUI PullToRefresh Control
published: true
date: 2024-01-03 12:46:55 UTC
tags: dotnetmaui, mobile, desktop, ui
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-pull-to-refresh.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zf9sj9ntnqo2shhby5dp.png
---
In Syncfusion’s [Essential Studio 2023 Volume 4 ](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4")release, we introduced a new PullToRefresh control for the [.NET MAUI](https://www.syncfusion.com/maui-controls/ ".NET MAUI controls") platform.

The [.NET MAUI PullToRefresh](https://www.syncfusion.com/maui-controls/maui-pull-to-refresh ".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](#Pullable)
- [Transition modes](#Transition)
- [Custom appearance](#Custom)
- [View templating](#View)
- [Programmatic support](#Programmatic)

### <a name="Pullable">Pullable content</a>

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.

### <a name="Transition">Transition modes</a>

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.
<table>
<tbody>
<tr style="background: none;">
<td style="width: 50%; border: none !important;"><img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/NET-MAUI-PullToRefresh-with-SlideOnTop-transition-mode.gif" alt=".NET MAUI PullToRefresh with SlideOnTop transition mode" width="298" height="547" class="aligncenter wp-image-127453 " /></td>
<td style="width: 50%; border: none !important;"><img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/NET-MAUI-PullToRefresh-with-Push-transition-mode.gif" alt=".NET MAUI PullToRefresh with Push transition mode" width="298" height="547" class="aligncenter wp-image-127455 " /></td>
</tr>
</tbody>
</table>
<figcaption>Different transition modes in .NET MAUI PullToRefresh control</figcaption>

### <a name="Custom">Custom appearance</a>

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/NET-MAUI-PullToRefresh-with-appearance-customized-progress-indicator.gif" alt="Customizing the appearance of the refresh indicator in the .NET MAUI PullToRefresh control" style="width:100%">

  <figcaption>Customizing the appearance of the refresh indicator in the .NET MAUI PullToRefresh control</figcaption>

</figure>
### <a name="View">View templating</a>

Display any view or control in the progress indicator view for both pulling and refreshing actions by setting the [SfPullToRefresh.PullingViewTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PullToRefresh.SfPullToRefresh.html#Syncfusion_Maui_PullToRefresh_SfPullToRefresh_PullingViewTemplate "PullingViewTemplate property of .NET MAUI PullToRefresh control") and [SfPullToRefresh.RefreshingViewTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PullToRefresh.SfPullToRefresh.html#Syncfusion_Maui_PullToRefresh_SfPullToRefresh_RefreshingViewTemplate "RefreshingViewTemplate property of .NET MAUI PullToRefresh control") properties, respectively.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/NET-MAUI-PullToRefresh-with-pulling-and-refreshing-templates.gif" alt="Custom view template feature in .NET MAUI PullToRefresh control" style="width:100%">

  <figcaption>Custom view template feature in .NET MAUI PullToRefresh control</figcaption>

</figure>

### <a name="Programmatic">Programmatic support</a>

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](https://help.syncfusion.com/maui/pull-to-refresh/getting-started "Getting started with .NET MAUI PullToRefresh").

## 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](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your first .NET MAUI app").

### Step 2: Add the required NuGet package

Syncfusion .NET MAUI controls are available in the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the .NET MAUI PullToRefresh control to your project, open the NuGet package manager in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"), and search for [Syncfusion.Maui.PullToRefresh](https://www.nuget.org/packages/Syncfusion.Maui.PullToRefresh "Syncfusion.Maui.PullToRefresh NuGet package"), 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.

```csharp
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.

```xml
<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.

```xml
<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
<?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.

```csharp
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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Integrating-PullToRefresh-control-in-.NET-MAUI-app.gif" alt="Integrating PullToRefresh control in .NET MAUI app" style="width:100%">

  <figcaption>Integrating PullToRefresh control in .NET MAUI app</figcaption>

</figure>

## GitHub reference

For more details, refer to the [.NET MAUI PullToRefresh control demo on GitHub](https://github.com/SyncfusionExamples/getting-started-with-.net-maui-pull-to-refresh ".NET MAUI PullToRefresh control GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new Syncfusion [.NET MAUI PullToRefresh](https://www.syncfusion.com/maui-controls/maui-pull-to-refresh ".NET MAUI PullToRefresh control") control rolled out in the [2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4") release. Try out them and leave your feedback in the comments section given below!

Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v23.1.36 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio 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](https://www.syncfusion.com/account/login "Essential Studio License and Downloads page") page. If you’re not yet our customer, you can sign up for a [30-day free trial](https://www.syncfusion.com/downloads "Get free evaluation of the Essential Studio products") to evaluate these features.

For questions, you can reach us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal").

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 4 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-4.aspx "Blog: Syncfusion Essential Studio 2023 Volume 4 Is Here!")
- [Chart of the Week: Create a .NET MAUI Stacked Area Chart to Visualize US School Revenue as a Share of GDP by Funding Sources](https://www.syncfusion.com/blogs/post/dotnet-maui-stacked-area-chart-gdp.aspx "Blog: Chart of the Week: Create a .NET MAUI Stacked Area Chart to Visualize US School Revenue as a Share of GDP by Funding Sources")
- [Introducing the .NET MAUI Navigation Drawer Control](https://www.syncfusion.com/blogs/post/dotnet-maui-navigation-drawer.aspx "Blog: Introducing the .NET MAUI Navigation Drawer Control")
- [Chart of the Week: Creating a .NET MAUI Dynamic Bar Race Chart for the Top 10 Populations in the World](https://www.syncfusion.com/blogs/post/dotnet-maui-bar-race-chart.aspx "Blog: Chart of the Week: Creating a .NET MAUI Dynamic Bar Race Chart for the Top 10 Populations in the World")