Getting Started

3 Sep 20207 minutes to read

This section provides a quick overview for working with SfPullToRefresh in Xamarin.iOS. Walk through the entire process of creating a simple application with this control.

Assembly deployment

After installing Essential Studio for Xamarin, all the required assemblies can be found in {Syncfusion Essential Studio Installed location}\Essential Studio\25.1.35\Xamarin\lib this installation folder.

e.g., C:\Program Files (x86)\Syncfusion\Essential Studio\25.1.35\Xamarin\lib

NOTE

Assemblies can be found in unzipped package location in Mac.

NuGet configuration

To install the required NuGet for the SfPullToRefresh control in the application, configure the NuGet packages of the Syncfusion components.

Refer to the following KB to configure the NuGet packages of the Syncfusion components:

How to configure package source and install Syncfusion NuGet packages in an existing project?

The following NuGet package should be installed to use the SfPullToRefresh control in the application.

Project	Required package
Xamarin.iOS	Syncfusion.SfPopupLayout.iOS

Adding SfPullToRefresh Reference

Syncfusion Xamarin components are available in nuget.org. To add SfPullToRefresh to your project, open the NuGet package manager in Visual Studio, and search for Syncfusion.Xamarin.SfPullToRefresh.IOS, and then install it.

Refer to the following screenshot in which the Syncfusion.Xamarin.SfPullToRefresh.iOS package is highlighted:

SfPullToRefresh in nuget.org

To know more about obtaining our components, refer to this link. Also, if you prefer to manually refer the assemblies instead of NuGet, refer the list of assemblies mentioned in the table below.

Project	Required assembly
Xamarin.iOS	ios-unified\Syncfusion.SfPullToRefresh.iOS.dll

IMPORTANT

Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this link to know about registering Syncfusion license key in your Xamarin application to use our components.

Create a sample application with SfPullToRefresh

SfPullToRefresh control can be configured entirely in C# code or using story board. To create a sample application for this control, follow the topics:

Creating the project
Adding SfPullToRefresh in Xamarin.iOS
Adding a simple view as the PullableContent
Refreshing the view
TransitionType Customization
Final Output of the sample
Sample Link

Creating the project

Create a new iOS application in Xamarin Studio or Visual Studio for Xamarin.iOS.

Adding SfPullToRefresh in Xamarin.iOS using story board

To add SfPullToRefresh using story board, follow the steps:

Add a new story board inside the project.
Drag the SfPullToRefresh control from toolbox and drop into story board.
Drag the SfDataGrid control from toolbox and drop into SfPullToRefresh in story board. Preview will not be shown since this is a hosting control. You can only see the pull-to-refresh when deployed in the device.
Open the properties window of SfPullToRefresh and set the required properties.
Set the SfDataGrid as PullableContent to SfPullToRefresh in code-behind.

SfPullToRefresh properties via story board

C#
public partial class newViewController : UIViewController
    {
     

        ViewModel viewModel;
        public newViewController() : base("newViewController", null)
        {
            
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            // Perform any additional setup after loading the view, typically from a nib.
            viewModel = new ViewModel();
           
            sfGrid.ItemsSource = viewModel.OrdersInfo;
            sfPull.PullableContent = sfGrid;
           
        }

        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
        }
    }

You can download the entire source code of this demo here.

Refer to this link to know the properties that can be configured using story board for SfPullToRefresh.

Adding SfPullToRefresh in Xamarin.iOS

Add the required assembly references to the project as mentioned in the Assembly deployment section or install the NuGet as mentioned in the NuGet installation section.
Import SfPullToRefresh control under the namespace Syncfusion.SfPullToRefresh.
Create an instance of SfPullToRefresh control and add as the subview of the UIViewController. Refer to the following code example to add this control to the application:

C#
using Syncfusion.SfPullToRefresh; 

public class MyViewController : UIViewController
{
    SfPullToRefresh pullToRefresh; 

    public MyViewController()
    {
        pullToRefresh = new SfPullToRefresh(); 
        this.View.AddSubview(pullToRefresh);
    } 
}

Adding a simple view as the PullableContent

Any view can be added as the pullable content using SfPullToRefresh.PullableContent property to refresh it. Refer to the following code example in which a simple custom view is added as pullable content:

C#
//MyViewController.cs

CustomView customView;
BaseView baseView;
UILabel label;
UIButton button;

public MyViewController()
{
	....
	InitializeViews();
    customView = new CustomView(label, baseView);
	//Setting the PullableContent of the SfPullToRefresh.
	pullToRefresh.PullableContent = customView;
	....
}

private void InitializeViews()
{
    ....
    baseView = new BaseView();
    label = new UILabel();
    ....
}

Refreshing the view

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. The user can do the required operations to refresh the view and once the view is refreshed, set the RefreshingEventArgs.Refreshed to 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;
    }));
}

TransitionType customization

SfPullToRefresh support two types of transitions. By default, TransitionType.SlideOnTop is enabled.

Refer to the topic TransitionType under Built-in Customization section for more details regarding SfPullToRefresh.TransitionType property.

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

C#
public MyViewController()
{
	....
	pullToRefresh.TransitionType = TransitionType.Push;
	....
}

Refer to the following image to set TransitionType mode to SfPullToRefresh using story board.
SfPullToRefresh properties via story board

Final output of the sample

The following GIF demonstrates the final output of the sample:

SfPullToRefresh in Xamarin.iOS

Sample link

You can download the source code of this sample here.

Properties configured using story board

Properties	Attribute Name
PullingThreshold	Pulling Threshold
ProgressStrokeColor	Progress Stroke Color
ProgressBackgroundColor	Progress Background Color
ProgressShadowColor	Progress Shadow Color
ProgressStrokeWidth	Progress Stroke Width
TransitionType	Transition Type
RefreshContentThreshold	Refresh Content Threshold
RefreshContentRadius	Refresh Content Radius