How to load SfPullToRefresh inside ScrollView with SfListView in Xamarin.Forms application?

2 mins read

SfPullToRefresh will helps to refresh the view by loading refreshing view directly into the SfPullToRefresh.PullableContent. SfListView have support for refreshing the data in view while performing the PullToRefresh action.

Load the SfListView within SfPullToRefresh:

//namespace for SfPullToRefresh and SfListView
 
xmlns:pulltoRefresh="clr-namespace:Syncfusion.SfPullToRefresh.XForms;assembly=Syncfusion.SfPullToRefresh.XForms"
xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
 
<ScrollView>
   <pulltoRefresh:SfPullToRefresh x:Name="pullToRefresh" 
                               ProgressBackgroundColor="#428BCA" 
                               TransitionMode="SlideOnTop" 
                               IsRefreshing="False">
     <pulltoRefresh:SfPullToRefresh.PullableContent>
            <syncfusion:SfListView x:Name="listView" 
                                   ItemSize="120" 
                                   AutoFitMode="Height" 
                                   SelectionMode="None">
            </syncfusion:SfListView>
    </pulltoRefresh:SfPullToRefresh.PullableContent>
  </pulltoRefresh:SfPullToRefresh>
</ScrollView>

Load the data into SfListView on pull-to-refresh

SfListView lets you to refresh the data in view at runtime by using SfPullToRefresh.Refreshing event. The Refreshing event gets triggered once the progress bar meets 100 %. You can add the data into the underlying collection and the data gets updated in view once the Refreshing event gets completed

private async void PullToRefresh_Refreshing(object sender, EventArgs args)
{
    pullToRefresh.IsRefreshing = true;
    await Task.Delay(2000);
    var blogsTitleCount = pulltoRefreshViewModel.BlogsTitle.Count() - 1;
    if ((pulltoRefreshViewModel.BlogsInfo.Count - 1) == blogsTitleCount)
    {
        pullToRefresh.IsRefreshing = false;
        return;
    }
    var blogsCategoryCount = pulltoRefreshViewModel.BlogsCategory.Count() - 1;
    var blogsAuthorCount = pulltoRefreshViewModel.BlogsAuthers.Count() - 1;
    var blogsReadMoreCount = pulltoRefreshViewModel.BlogsReadMoreInfo.Count() - 1;
 
    for (int i = 0; i < 3; i++)
    {
        var blogsCount = pulltoRefreshViewModel.BlogsInfo.Count;
        var item = new ListViewBlogsInfo()
        {
            BlogTitle = pulltoRefreshViewModel.BlogsTitle[blogsTitleCount - blogsCount],
            BlogAuthor = pulltoRefreshViewModel.BlogsAuthers[blogsAuthorCount - blogsCount],
            BlogCategory = pulltoRefreshViewModel.BlogsCategory[blogsCategoryCount - blogsCount],
            ReadMoreContent = pulltoRefreshViewModel.BlogsReadMoreInfo[blogsReadMoreCount - blogsCount],
        };
        pulltoRefreshViewModel.BlogsInfo.Insert(0, item);
    }
    pullToRefresh.IsRefreshing = false;
}

You can get the below output while run the attached sample:

$C:\Users\ashokn\AppData\Local\Microsoft\Windows\INetCache\Content.Word\sflistview-pulltorefresh.png$

Sample location:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample452117248

Note: You need to load the SfListView as first children of PullableContent for the PullToRefresh.

Limitations: SfListView does not support for PullToRefresh when Orientation is Horizontal.

Did you find this information helpful?

Yes

Comments

How to load SfPullToRefresh inside ScrollView with SfListView in Xamarin.Forms application?

Load the SfListView within SfPullToRefresh:

Load the data into SfListView on pull-to-refresh

Access denied