ActivityIndicator is a .NET MAUI control that displays an animated indication that work is underway. Put it where delayed content or an operation will occur, start its animation with IsRunning, and control whether users see it with IsVisible. section 6.4.8 section 9.5.3
A simple loading pattern is to show the indicator before an awaited operation and hide it after the data arrives. In an inbox UI, the indicator occupies the row where messages will appear, then disappears after an HTTP response is added to the CollectionView data source. section 6.4.8
Listing 6.41 MainPage.xaml with the ActivityIndicator
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="OutlookClone.MainPage">
<Grid RowDefinitions="50,40,*,80">
...
<ActivityIndicator Grid.Row="2"
Color="{StaticResource Primary}"
IsRunning="True"
IsEnabled="True"
VerticalOptions="Center"
HorizontalOptions="Center"
x:Name="LoadingIndicator"/>
</Grid>
</ContentPage>
This XAML places a named indicator in Grid row 2, centers it, sets its color from a resource, and starts it running. section 6.4.8
Use visibility in ways that fit the page’s state:
- Set IsVisible directly in code-behind before and after an asynchronous data load. section 6.4.8
- Bind IsVisible to an IsLoading property when the page uses a binding context or MVVM view model. section 6.2.1 section 9.5.3
- During login, disable the login button while showing the indicator, then hide it when LoginAsync finishes; re-enable the button when login fails. section 8.1.1
Loading search results
A product-entry page can layer an ActivityIndicator over its Grid while search results load. Center the control, set IsRunning to true, and bind IsVisible to IsLoading so the rest of the layout remains in place behind the loading state. section 9.5.3
