.NET MAUI BusyIndicator Integration with CollectionView

The Telerik BusyIndicator for .NET MAUI is useful when you want to display a notification to the application's end users during a long-running operation. For example, you might need to display a busy indicator while the application is loading data from a service.

The example below demonstrates a sample integration of the BusyIndicator with the CollectionView control. The CollectionView loads its data asynchronously (this is simulated for the purpose of the example) and while the load operation is taking place, the IsBusy state of the BusyIndicator is enabled.

1. Create a sample Book class used for the ItemsSource of the CollectionView:

public class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
}

2. Add a ViewModel class, which provides the following:

• A collection of Book objects that is used for binding the CollectionView.
• A Boolean IsLoading property to control the Busy state of the BusyIndicator.
• A LoadData command that starts the loading of the items.

public class ViewModel : NotifyPropertyChangedBase
{
    private bool isLoading = false;
    private ObservableCollection<Book> _source;

    public ViewModel()
    {
        this.LoadDataCommand = new Command(this.LoadDataAsync, this.CanLoadData);
    }

    public bool IsLoading
    {
        get { return this.isLoading; }
        set { this.UpdateValue(ref this.isLoading, value); }
    }

    public ObservableCollection<Book> Source
    {
        get { return this._source; }
        set { this.UpdateValue(ref this._source, value); }
    }

    public Command LoadDataCommand { get; set; }

    private bool CanLoadData()
    {
        return !this.IsLoading;
    }

    public async void LoadDataAsync()
    {
        this.IsLoading = true;
        this.LoadDataCommand.ChangeCanExecute();
        this.Source = await GetItemsAsync();
        this.IsLoading = false;
    }

    private Task<ObservableCollection<Book>> GetItemsAsync()
    {
        return Task.Run(async () =>
        {
            await Task.Delay(TimeSpan.FromSeconds(3));

            return new ObservableCollection<Book>
            {
                new Book{ Title = "The Fault in Our Stars ",  Author = "John Green"},
                new Book{ Title = "Divergent",  Author = "Veronica Roth"},
                new Book{ Title = "Gone Girl",  Author = "Gillian Flynn" },
                new Book{ Title = "Clockwork Angel",  Author = "Cassandra Clare"},
                new Book{ Title = "The Martian",  Author = "Andy Weir"},
                new Book{ Title = "Ready Player One",  Author = "Ernest Cline"},
                new Book{ Title = "The Lost Hero",  Author = "Rick Riordan"},
                new Book{ Title = "All the Light We Cannot See",  Author = "Anthony Doerr"},
                new Book{ Title = "Cinder",  Author = "Marissa Meyer"},
                new Book{ Title = "Me Before You",  Author = "Jojo Moyes"},
                new Book{ Title = "The Night Circus",  Author = "Erin Morgenstern"},
            };
        });
    }
}

3. Add the CollectionView and the BusyIndicator controls to the view:

<Grid RowDefinitions="40, *"
      RowSpacing="10">
    <telerik:RadButton Text="Load Data" 
                       Command="{Binding LoadDataCommand}" />
    <telerik:RadBusyIndicator x:Name="busyIndicator"
                              ContentUnderOpacity="0.4"
                              AnimationContentHeightRequest="100"
                              AnimationContentWidthRequest="100"
                              IsBusy="{Binding IsLoading}"
                              Grid.Row="1">
        <telerik:RadCollectionView ItemsSource="{Binding Source}"
                                   DisplayMemberPath="Title" />
    </telerik:RadBusyIndicator>
</Grid>

4. Set the ViewModel class as BindingContext of the page:

this.BindingContext = new ViewModel();

The gif below shows the result.

See Also

• BusyIndicator Overview
• BusyIndicator Animations
• CollectionView Overview