Getting Started with UWP Pull To Refresh (SfPullToRefresh)

25 May 20214 minutes to read

Create your first SfPullToRefresh in Universal Windows Platform

This section encompasses on how to create a PullToRefresh that lets you to refresh the current content of the application.

SfPullToRefresh is available in the following assembly and namespace:

Assembly: Syncfusion.SfPullToRefresh.UWP

Namespace: Syncfusion.UI.Xaml.PullToRefresh

Refer to the following code to add the SfPullToRefresh control:

XAML

<Page
    x:Class="PullToRefresh.MainPage"
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.PullToRefresh">

    <Grid x:Name="LayoutRoot">
        <syncfusion:SfPullToRefresh />
    </Grid> 
    
    </Page>

C#

SfPullToRefresh pullToRefresh = new SfPullToRefresh();

Customizing a simple SfPullToRefresh sample

To develop an application with UWP PullToRefresh is simple. The following steps explains how to create and configure its properties.

• Create the PullableContent for the SfPullToRefresh

You can set the PullableContent for the SfPullToRefresh by adding the desired UIElement.

XAML

<syncfusion:SfPullToRefresh x:Name="pullToRefresh" PullingThreshold="150" >
        <syncfusion:SfPullToRefresh.PullableContent>
            <Grid Background="#039be5" Name="controlView" >
            </Grid>
        </syncfusion:SfPullToRefresh.PullableContent>
    </syncfusion:SfPullToRefresh>

## Events

The pulling event will be notified whenever the swipe gesture is started. This event will notify the listener each and every time until the refresh content height exceeds. When we release the gesture from pullable content, Refreshing event will be triggered. Now user can proceed to fetching the data from web or database. Once the data is fetched, we should call Refresh to method to complete all animations.

There are three built-in events in the PullToRefresh control namely:

1. Pulling
2. Refreshing
3. Refreshed

Pulling

Pulling event is triggered when we start pulling down the PullableContent. It is triggered as long as the pointer or finger is pressed and the progress is less than 100 and not equal to 0 . The arguments for the event are:

• SfPullToRefresh
• Progress

XAML

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

C#

private void pullToRefresh_Pulling(object sender, PullingEventArgs args)
    {
        (sender as SfPullToRefresh).RefreshText = args.PulledDistance.ToString();
    }

Refreshing

Refreshing event is triggered once the content is pulled through the PullingThreshold or Progress reaches 100. This event is triggered till the Refresh() method is called.

XAML

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

C#

DispatcherTimer timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(7) };

    private void pullToRefresh_Refreshing(object sender)
    {
        timer.Start();
        timer.Tick += Timer_Tick;
    }
    
    private void Timer_Tick(object sender, object e)
    {
        timer.Stop();
        pullToRefresh.Refresh();          
    }

Refreshed

Refreshed event is triggered once the refreshing and all the animations associated with the control are completed.

XAML

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

C#

private async void pullToRefresh_Refreshed(object sender)
    {
        var dialog = new MessageDialog("Content has been refreshed");
        await dialog.ShowAsync();
    }