Built-in Customizations

3 Sep 20207 minutes to read

This section gives a quick overview of the various built-in customizations supported by SfPullToRefresh.

Property settings

The various properties of SfPullToRefresh are listed as follows:

TransitionType
RefreshContentThreshold
PullingThreshold
RefreshContentRadius
ProgressStrokeWidth
ProgressStrokeColor
ProgressBackgroundColor
ProgressShadowColor
Progress
IsRefreshing

TransitionType

In the TransitionType.SlideOnTop, the progress view will render over the pullable content. It will be moved based on the pulling position whenever the pulling action is performed.

In the TransitionType.Push, the progress view will push the pullable content down thereby simultaneously moving the progress view and the pullable content based on the pulling position whenever the pulling action is performed.

Refer to the following code example to switch to the TransitionType.Push mode of transition:

pullToRefresh.TransitionType = TransitionType.Push;

RefreshContentThreshold

The SfPullToRefresh.RefreshContentThreshold serves different purpose based on the SfPullToRefresh.TransitionType is explained in the following table:

TransitionType	Purpose
SlideOnTop	It denotes the starting Y-position of the progress view in the application.
Push	It denotes the Y-point after which pulling will be recognized.

The default value of the SfPullToRefresh.RefreshContentThreshold is 17.

NOTE

For both the transition types, the progress view will be rendered in the application at the SfPullToRefresh.RefreshContentThreshold property, when the refreshing animation is in progress.

Refer to the following code example to set the SfPullToRefresh.RefreshContentThreshold property:

pullToRefresh.RefreshContentThreshold = 20;

PullingThreshold

The SfPullToRefresh.PullingThreshold property indicates the maximum pullable position of the progress view to reach 100 % of pulling progress. Refreshing will be started in the view only when the pulling progress reaches 100 % and touch is released. If the touch is released before the progress view reaches 100 % of pulling progress, pulling will be canceled and refreshing will not occur.

Refer to the following code example to set the SfPullToRefresh.PullingThreshold property:

pullToRefresh.PullingThreshold = 110;

The default value of the SfPullToRefresh.PullingThreshold is 90.

NOTE

The SfPullToRefresh.RefreshContentThreshold and the SfPullToRefresh.PullingThreshold should have a difference of at least 80. Only then the animations of the pullable content will be visible in the TransitionType.Push mode of animation.

RefreshContentRadius

The radius of the progress view can be customized using the SfPullToRefresh.RefreshContentRadius property. The default value of theSfPullToRefresh.RefreshContentRadius is 20.

Refer to the following code example to set the SfPullToRefresh.RefreshContentRadius property:

pullToRefresh.RefreshContentRadius = 25;

ProgressStrokeWidth

The width of the inner stroke of the progress view can be customized using the SfPullToRefresh.ProgressStrokeWidth property. The default width of the inner stroke of the progress view is “2”.

Refer to the following code example to set the SfPullToRefresh.ProgressStrokeWidth property:

pullToRefresh.ProgressStrokeWidth = 3;

ProgressStrokeColor

The color of the inner stroke of the progress view is customizable. The default color of the inner stroke of the progress view is “Blue”.

Refer to the following code example to set the SfPullToRefresh.ProgressStrokeColor property:

pullToRefresh.ProgressStrokeColor = UIColor.Black;

ProgressBackgroundColor

The background color of the progress view can be changed as per the requirement. The default background color of the progress view is “White”.

Refer to the following code example to set the SfPullToRefresh.ProgressBackgroundColor property:

pullToRefresh.ProgressBackgroundColor = UIColor.Yellow;

ProgressShadowColor

The shadow color of the progress view can be customized using the SfPullToRefresh.ProgressShadowColor property. The default background color of the progress view is “UIColor.LightGray”.

In cases, where the background color of the pullable content and the progress view are same, use the SfPullToRefresh.ProgressShadowColor to separate the progress view from the pullable content view to enhance the visual appearance of the application.

Refer to the following code example to set the SfPullToRefresh.ProgressShadowColor property:

pullToRefresh.ProgressShadowColor = UIColor.LightYellow;

Progress

The progress of pulling in SfPullToRefresh can be tracked using the SfPullToRefresh.Progress property. The progress of pulling is also provided in the PullingEventArgs of the SfPullToRefresh.Pulling event. Refer to the Pulling Event topic for more details.

IsRefreshing

The SfPullToRefresh.IsRefreshing flag returns a value indicating whether refreshing is being done or not. When the refreshing is started in the SfPullToRefresh, it returns true and once the refreshing is completed, it resets to false.

Events in SfPullToRefresh

The three built-in events in SfPullToRefresh are as follows:

Pulling Event
Refreshing Event
Refreshed Event

Pulling event

The pulling event will be fired continuously as long as the pulling action is performed in SfPullToRefresh. The progress of pulling can be tracked by the PullingEventArgs.Progress property.

Refer to the following code example illustrating hooking of the SfPullToRefresh.Pulling event:

pullToRefresh.Pulling += PullToRefresh_Pulling;

private void PullToRefresh_Pulling(object sender, PullingEventArgs e)
{
    progressOfPulling = e.Progress;
}

Refreshing event

To refresh the view, hook the SfPullToRefresh.Refreshing event. The SfPullToRefresh.Refreshing event will be fired once the pulling progress reaches 100% and touch is released. You can do the required operations to refresh the view. Once the view is refreshed, set the RefreshingEventArgs.Refreshed as true to stop the refreshing animation.

Refer to the following code example illustrating hooking of the SfPullToRefresh.Refreshing event and refreshing the view:

//MyViewController.cs

public MyViewController()
{
    ....
    //Hooking the Refreshing event.
    pullToRefresh.Refreshing += PullToRefresh_Refreshing;
    ....
}

private void PullToRefresh_Refreshing(object sender, RefreshingEventArgs e)
{
    NSTimer.CreateScheduledTimer(TimeSpan.FromSeconds(3), new Action<NSTimer>(delegate {
        baseView.model.Temperature = (NSString)new Random().Next(10, 40).ToString();
        baseView.UpdateBaseView();
        e.Refreshed = true;
    }));
}

Refreshed event

The SfPullToRefresh.Refreshed event will be fired once the refreshing animation is completed to indicate that the view is refreshed.

Refer to the following code example illustrating hooking of the SfPullToRefresh.Refreshed event:

pullToRefresh.Refreshed += PullToRefresh_Refreshed;

private void PullToRefresh_Refreshed(object sender, EventArgs e)
{
    //Event will be fired once the refreshing is completed, the user can do the needful here.
}

Programmatic refresh

SfPullToRefresh supports refreshing the pullable content programmatically without interaction. To refresh the pullable content programmatically, call the SfPullToRefresh.StartRefreshing() method. To end programmatic refreshing, call the SfPullToRefresh.EndRefreshing() method.

Refer to the following code example to refresh the pullable content programmatically:

private async void PerformRefreshing()
{
    //Starts the refreshing.
    pullToRefresh.StartRefreshing();
    NSTimer.CreateScheduledTimer(TimeSpan.FromSeconds(3), new Action<NSTimer>(delegate
    {
        baseView.model.Temperature = (NSString)new Random().Next(10, 40).ToString();
        baseView.UpdateBaseView();
        //Ends the refreshing.
        pullToRefresh.EndRefreshing();
    }));
}

The following GIF demonstrates the programmatic refresh: