SfPullToRefresh - Busy Indicator

[Amir H]

Hi,

I have implemented the SfPullToRefresh control with an SfListView.

It's all good and works but we have a requirement to change the look and feel of the busy indicator to be the same as Xamarin.Forms's activity indicator:

Please advise

Many thanks,

Amir

[Pradeep Kumar Balakrishnan]

Hi Amir, 

 

Thank you for using Syncfusion controls. 

 

We have checked your query “How to load Xamarin forms Activity indicator instead of default PullToRefresh refreshing indicator.” Using SfPullToRefresh.RefreshingViewTemplate we can load any view to indicate refreshing action. Refer to the following code snippet for reference to achieve this requirement. 

 

Code Snippet: 

<syncfusion:SfPullToRefresh x:Name="pullToRefresh" 

                              PullingThreshold="120" 

                                VerticalOptions="FillAndExpand" 

                                HorizontalOptions="FillAndExpand" 

                              RefreshContentHeight="30" 

                              RefreshContentThreshold="30" 

                                Refreshing="pullToRefresh_Refreshing" 

                              RefreshContentWidth="30" > 

         

        <syncfusion:SfPullToRefresh.RefreshingViewTemplate> 

            <DataTemplate> 

                <ActivityIndicator IsRunning="{Binding IsRefreshing , Source={x:Reference pullToRefresh}}" /> 

            </DataTemplate> 

        </syncfusion:SfPullToRefresh.RefreshingViewTemplate> 

         

        <syncfusion:SfPullToRefresh.PullableContent> 

            <sfList:SfListView x:Name="listView"  

                               VerticalOptions="FillAndExpand" 

                               HorizontalOptions="FillAndExpand" 

                   ItemsSource="{Binding BookInfo}"> 

  

We have also attached sample for your reference in the following link 

Sample  

 

Also, refer to the following user guide documentation to know more about PullToRefresh customization 

Kindly let us know if you need any further assistance on this.  

 

Regards, 

Pradeep Kumar B 

[Amir H]

Hi,

I have got the following code:

  <xForms1:SfPullToRefresh.RefreshingViewTemplate>

                <DataTemplate>

                    <ActivityIndicator IsRunning="{Binding IsRefreshing, Source={x:Reference pullToRefresh}}" />

                </DataTemplate>

            </xForms1:SfPullToRefresh.RefreshingViewTemplate>

            <xForms1:SfPullToRefresh.PullingViewTemplate>

                <DataTemplate>

                    <ActivityIndicator IsRunning="{Binding IsRefreshing, Source={x:Reference pullToRefresh}}" />

                </DataTemplate>

            </xForms1:SfPullToRefresh.PullingViewTemplate>

And it throws an exception that causes the app to crash:

  at Syncfusion.SfPullToRefresh.XForms.SfPullToRefresh.RaiseRefreshedEvent (System.Object sender) [0x000a6] in <ac7ea6737b9f4ccdbe9fb61bbde43b96>:0 

  at Syncfusion.SfPullToRefresh.XForms.SfPullToRefresh.set_ActualIsRefreshing (System.Boolean value) [0x00018] in <ac7ea6737b9f4ccdbe9fb61bbde43b96>:0 

  at Syncfusion.SfPullToRefresh.XForms.SfPullToRefresh.EndRefreshing () [0x00007] in <ac7ea6737b9f4ccdbe9fb61bbde43b96>:0 

  at Syncfusion.SfPullToRefresh.XForms.SfPullToRefresh.OnIsRefreshingChanged (Xamarin.Forms.BindableObject bindable, System.Object oldValue, System.Object newValue) [0x0001a] in <ac7ea6737b9f4ccdbe9fb61bbde43b96>:0 

  at Xamarin.Forms.BindableObject.SetValueActual (Xamarin.Forms.BindableProperty property, Xamarin.Forms.BindableObject+BindablePropertyContext context, System.Object value, System.Boolean currentlyApplying, Xamarin.Forms.Internals.SetValueFlags attributes, System.Boolean silent) [0x00120] in D:\a\1\s\Xamarin.Forms.Core\BindableObject.cs:512 

  at Xamarin.Forms.BindableObject.SetValueCore (Xamarin.Forms.BindableProperty property, System.Object value, Xamarin.Forms.Internals.SetValueFlags attributes, Xamarin.Forms.BindableObject+SetValuePrivateFlags privateAttributes) [0x00173] in D:\a\1\s\Xamarin.Forms.Core\BindableObject.cs:446 

  at Xamarin.Forms.BindingExpression.ApplyCore (System.Object sourceObject, Xamarin.Forms.BindableObject target, Xamarin.Forms.BindableProperty property, System.Boolean fromTarget) [0x00226] in D:\a\1\s\Xamarin.Forms.Core\BindingExpression.cs:160 

  at Xamarin.Forms.BindingExpression.Apply (System.Boolean fromTarget) [0x0003e] in D:\a\1\s\Xamarin.Forms.Core\BindingExpression.cs:56 

  at Xamarin.Forms.BindingExpression+BindingExpressionPart.<PropertyChanged>b__49_0 () [0x00000] in D:\a\1\s\Xamarin.Forms.Core\BindingExpression.cs:762 

  at Xamarin.Forms.BindingExpression+BindingExpressionPart.PropertyChanged (System.Object sender, System.ComponentModel.PropertyChangedEventArgs args) [0x000cb] in D:\a\1\s\Xamarin.Forms.Core\BindingExpression.cs:773 

  at Xamarin.Forms.BindingExpression+WeakPropertyChangedProxy.OnPropertyChanged (System.Object sender, System.ComponentModel.PropertyChangedEventArgs e) [0x00012] in D:\a\1\s\Xamarin.Forms.Core\BindingExpression.cs:666 

  at (wrapper delegate-invoke) <Module>.invoke_void_object_PropertyChangedEventArgs(object,System.ComponentModel.PropertyChangedEventArgs)

  at NativeApp.Context.OnPropertyChanged (System.String propertyName) [0x00015] in /Users/amir/Projects/SwiftCare/NativeApp/Context.cs:109 

  at NativeApp.Context.set_IsLoading (System.Boolean value) [0x0000d] in /Users/amir/Projects/SwiftCare/NativeApp/Context.cs:147 

  at NativeApp.Features.EndpointsHelper.GetAllRecords (System.Threading.CancellationToken cancellationToken, System.Int32 howMany) [0x011bf] in /Users/amir/Projects/SwiftCare/NativeApp/Features/EndpointsHelper.cs:279 

  at NativeApp.App.OnStart () [0x002f9] in /Users/amir/Projects/SwiftCare/NativeApp/App.xaml.cs:300 

  at System.Runtime.CompilerServices.AsyncMethodBuilderCore+<>c.<ThrowAsync>b__7_0 (System.Object state) [0x00000] in /Library/Frameworks/Xamarin.iOS.framework/Versions/Current/src/Xamarin.iOS/mcs/class/referencesource/mscorlib/system/runtime/compilerservices/AsyncMethodBuilder.cs:1021 

  at Foundation.NSAsyncSynchronizationContextDispatcher.Apply () [0x00000] in /Users/builder/azdo/_work/1/s/xamarin-macios/src/Foundation/NSAction.cs:178 

