Поделиться через

Элементы управления "Ход выполнения"

  • Статья

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

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

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

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

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

Элемент управления Отображать
Неопределенное состояние ProgressBar ProgressBar — неопределенное состояние
Определенное состояние ProgressBar ProgressBar — определенное состояние
Неопределенное состояние ProgressRing Неопределенное состояние ProgressRing
ProgressRing с определенным состоянием Определенное состояние ProgressRing

Выбор правильного элемента управления

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

ProgressBar

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

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

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

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

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

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

    • Загрузка...
    • Получение
    • Обработка...

ProgressRing

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рекомендации по управлению ходом выполнения

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

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

Пример детерминированного элемента ProgressBar

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

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

Неопределенный пример ProgressBar

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

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

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

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

Неопределенный пример ProgressRing

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

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

Пример определенного состояния ProgressRing

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

UWP и WinUI 2

Внимание

Сведения и примеры в этой статье оптимизированы для приложений, использующих пакет SDK для приложений Windows и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. См. справочник по API UWP для конкретных сведений и примеров платформы.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении 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 />

Создание элемента управления хода выполнения

Откройте приложение коллекции WinUI 3 и просмотрите ProgressBar или ProgressRing.

Приложение коллекции WinUI 3 включает интерактивные примеры большинства элементов управления, функций и функций 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 приведет к изменению цвета заполнения кольца. Свойство переднего плана для ProgressBar изменит цвет заливки панели, чтобы изменить незаполненную часть панели, просто переопределите фоновое свойство.

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

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

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

Получение кода примера

  • Пример коллекции WinUI. Просмотрите все элементы управления XAML в интерактивном формате.