How the Progress Indicator Works
In short, this is how to get the progress indicator to work:
- Add activity indicator to the page.
- Bind the IsBusy and IsRunning property to view model.
- Set a property to turn on activity indicator.
- Set a property to switch it off.
Adding Progress Indicator to a Page
I suppose you already have a view model that implements INotifyPropertyChanged. Add the following property to view model.
private bool _isLoading;
public bool IsLoading
{
get { return _isLoading; }
set
{
_isLoading = value;
OnPropertyChanged();
}
}
Set this property to true or false in the data loading methods. One example is here:
public void LoadData()
{
IsLoaded = true; // load and process data
IsLoaded = false;
}
Next, let’s add the activity indicator to the page.
<ActivityIndicator
IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}" />
As we haven't specified anything about design, the activity indicator will be rendered using default settings.
This is how the activity indicator looks on UWP, Android, and Tizen.
Wrapping Up
Xamarin Forms has a progress indicator, but it is called the activity indicator. It can be bound to the view model; this way it is easy to turn it on and off. Here, we didn’t make any improvements to its design and the indicator still looks okay on different platforms.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}