Элементы управления прогрессом

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

Типы хода выполнения

Существует два элемента управления для отображения выполнения операции: ProgressBar или ProgressRing. И ProgressBar, и ProgressRing имеют два состояния, которые обозначают, может ли пользователь взаимодействовать с приложением.

• Состояние determinate для индикаторов ProgressBar и ProgressRing обозначает процент завершения задачи. Этот индикатор следует использовать, когда длительность операции известна, но ее выполнение не должно блокировать взаимодействие пользователя с приложением.
• Состояние indeterminate индикатора ProgressBar обозначает, что операция выполняется, но не блокирует взаимодействие пользователя с приложением, и продолжительность задачи неизвестна.
• Состояние неопределенное индикатора ProgressRing обозначает, что операция выполняется, блокируя взаимодействие пользователя с приложением, и время ее завершения неизвестно.

Кроме того, элемент управления "Ход выполнения" предназначен только для чтения. С ним нельзя взаимодействовать. Это означает, что пользователь не может вызывать или использовать эти элементы управления напрямую.

Контроль	Отображать
Неопределенное состояние ProgressBar
Прогресс-бар с фиксированным значением
Неопределенное состояние ProgressRing
ProgressRing с фиксированным значением

Это правильный элемент управления?

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

ProgressBar

• Обладает ли элемент управления определенной продолжительностью или можно ли спрогнозировать завершение операции?

  Используйте детерминированный индикатор ProgressBar, а затем обновите процент или значение соответствующим образом.

• Может ли пользователь продолжить использование приложения, не следя за ходом выполнения операции?

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

• Ключевые слова

  Если ваша операция связана с этими ключевыми словами или если вы показываете подобный текст вместе с индикацией хода выполнения, которая соответствует этим ключевым словам, рекомендуется использовать ProgressBar:

  • Загрузка...
  • Получение
  • Выполняется...

ProgressRing

• Вынуждает ли операция пользователя ожидать ее завершения, чтобы продолжить?

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

  • Обладает ли элемент управления определенной продолжительностью или можно ли спрогнозировать завершение операции?

  Используйте определённый ProgressRing, если вы хотите, чтобы индикатор отображался в виде кольца, а не полосы, и обновляйте процентное значение или показатель соответствующим образом.

• Ожидает ли приложение, что пользователь завершит задачу?

  Если это так, используйте ProgressRing в неопределённом режиме, так как этот индикатор предназначен для указания на неизвестное время ожидания для пользователя.

• Ключевые слова

  Если ваша операция связана с этими ключевыми словами или если вы показываете подобный текст вместе с индикацией хода выполнения, которая соответствует этим ключевым словам, рекомендуется использовать ProgressRing:

  • Обновление
  • Вход...
  • Подключение...

Не требуется никаких признаков хода выполнения

• Нужно ли пользователю знать информацию о выполняемых действиях?

  Например, если приложение скачивает что-либо в фоновом режиме, а пользователь не начинал скачивание, то ему необязательно знать о нем.

• Выполняется ли операция в фоновом режиме, не блокируя деятельность пользователя, и представляет ли она какой-то реальный интерес для пользователя?

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

• Важно ли пользователю только то, что операция выполнена?

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

Оптимальные практики контроля хода выполнения

Иногда лучше увидеть визуальные примеры того, где и когда следует использовать различные индикаторы хода выполнения:

ProgressBar — Детерминированный

Первым примером является детерминированный индикатор ProgressBar. Когда длительность операции известна, при установке, скачивании, настройке и т. д., лучше всего использовать детерминированный ProgressBar.

ProgressBar — неопределенное состояние

Если не известно, сколько времени займет операция, используйте неопределенную панель ProgressBar. Неопределенные индикаторы выполнения также хорошо использовать при заполнении виртуализированного списка и создании плавного визуального перехода от неопределенного состояния к определенному состоянию индикатора выполнения.

• Выполняется ли операция в виртуализированной коллекции?

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

ProgressRing — неопределенное состояние

Неопределенное состояние ProgressRing используется, когда любое дальнейшее взаимодействие пользователя с приложением прекращается или приложение ожидает ввода пользователя для продолжения работы. "Вход..." является идеальным сценарием для использования ProgressRing, пользователь не может продолжить использование приложения, пока вход не завершён.

ProgressRing — определённый

Когда известна продолжительность операции и требуется кольцевой индикатор, например, при установке, загрузке, настройке и т. п., лучше всего использовать определённый ProgressRing.

Создайте элемент управления прогрессом

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

Оба элемента управления прогрессом довольно просты; но некоторые визуальные функции элементов управления не очевидны для настройки.

Определение размера ProgressRing

ProgressRing может иметь любой размер, но минимальный размер может быть только 20x20epx. Чтобы изменить размер ProgressRing, необходимо задать ее высоту и ширину. Если задана только высота или ширина, элемент управления примет минимальный размер (20x20epx). Если же заданы разные размеры для высоты и ширины, будет выбран меньший из них. Для обеспечения соответствия ProgressRing вашим потребностям устанавливайте одинаковые значения для длины и ширины.

<ProgressRing Height="100" Width="100"/>

Чтобы сделать ProgressRing видимым и анимировать, необходимо задать для свойства IsActive значение true:

<ProgressRing IsActive="True" Height="100" Width="100"/>

progressRing.IsActive = true;

Раскрашивание индикаторов хода выполнения

Основной цвет элементов управления ходом выполнения по умолчанию устанавливается в цвет акцента системы. Чтобы переопределить эту кисть, просто измените свойство основного цвета в любом элементе управления.

<ProgressRing IsActive="True" Height="100" Width="100" Foreground="Blue"/>
<ProgressBar Width="100" Foreground="Green"/>

Изменение цвета переднего плана для ProgressRing приведет к изменению цвета заполнения кольца. Свойство 'Foreground' для ProgressBar изменит цвет заливки индикатора. Чтобы изменить незаполненную часть индикатора, просто переопределите свойство 'Background'.

Отображение курсора ожидания

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

Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Wait, 10);

UWP и WinUI 2

Элементы управления прогрессом для приложений UWP включены в состав WinUI 2. Дополнительные сведения, включая инструкции по установке, см. в статье WinUI 2. API для этого элемента управления существуют как в пространствах имен Windows.UI.Xaml.Controls, так и в пространствах имен Microsoft.UI.Xaml.Controls.

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые актуальные стили, шаблоны и функции для всех элементов управления. WinUI 2.2 или более поздней версии содержит новый шаблон для этого элемента управления, использующего округленные углы. Дополнительные сведения см. в разделе о радиусе угла.

Чтобы использовать код в этой статье с WinUI 2, используйте псевдоним в XAML (мы используем muxc), чтобы представить API библиотеки пользовательского интерфейса Windows, включенные в проект. Дополнительные сведения см. в статье "Начало работы с WinUI 2 ".

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:ProgressBar />
<muxc:ProgressRing />

Связанные статьи

• Класс ProgressBar
• Класс ProgressRing