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

ProgressBar

Элемент ProgressBar представляет горизонтальную полосу, которая отображает прогресс некоторого действия.

Класс ProgressBar определяет два свойства:

• Progress представляет значение типа double, которое представляет значение прогресса. Данное число находится в диапазоне от 0 до 1. Значение по умолчанию - 0.

  Стоит отметить, что значения меньше 0 будут округлены до 0, а значения больше 1 будут округлены до 1

• ProgressColor устанавливает цвет элемент

Например:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            StackLayout stackLayout = new StackLayout { Padding = 20 };

            Label label = new Label { Text = "ProgressBar" };
            ProgressBar progressBar = new ProgressBar{ Progress = 0.4, ProgressColor = Colors.SeaGreen };

            stackLayout.Children.Add(label);
            stackLayout.Children.Add(progressBar);
            Content = stackLayout;
        }
    }
}

В данном случае устанавливаем в качестве начального значения 0.4, а в качестве цвета - зеленый цвет

Аналогичный пример в 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="HelloApp.MainPage">

    <StackLayout Padding="20">
        <Label Text="Progressbar" />
        <ProgressBar Progress="0.4" ProgressColor="SeaGreen" />
    </StackLayout>

</ContentPage>

Манипулируя значением свойства Progress, мы можем динамически изменять индикацию процесса. Например, эмулируем некоторый процесс:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        ProgressBar progressBar = new ProgressBar { ProgressColor = Colors.SeaGreen };
        Label label = new Label();
        public StartPage()
        {
            StackLayout stackLayout = new StackLayout { Padding = 20 };

            stackLayout.Children.Add(label);
            stackLayout.Children.Add(progressBar);
            Content = stackLayout;
        }
        protected override async void OnAppearing()
        {
            while(progressBar.Progress < 0.9)
            {
                progressBar.Progress += 0.1;
                label.Text = $"Состояние процесса: {Math.Round(progressBar.Progress, 1) * 100} %";
                await Task.Delay(1000);
            }
            label.Text = "Процесс закончен";
            base.OnAppearing();
        }
    }
}

В методе OnAppearing(), который вызывается, когда страница начинаеть отображаться на экране, в цикле while увеличиваем текущее значение ProgressBar, пока оно меньше 0.9. И для имитации делаем задержку в секунду, отображая с помощью метки состояние прогресса.

ActivityIndicator

ActivityIndicator похож на ProgressBar, только отображает процесс с помощью кругового индикатора. Он определяет два свойства:

• IsRunning: при значении true индиктор активен.

• Color: цвет индикатора

Определение в коде C#:

ActivityIndicator activityIndicator = new ActivityIndicator { IsRunning = true, Color = Colors.SeaGreen };

Определение в коде XAML:

<ActivityIndicator IsRunning="true" Color="SeaGreen" />

Имитируем некоторый процесс, и пока процесс идет, отобразим индикатор:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        ActivityIndicator activityIndicator = new ActivityIndicator { IsRunning = true, Color = Colors.SeaGreen };
        Label label = new Label();
        public StartPage()
        {
            StackLayout stackLayout = new StackLayout { Padding = 20 };

            stackLayout.Children.Add(label);
            stackLayout.Children.Add(activityIndicator);
            Content = stackLayout;
        }
        protected override async void OnAppearing()
        {
            int count = 0;
            while (count != 100)
            {
                label.Text = $"Состояние процесса: {count} %";
                await Task.Delay(2000);
                count +=10;
            }
            label.Text = "Процесс закончен";
            activityIndicator.IsRunning = false;
            base.OnAppearing();
        }
    }
}