How to load SfPullToRefresh inside ScrollView with SfListView?
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:
Sample location:
http://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.