.NET MAUI BusyIndicator Integration with ListView

The Telerik BusyIndicator for .NET MAUI is useful when you want to display a notification to the end users of the application while a long-running operation, such as loading data from a service, is currently in progress.

The example below demonstrates a sample integration of the BusyIndicator with the ListView control. The ListView 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 ListView:

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

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

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

<Grid>
    <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button Text="Load Data" Command="{Binding LoadDataCommand}" />
        <Grid  Grid.Row="1">
            <telerik:RadListView ItemsSource="{Binding Source}">
                <telerik:RadListView.ItemTemplate>
                    <DataTemplate>
                        <telerik:ListViewTextCell Text="{Binding Title}" Detail="{Binding Author}"/>
                    </DataTemplate>
                </telerik:RadListView.ItemTemplate>
                <telerik:RadListView.LayoutDefinition>
                    <telerik:ListViewLinearLayout ItemLength="80" VerticalItemSpacing="2" />
                </telerik:RadListView.LayoutDefinition>
            </telerik:RadListView>
            <telerik:RadBusyIndicator x:Name="BusyIndicator"                             
                                VerticalOptions="Center"
                                AnimationContentHeightRequest="100"
                                AnimationContentWidthRequest="100"
                                HeightRequest="100"
                                IsBusy="{Binding IsLoading}" />
    </Grid>
</Grid>

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

The image below shows the result.

See Also

• BusyIndicator Animations