--- End of stack trace from previous location where exception was thrown ---

  at (wrapper managed-to-native) UIKit.UIApplication.UIApplicationMain(int,string[],intptr,intptr)

  at UIKit.UIApplication.Main (System.String[] args, System.IntPtr principal, System.IntPtr delegate) [0x00005] in /Users/builder/azdo/_work/1/s/xamarin-macios/src/UIKit/UIApplication.cs:86 

  at UIKit.UIApplication.Main (System.String[] args, System.String principalClassName, System.String delegateClassName) [0x0000e] in /Users/builder/azdo/_work/1/s/xamarin-macios/src/UIKit/UIApplication.cs:65 

  at NativeApp.iOS.Application.Main (System.String[] args) [0x00008] in /Users/amir/Projects/SwiftCare/NativeApp.iOS/Main.cs:21 

If I use your code snippet, the app does not crash, but I get this:

Now how can I remove the blue colour and the border so I just have a plain ActivityIndicator? 

[Pradeep Kumar Balakrishnan]

Hi Amir, 

 

Thank you for your update. 

 

We have checked your requirement “How to remove the progress view in pullToRefresh template.” Define PullToRefresh PullingViewTemplate like following code snippet to achieve your requirement. 

 

Code Snippet: 

private SfCircularProgressBar progressbar; 

    private SfBorder border; 

 

    public PullToRefreshPage() 

    { 

        InitializeComponent(); 

        this.progressbar = new SfCircularProgressBar(); 

        this.border = new SfBorder(); 

 

        this.border.BorderColor = Color.LightGray; 

        this.border.BackgroundColor = Color.White; 

        this.border.CornerRadius = 35; 

        this.border.Content = this.progressbar; 

        this.border.BorderWidth = 0.2; 

 

        this.progressbar.SegmentCount = 10; 

        this.progressbar.IndicatorInnerRadius = 0.5; 

        this.progressbar.IndicatorOuterRadius = 0.7; 

        this.progressbar.ShowProgressValue = false; 

        this.progressbar.GapWidth = 0.5; 

        this.progressbar.WidthRequest = 70; 

        this.progressbar.HeightRequest = 55; 

        this.progressbar.IndeterminateAnimationDuration = 750; 

 

        var pullingTemplate = new DataTemplate(() => 

        { 

            return new ViewCell { View = this.border }; 

        }); 

 

        this.pullToRefresh.PullingViewTemplate = pullingTemplate; 

    } 

 

 

    private async void pullToRefresh_Refreshing(object sender, EventArgs e) 

    { 

        pullToRefresh.IsRefreshing = true; 

        await Task.Delay(new TimeSpan(0, 0, 3)); 

        viewModel.LoadMoreItems(); 

        pullToRefresh.IsRefreshing = false; 

    } 

 

    void pullToRefresh_Pulling(System.Object sender, Syncfusion.SfPullToRefresh.XForms.PullingEventArgs e) 

    { 

        this.progressbar.TrackInnerRadius = 0.8; 

        this.progressbar.TrackOuterRadius = 0.1; 

        this.progressbar.IsIndeterminate = false; 

        this.progressbar.ProgressColor = Color.FromRgb(0, 124, 238); 

        this.progressbar.TrackColor = Color.White; 

 

        var absoluteProgress = Math.Abs(e.Progress); 

        this.progressbar.Progress = absoluteProgress; 

        this.progressbar.SetProgress(absoluteProgress, 1, Easing.CubicInOut); 

    } 

} 

  

We have also attached sample for your reference in the following link  

Sample   

 

 Kindly let us know if you need any further assistance on this.   

 

Regards, 

Pradeep Kumar B