How to load ListView data with SfBusyIndicator loading

1 min read

You can load the list view data on the view by showing busy indicator on the view before it is loaded. The following steps describe how to load ListView data with SfBusyIndicator.

Step 1: Add the necessary assemblies in the PCL, Android, iOS, and UWP projects. Refer to this UG documentation to know more about the assemblies required for adding SfBusyIndicator.

Step 2: Add button and busy indicator inside the Stack Layout, and then set the visibility of busy indicator to false.

Step 3: Click button. When it is clicked, the visibility will be changed from button to busy indicator. So, the busy indicator will be shown on the screen for the given delay.

Step 4: Load a new page that contains ListView.

XAML

    
<StackLayout  HorizontalOptions="Center" VerticalOptions="Center">
<syncfusion:SfBusyIndicator x:Name="busyindicator" IsVisible="{Binding Visible}" BackgroundColor="Bisque" AnimationType="Print" EnableAnimation="{Binding Enable}"  />
<Button x:Name="button" HorizontalOptions="Center" VerticalOptions="Center" Clicked="Btn_Clicked" Text="Open ListView"/>
</StackLayout>

C#

    
namespace BusyIndicator
{
    public partial class MainPage : ContentPage
    {
        ViewModel vm = new ViewModel();
        public MainPage()
        {
            InitializeComponent();
            busyindicator.BindingContext = vm;
        }
 
        private async void Btn_Clicked(object sender, EventArgs e)
        {
            vm.Enable = true;
            vm.Visible = true;
            button.IsVisible = false;
            button.IsEnabled = false;
            await Task.Delay(2000);
            Navigation.PushAsync(new ListView());
            vm.Enable = false;
            vm.Visible = false;
        }
 
        protected override void OnAppearing()
        {
            button.IsVisible = true;
            button.IsEnabled = true;
        }
    }
}

The following screenshots illustrate the result of above sample codes.

Image 1: Button on the view.

Button