Индикация прогресса в .NET MAUI: ActivityIndicator и ProgressBar

Часто, при выполнении каких-либо длительных операций приложением, мы видим индикацию прогресса выполнения операции. В .NET MAUI для индикации прогресса могут использоваться компоненты ActivityIndicator или ProgressBar.

ActivityIndicator

Элемент ActivityIndicator отображает анимацию, чтобы показать, что приложение выполняет какое-либо длительное действие. Это довольно простой элемент у которого определены всего два свойства:

Создадим новое приложение .NET MAUI и изменим код XAML страницы MainPage.xaml следующим образом:

<?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="MauiApp7.MainPage">

    <VerticalStackLayout>
        <ActivityIndicator Color="Red" IsRunning="True"/>
    </VerticalStackLayout>
</ContentPage>

Теперь можно запустить приложение и посмотреть на результат:

ProgressBar

В отличие от ActivityIndicator, ProgressBar позволяет показать текущий ход выполнения длительной операции в диапазона значений от 0 до 1. Этот элемент предоставляет нам следующие свойства:

И так как мы уже изучили такие элементы управления, как кнопки, то продемонстрируем работу ProgressBar на следующем примере. Изменим XAML-код страницы MainPage.xaml:

<?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="MauiApp7.MainPage">

    <VerticalStackLayout>
        <Button Text="Start" Clicked="Button_Clicked" WidthRequest="100" HorizontalOptions="Center"/>
        <Label x:Name="ProgressLabel"/>
        <ProgressBar ProgressColor="Red" Progress="0" x:Name="MyProgress"/>
    </VerticalStackLayout>
</ContentPage>

Теперь изменим файл отдельного кода MainPage.xaml.cs, добавив в него обработчик события Clicked кнопки:

private async void Button_Clicked(object sender, EventArgs e)
{
    MyProgress.Progress = 0;
    while (MyProgress.Progress < 1)
    {
        MyProgress.Progress += 0.1;
        ProgressLabel.Text = $"Прогресс {Math.Round(MyProgress.Progress * 100)}%";;
        MyProgress.ProgressColor = Color.FromRgb(1, MyProgress.Progress, 0);
        await Task.Delay(1000);
    }
}

В обработчике мы наращиваем значение Progress у нашего элемента ProgressBar, а также изменяем его цвет в зависимости от прогресса. То есть по ходу работы цикла цвет ProgressBar изменяется от красного до желтого.

Итого

Элементы ActivityIndicator и ProgressBar в .NET MAUI используются для визуализации длительных процессов, выполняемых приложением. При этом ActivityIndicator используется для показа обычной анимации, например, когда точное значение прогресса невозможно определить. В свою очередь, ProgressBar может использоваться для индикации прогресса, чтобы показывать точное числовое значение прогресса в диапазоне от 0 до 1.