ProgressRadial - радиальный индикатор прогресса

Визуальный элемент ProgressRadial

Элемент управления ProgressRadial для C# Windows Forms представляет собой радиальный индикатор прогресса. Радиальный индикатор — это круговая диаграмма с изменяемым углом сектора круга. Индикатор предназначен для встраивания в интерфейс приложения с различными цветовыми решениями. Элемент имеет множество функциональных и цветовых настроек.

Функция элемента ProgressRadial – визуализировать работу запущенных пользователем продолжительных процедур, например: копирование файла, математические вычисления, обработку изображения и другое.

Индикатор имеет два режима работы: изменение угла раскрытия радиального сектора, задаваемого свойством позиции и анимационный – для процедур неизвестной продолжительности и оживления интерфейса приложения.

Вид элемента ProgressRadial можно настроить как эллипсовидный, так и прямоугольный. Радиальный индикатор создан как пользовательский элемент управления, класс ProgressRadial наследует от класса Control, графика индикатора рисуется программным способом.

Режим точной позиции

В режиме точной позиции угол раскрытия сектора круга задается свойством ProgressRadial.Position. Одновременно могут показываться проценты выполненной работы. Высота шрифта регулируется автоматически, при необходимости можно скорректировать размер символов свойством зуммирования ProgressRadial.FontZoom.

Режим анимации

Время выполнения некоторых задач невозможно выразить в математических величинах, например, запрос к удаленным ресурсам и сервисам. Чтобы не давать повода пользователям сердится на окаменевший интерфейс приложения, в программном индикаторе ProgressRadial предусмотрена анимационная симуляция хода выполнения запущенной процедуры. Анимация останавливается значением свойства ProgressRadial.AnimationSpeed = 0, при этом активный сектор скрывается.

Рисование графики ProgressRadial

Графика элемента ProgressRadial рисуется в методе рисования Control.OnPaintBackground(). Формальное предназначение OnPaintBackground() – это рисование фона элементов управления, данный метод является более шустрым в рисовании чем классическое событие OnPaint. Метод OnPaintBackground() можно с успехом применять для рисования любой графики.

Линии рисуемые параллельно или перпендикулярно краям формы, в силу пиксельного строения экрана устройства, выводятся качественно независимо от режима графики. Поскольку индикаторный элемент ProgressRadial в основном рисуется закругленными фигурами, для объекта Graphics устанавливается режим максимального качества отрисовки графики - SmoothingMode.AntiAlias.

Программный код метода OnPaintBackground для рисования компонентов индикатора ProgressRadial:

/// <summary>
/// Основное рисование графики радиального индикатора прогресса
/// </summary>
protected override void OnPaintBackground(PaintEventArgs e)
{
    Graphics g = e.Graphics;

    // Фон элемента
    g.FillRectangle(new SolidBrush(this.BackColor), e.ClipRectangle);

    // Оказывают некоторое повышение качество рисования.
    g.CompositingMode = CompositingMode.SourceOver;
    g.CompositingQuality = CompositingQuality.HighQuality;
    g.PixelOffsetMode = PixelOffsetMode.HighQuality;

    // Поскольку фигуры индикатора не прямоугольники,
    // для повышения качества рендеринга включаем сглаживание.
    g.SmoothingMode = SmoothingMode.AntiAlias;

    // Фигура рамки индикатора рисуется перед
    // рисованием фигуры фона индикатора.
    if (_frameVisible == true) DrawFrame(g);

    if (_isRect == false) RadialType(g);
    else RectangleType(g);
}

Качество рисования рамки

Рисование фигурного контура объектом класса Pen не обеспечивает элемент рамкой приемлемого качества. Перо рисует рамку низкого качества, в результате края с зазубринами и невозможность обеспечения точной толщины пера, графическое сглаживание SmoothingMode.AntiAlias не исправляет ситуацию.

