Skip to content

SyncfusionExamples/xamarin-forms-listview-loading-indicator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 

Repository files navigation

Show busy indicator on loading Xamarin.Forms ListView

The SfListView allows displaying the SfBusyIndicator when loading the bounded items. The busy indicator can be enabled and disabled by using IsBusy property.

Create a IsLoading boolean property in view model and bind it to the IsBusy property. By setting the value to IsLoading property, the busy indicator will be enabled and disabled into the view till the items loaded in the SfListView.

<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             xmlns:busyIndicator="clr-namespace:Syncfusion.SfBusyIndicator.XForms;assembly=Syncfusion.SfBusyIndicator.XForms">
    <Grid>
        <syncfusion:SfListView x:Name="listView" 
                             ItemsSource="{Binding ContactInfo}" 
                             ItemSize="110">
        </syncfusion:SfListView>
        <busyIndicator:SfBusyIndicator x:Name="busyIndicator" InputTransparent="True"
                                       AnimationType="SingleCircle" 
                                       IsBusy="{Binding IsLoading, Mode=TwoWay}" 
                                       TextColor="Magenta"
                                       ViewBoxWidth="50"
                                       ViewBoxHeight="50"/>
    </Grid>
</ContentPage>

When both SfBusyIndicator and ListView loaded with same row and column, you need to set InputTransparent as True to SfBusyindicator in order to pass touch interaction to listview in iOS platform.

public class ViewModel : INotifyPropertyChanged
{
    private bool isLoading = false;

    public bool IsLoading
    {
        get { return isLoading; }
        set
        {
            this.isLoading = value;
            OnPropertyChanged("IsLoading");
        }
    }

    private async void GenerateItems()
    {
        IsLoading = true;
        await Task.Delay(5000);
        for (int i = 0; i < 30; i++)
        {
            var contact = new Model(CustomerNames[i], ContactNumber[i]);
            ContactInfo.Add(contact);
        }
        IsLoading = false;
    }
}

To know more about showing busy indocator on loading listview, please refer our documentation here.