Pull to Refresh in UWP

Overview

Pull to Refresh is a widely adopted mobile pattern, used to refresh a list fetching the latest entries.
It was originally introduced by Twitter, (for which they hold the patent) and is widely used in applications with a feed or timeline where the data is refreshed often.
In this post I’ll compare some libraries to implement Pull to Refresh in your Universal Windows Platform application.

A case for Pull to Refresh

Despite the wide spread of the pattern, a case could be made is at times not the best user experience:

Avoid When

  • Is not immediately discoverable
  • The user is responsible for
  • Being a mobile first pattern the UX will be different for different platform
  • If the content refresh rate is not frequent enough

On the other hand, there are cases where pull to Refresh is a great choice:

Great When

  • Content updates frequently
  • Content follows a chronological sorting
  • Is a familiar gesture on mobile
  • Provides the opportunity to leverage the area above the list for branding and custom animations

Pull to Refresh offers the ability to embed your personality and create fun animations, beyond the simple spinner, offering a moment of delight to the users.

s Dribble s Mascot Hammy launched into space

UWP Libraries

After some research, I found some controls and packages that offer support for Pull to Refresh more or less out of the box. Here’s a comparative analysis of the different options.

UWP Control

In the official Microsoft docs, Pull to Refresh is implemented with a RefreshableListView Templated Control, that extends a ListView.

The component will monitor direct manipulation of the list’s internal ScrollViewer, fire relevant events when the refresh is triggered or the pull progress changes. Noticeably this control exposes two scalar properties: PullRatio and PullProgress, to be used the ScrollViewer state and the refresh indicator layout.

Customizing this Pull to Refresh implementation required the most code changes, but provides a comprehensive set of options for customization, as it exposes every relevant aspect of this pattern.

PulltToRefresh.UWP

This implementation comes bundled in a NuGet package so in the Package Manager you can simply type

PM> Install-Package PullToRefresh.UWP

In your XAML add the namespace reference

xmlns:pr="using:PullToRefresh.UWP"

and you can start using the PullToRefreshBox component to wrap a ListView or GridView and enable Pull to Refresh. The final XAML will look something like:

<pr:PullToRefreshBox RefreshInvoked="PullToRefreshBox_RefreshInvoked">
    <pr:PullToRefreshBox.TopIndicatorTemplate>
        <DataTemplate>
            <pr:PullRefreshProgressControl 
              Progress="{Binding}"
              PullToRefreshText="Pull"
              ReleaseToRefreshText="Release" />
        </DataTemplate>
    </pr:PullToRefreshBox.TopIndicatorTemplate>

    <ListView>
      <ListView.ItemTemplate>
            <DataTemplate>
                <Rectangle Width="100" Height="200">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{Binding}" />
                    </Rectangle.Fill>
                </Rectangle>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</pr:PullToRefreshBox>

Internally, PullToRefresh.UWP overrides OnApplyTemplate to center the top content indicator and register a callback for the ScrollViewer direct manipulation event. Once the drag gesture is released the control checks if the threshold for a refresh has been triggered.

I like the ease of use of this control. If a simple indicator will suffice, and you don’t need access to the underlying state PullToRefresh.UWP comes really handy.

JustinXinLiu’s Pull To Refresh XAML

After finding the UWP Control and PullToRefresh.UWP I kept searching and found Justin’s Pull to Refresh XAML project on GitHub.

One shortcoming of the two previous libraries is that the refresh indicator disappears upon release, and doesn’t remain on screen while the data fetching is in progress. Justin’s Pull to Refresh XAML obviates to this problem registering event handlers for the composition target’s rendering and manipulating the top section offset using composition animations:

Windows.UI.Xaml.Media.CompositionTarget.Rendering += OnCompositionTargetRendering;

Composition animations are used to update the opacity and vertical offset of the refresh icon. When the icon is pulled down fast enough to trigger the refresh, the ScrollViewer Offset.Y is locked in place until the fetch is complete and the composition animations are restored. In the Github repo you can find different implementation variants using Composition animations and XAML Behavior triggers.

I found Justin’s Pull to Refresh the easiest to adopt and by leveraging Composition animations customizing the animation parameters becomes very easy. Here’s a final demo using Pull to Refresh to populate a list of airports. The refresh indicator animation is performed using AirBnB’s Lottie for UWP, and re-purposing some of the sample files.

s PullToRefreshXaml Demo

Conclusion

Whether or not Pull to Refresh is the right pattern varies from case to case, but when user experience calls for it, I see it as an opportunity to inject some personality and delight into the application.