Если же создавать фигурный ободок из полного эллипса отсекая регионами с внешнего и внутреннего краев, то контур отсечения также получается с зазубринами, поскольку процесс-отсечения не владеет возможностью устранения дефектов алиасинга (зазубрин, возникающих в силу пиксельной природы большинства экранов цифровых устройств).

Для создания контура приемлемого качества в программном коде элемента ProgressRadial применен способ формирования рамки наложением друга на друга полных эллипсов, закрашиваемых цветной кистью. Ширина рамки задается разностью диаметров эллипсов. Такой способ дает полноценный эффект сглаживание линий режимом SmoothingMode.AntiAlias и визуально рамка получается достаточно высокого качества отрисовки как показано на рисунке.

Прямоугольная рамка ProgressRadial рисуется аналогичным методом для унификации программного кода, хотя вполне достаточно было рисовать пером: объект класса Pen рисует прямоугольники без вращения качественно при любых настройках.

Расчет процентов прогресса

При любых установках максимального значения индикатора максимальное значение процентов всегда 100. Простейшая математическая формула обеспечивает это тождество. При каждом изменении угла радиального индикатора происходит вычисление выполненных процентов.

Для экономичного расхода памяти строку процентов создает объект класса StringBuilder, но не String. При изменении символьного содержания объект String каждый раз создает новые строки, "забывая" свои прежние. При многочисленных итерационных изменениях строки String потребление памяти становится неприемлемо расточительным. В отличие от класса String, StringBuilder изменяет символы своей строки используя для этого однократно выделенную память.

Программный код вычисления процентов и изменения символов строки:

/// <summary>
/// Вычисление процентов прогресса работы и 
/// создание строки из символов процентов.
/// </summary>
/// <returns>строка числа и знака процентов</returns>
private string ComputePercent()
{
    _sbPercent.Clear();
    int percent = (int)((_posProgress * 100.0f) / _maxValue);
    _sbPercent.Append(percent);
    _sbPercent.Append('%');

    return _sbPercent.ToString();
}

Настройки элемента ProgressRadial

Изменять настроечные свойства радиального индикатора можно как в программном коде, так и в конструкторе дизайнера, поместив элемент ProgressRadial на форму вашего приложения.

• OptionsModeWork ModeWork – режим работы индикатора: по позиции или анимация
• bool FrameVisible – видимость рамки вокруг элемента
• int FrameThickness – толщина рамки
• Color FrameColor – цвет рамки
• Color ProgressColor – цвет сектора прогресса и анимации
• Color BGColor – цвет заднего фона индикатора
• bool IsRect – форма индикатора
• int FrameGap – Зазор между фигурой прогресса и рамкой

• int Position – положение активной линии радиуса радиального индикатора
• int Maximum – максимальное значение позиции
• Color BGTextColor – цвет текста процентов на заднем фоне элемента
• Color ProgressTextColor – цвет текста на фоне полосы
• bool PercentVisible – видимость строки процентов
• float FontZoom – масштабирование шрифта, меньше единицы - уменьшение

• public float AnimationSpeed – Скорость анимации 0 - 10. 0 - стоп

Исходник радиального индикатора ProgressRadial

Исходник представляет собой тестовое приложение Windows Forms в комплекте с классом ProgressRadial. Тестовое приложение позволяет испытывать различные режимы работы и настройки индикатора для дальнейшего применения в производственном приложении.

Класс ProgressRadial физически располагается в папке Indicators. Для встраивания радиального индикатора папка Indicators копируется в проект вашего приложения.

Исходный код радиального индикатора написан в среде программирования Visual Studio 2022 .NET 6.

Класс ProgressRadial подключается к проекту C# копированием папки Indicators в папку проекта вашего приложения. После копирования необходимо пересобрать проект и индикатор ProgressRadial появится в панели элементов.

Программный код может быть понижен до версии языка C# 7.3 и адаптироваться под проекты в средах от .NET3.1 и выше, .NET Framework 4.0 и выше.

Скачать исходник