Built-in Customizations

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

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:

  • c#
  • 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:

  • c#
  • 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:

  • c#
  • 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:

  • c#
  • 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:

  • c#
  • 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:

  • c#
  • 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:

  • c#
  • 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:

  • c#
  • 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

    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:

  • c#
  • 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:

  • c#
  • //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:

  • c#
  • 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:

  • c#
  • 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: