Элементы управления «Ход выполнения»
Элемент управления "Ход выполнения" служит для уведомления пользователя о том, что выполняется длительная операция. Это может означать, что пользователь не сможет взаимодействовать с приложением, когда индикатор выполнения отображается. Также в зависимости от того, какой индикатор используется, он может отображать время ожидания.
Типы хода выполнения
Существуют два элемента управления, предназначенных для индикации того, что операция выполняется, — ProgressBar и ProgressRing. И ProgressBar, и ProgressRing имеют два состояния, которые обозначают, может ли пользователь взаимодействовать с приложением.
- Состояние determinate для индикаторов ProgressBar и ProgressRing обозначает процент завершения задачи. Этот индикатор следует использовать, когда длительность операции известна, но ее выполнение не должно блокировать взаимодействие пользователя с приложением.
- Состояние indeterminate индикатора ProgressBar обозначает, что операция выполняется, но не блокирует взаимодействие пользователя с приложением, и продолжительность задачи неизвестна.
- Состояние indeterminate индикатора ProgressRing обозначает, что операция выполняется и блокирует взаимодействие пользователя с приложением, а продолжительность задачи неизвестна.
Кроме того, элемент управления "Ход выполнения" предназначен только для чтения. С ним нельзя взаимодействовать. Это означает, что пользователь не может вызывать или использовать эти элементы управления напрямую.
| Control | Отображение |
|---|---|
| Неопределенное состояние ProgressBar |  |
| Определенное состояние ProgressBar |  |
| Неопределенное состояние ProgressRing |  |
| ProgressRing с определенным состоянием |  |
Выбор правильного элемента управления
Не всегда очевидно, какой элемент управления или какое его состояние (определенное или неопределенное) следует использовать для индикации выполнения какой-либо операции. Иногда задача достаточно очевидна и совсем не требует индикации выполнения, но иногда даже при использовании индикатора выполнения требуется еще и текстовая строка для объяснения того, какая операция выполняется.
ProgressBar
Обладает ли элемент управления определенной продолжительностью или можно ли спрогнозировать завершение операции?
В таких случаях используйте определенное состояние ProgressBar и соответствующим образом обновляйте процент или другое значение хода выполнения.
Может ли пользователь продолжить использование приложения, не следя за ходом выполнения операции?
Когда используется ProgressBar, взаимодействие происходит немодальным образом; обычно это означает, что действия пользователя не заблокированы до завершения этой операции и он может продолжить использование приложения другими способами, пока операция выполняется.
Ключевые слова
Если ваша операция связана с этими ключевыми словами или если вы показываете подобный текст вместе с индикацией хода выполнения, которая соответствует этим ключевым словам, рекомендуется использовать ProgressBar:
- Загрузка...
- Получение
- Обработка...
ProgressRing
Вынуждает ли операция пользователя ожидать ее завершения, чтобы продолжить?
Если операция требует, чтобы взаимодействие с приложением полностью или по большей части прекратилось до ее завершения, более подходящим вариантом будет ProgressRing с неопределенным состоянием.
- Обладает ли элемент управления определенной продолжительностью или можно ли спрогнозировать завершение операции?
Используйте ProgressRing c определенным состоянием, если вы хотите, чтобы визуальный элемент отображался кольцом, а не полосой, на котором отображается актуальный процент выполнения или значение.
Ожидает ли приложение, что пользователь завершит задачу?
Если да, используйте ProgressRing с неопределенным состоянием, поскольку этот индикатор предназначен для отображения пользователю неизвестного времени ожидания.
Ключевые слова
Если ваша операция связана с этими ключевыми словами или если вы показываете подобный текст вместе с индикацией хода выполнения, которая соответствует этим ключевым словам, рекомендуется использовать ProgressRing:
- Обновление
- Вход...
- Подключение...
Индикация хода выполнения не требуется
Нужно ли пользователю знать информацию о выполняемых действиях?
Например, если приложение скачивает что-либо в фоновом режиме, а пользователь не начинал скачивание, то ему необязательно знать о нем.
Выполняется ли операция в фоновом режиме, не блокируя деятельность пользователя, и представляет ли она какой-то реальный интерес для пользователя?
Используйте текст, когда ваше приложение выполняет задачи, которые не должны всегда выводиться на экран, но вам нужно отображать их состояние.
Важно ли пользователю только то, что операция выполнена?
Иногда лучше показать уведомление только после выполнения операции или сразу же предоставить визуальное указание, что операция выполнена, а завершающие действия выполнить в фоновом режиме.
Рекомендации по использованию индикаторов хода выполнения
Иногда лучше увидеть визуальные примеры того, где и когда следует использовать различные индикаторы хода выполнения:
ProgressBar — определенное состояние
Первый пример относится к определенному состоянию ProgressBar. Если продолжительность операции известна, например во время установки, загрузки, настройки и т. п., лучше всего использовать определенное состояние ProgressBar.
ProgressBar — неопределенное состояние
Когда длительность операции неизвестна, используйте неопределенное состояние ProgressBar. Неопределенное состояние ProgressBar также хорошо подходит при заполнении виртуализированного списка и создании плавного визуального перехода от неопределенного к определенному состоянию индикатора ProgressBar.
Выполняется ли операция в виртуализированной коллекции?
Если да, не создавайте индикатор хода выполнения для каждого элемента списка по мере их появления. Вместо этого используйте ProgressBar и поместите его в верхнюю часть коллекции загружаемых элементов, чтобы показать, что элементы подгружаются.
ProgressRing — неопределенное состояние
Неопределенное состояние ProgressRing используется, когда любое дальнейшее взаимодействие пользователя с приложением прекращается или приложение ожидает ввода пользователя для продолжения работы. "Вход..." является идеальным сценарием для использования ProgressRing; пользователь не может продолжить использование приложения, пока вход не выполнен.
ProgressRing с определенным состоянием
Если кольцевой вид визуального элемента является предпочтительным и продолжительность операции известна, например во время установки, загрузки, настройки и т. п., лучше всего использовать ProgressRing с определенным состоянием.
UWP и WinUI 2
Важно!
Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.
Этот раздел содержит сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.
Элементы управления ходом выполнения для приложений UWP включены в библиотеку пользовательского интерфейса Windows 2. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows. API-интерфейсы для этого элемента управления существуют в пространствах имен Windows.UI.Xaml.Controls и Microsoft.UI.Xaml.Controls .
- API UWP:класс ProgressBar, свойство IsIndeterminate, класс ProgressRing, свойство IsActive
- WinUI 2 Apis:класс ProgressBar, свойство IsIndeterminate, класс ProgressRing, свойство IsActive
- Откройте приложение коллекции WinUI 2 и просмотрите ProgressBar или ProgressRing. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.
Мы рекомендуем использовать последнюю версию 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 можно увеличить до любого требуемого размера, но этот индикатор не может быть меньше 20x20 epx. Для изменения размера ProgressRing необходимо задать его высоту и ширину. Если задается только высота или ширина, элемент управления получит минимальный размер (20x20 epx), но если для высоты и ширины заданы два различных значения, используется наименьший из них. Для обеспечения соответствия 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 в интерактивном формате.
Похожие статьи
Windows developer
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по