Skip to main content

PullToRefresh

PullToRefresh adds the familiar mobile gesture to any Wisej.NET scrollable container, such as a Panel, a FlowLayoutPanel, a FlexLayoutPanel or a UserControl. When the container is scrolled to the top and the user drags it down, a loader panel slides in above the content. When the user lets go, the server receives a Refresh event, where you reload the data.

The gesture is built on pointer events, so it works with a finger on touch devices and with the mouse on the desktop.

Installation​

Add the Wisej-4-PullToRefresh package to your Wisej.NET project:

dotnet add package Wisej-4-PullToRefresh

The package targets .NET Framework 4.8 and .NET 8 or later (including the -windows, Android, iOS and Mac Catalyst targets). After a rebuild, PullToRefresh shows up in the Visual Studio toolbox as a component.

Getting started​

Create a PullToRefresh, or drop one on the page from the toolbox, and enable it for each container with SetPullToRefresh. There's no per-control property in the designer, so this is always done in code:

using Wisej.Web.Ext.PullToRefresh;

public partial class Page1 : Page
{
    private readonly PullToRefresh pullToRefresh1 = new PullToRefresh();

    public Page1()
    {
        InitializeComponent();

        this.pullToRefresh1.DropDownHeight = 80;
        this.pullToRefresh1.BackColor = Color.WhiteSmoke;
        this.pullToRefresh1.SetPullToRefresh(this.panelNews, true);
        this.pullToRefresh1.Refresh += pullToRefresh1_Refresh;
    }

    private void pullToRefresh1_Refresh(object sender, EventArgs e)
    {
        // sender is the container the user pulled.
        var panel = (Panel)sender;
        LoadLatestNews(panel);
    }
}

One PullToRefresh can serve several containers. The sender of Refresh tells you which one was pulled.

The container must be able to scroll

The pull is only recognized while the container is scrolled to the very top. For the effect to feel natural, the container should be able to scroll (e.g. AutoScroll = true) and hold enough content to need it, as in a list of cards or a news feed.

Properties and methods​

MemberDefaultWhat it does
SetPullToRefresh(control, enabled)—Turns the gesture on or off for a ScrollableControl. A control that hasn't been created yet is registered as soon as it is.
GetPullToRefresh(control)falseWhether the gesture is on for that control.
Clear()—Removes the gesture from every registered control.
DropDownHeight50Height of the loader panel in pixels, which is also how far the content can be dragged down. The loader image is scaled to DropDownHeight - 20.
BackColorTransparentBackground of the loader panel.
ImageSourceresource.wx/loader.svgThe loader image: a URL, an application-relative path or a theme image name.
Animated loaders

The extender centers the loader image but doesn't animate it. For a spinning effect, use an animated SVG or GIF, e.g. this.pullToRefresh1.ImageSource = "Images/spinner.gif";.

Registered controls are unregistered automatically when they're disposed.

Events​

EventWhen
RefreshThe user completes the pull gesture on a registered control. sender is that control.

If reloading takes a while, show progress while you work, e.g. set panel.ShowLoader = true at the start of the handler and back to false at the end. For long work, move it to a background task and push the result with Application.Update.

API reference​