InfoBar

Статья
03/18/2023

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

Пример InfoBar в состоянии по умолчанию, с кнопкой закрытия и сообщением

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

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

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

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

Замечания

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

Далее приводятся некоторые примеры.

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

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

Далее приводятся некоторые примеры.

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

Когда лучше использовать другой элемент управления?

В некоторых сценариях более уместными будут элементы управления ContentDialog, Flyout или TeachingTip.

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

Дополнительные сведения о правилах выбора элементов управления см. в статье Диалоговые окна и всплывающие элементы.

UWP и WinUI 2

Внимание

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

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

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

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

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

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

<muxc:InfoBar />

Создание элемента InfoBar

Важные API: класс InfoBar

Откройте приложение коллекции WinUI 3 и просмотрите infoBar в действии.

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

Приведенный ниже код XAML описывает встроенный элемент InfoBar со стилем по умолчанию, используемый для информационного уведомления. Эту информационную панель можно размещать так же, как любой другой элемент, и она будет соблюдать базовые параметры макета. Например, в вертикальном элементе StackPanel элемент InfoBar развертывается горизонтально, заполняя всю доступную ширину.

По умолчанию InfoBar не отображается. Чтобы отобразить InfoBar, присвойте свойству IsOpen значение TRUE в XAML или в коде программной части.

<InfoBar x:Name="UpdateAvailableNotification"
    Title="Update available."
    Message="Restart the application to apply the latest update.">
</InfoBar>

public MainPage()
{
    this.InitializeComponent();

    if(IsUpdateAvailable())
    {
        UpdateAvailableNotification.IsOpen = true;
    }
}

Пример InfoBar в состоянии по умолчанию, с кнопкой закрытия и сообщением

Использование предварительно определенных уровней серьезности

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

<InfoBar x:Name="SubscriptionExpiringNotification"
    Severity="Warning"
    Title="Your subscription is expiring in 3 days."
    Message="Renew your subscription to keep all functionality" />

Пример InfoBar в состоянии предупреждения с кнопкой закрытия и сообщением

Закрытие InfoBar программным способом

Пользователь может закрывать InfoBar с помощью кнопки закрытия или программным способом. Если уведомление должно оставаться на виду до тех пор, пока не будет устранена проблема с состоянием, и вы хотите запретить пользователю закрывать информационную панель, присвойте свойству IsClosable значение FALSE.

По умолчанию это свойство имеет значение TRUE, и тогда на информационной панели отображается кнопка закрытия со значком вида "X".

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working."
    IsClosable="False" />

Настройка: цвет фона и значок

Помимо предварительно определенных уровней серьезности, вы можете изменять свойства Background и IconSource, чтобы выбрать собственный значок и цвет фона. Для InfoBar сохранятся параметры специальных возможностей для выбранного уровня серьезности, а если этот уровень не определен — параметры по умолчанию.

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

Пользовательский значок можно задать с помощью свойства IconSource. По умолчанию значок всегда отображается (если элемент управления не свернут). Значок можно удалить, задав для свойства IsIconVisible значение FALSE. Для пользовательских значков рекомендуется соблюдать размер 20 пикселей.

<InfoBar x:Name="CallRecordingNotification"
    Title="Recording started"
    Message="Your call has begun recording."
    Background="{StaticResource LavenderBackgroundBrush}">
    <InfoBar.IconSource>
        <SymbolIconSource Symbol="Phone" />
    </InfoBar.IconSource>
</InfoBar>

Кнопка «Добавить действие»

Вы можете добавить дополнительную кнопку действия, определив собственную кнопку с наследованием от ButtonBase и указав ее в свойстве ActionButton. К кнопкам действий типов Button и HyperlinkButton будет применяться пользовательский стиль для сохранения согласованности и доступности. Помимо свойства ActionButton, вы можете добавить дополнительные кнопки действий в пользовательское содержимое, которое отображается под сообщением.

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working.">
    <InfoBar.ActionButton>
        <Button Content="Network Settings" Click="InternetInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

<InfoBar x:Name="TermsAndConditionsUpdatedNotification"
    Title="Terms and Conditions Updated"
    Message="Dismissal of this message implies agreement to the updated Terms and Conditions. Please view the changes on our website.">
    <InfoBar.ActionButton>
        <HyperlinkButton Content="Terms and Conditions Sep 2020"
            NavigateUri="https://www.example.com"
            Click="UpdateInfoBarHyperlinkButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Пример InfoBar с сообщением на несколько строк и гиперссылкой

Кнопка действия с выравниванием по правому краю

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

<InfoBar x:Name="RightAlignedButtonNotification"
    Title="Title"
    Message="Essential app message">
    <InfoBar.ActionButton>
        <Button Content="Hello" HorizontalAlignment="Right"/>
    </InfoBar.ActionButton>
</InfoBar>

Перенос содержимого

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

<InfoBar x:Name="BackupCompleteNotification"
    Severity="Success"
    Title="Backup complete: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    Message="All documents were uploaded successfully. Ultrices sagittis orci a scelerisque. Aliquet risus feugiat in ante metus dictum at tempor commodo. Auctor augue mauris augue neque gravida.">
    <InfoBar.ActionButton>
        <Button Content="Action"
            Click="BackupInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Пример InfoBar в состоянии успешного выполнения с заголовком и сообщением в разных строках

Настраиваемое содержимое

К InfoBar можно добавить содержимое в формате XAML, используя свойство Content. Это содержимое будет отображаться в отдельной строке под остальной частью содержимого элемента управления. InfoBar будет расширяться так, чтобы вместить определенное содержимое.

<InfoBar x:Name="BackupInProgressNotification"
    Title="Backup in progress"
    Message="Your documents are being saved to the cloud"
    IsClosable="False">
    <InfoBar.Content>
        <ProgressBar IsIndeterminate="True" Margin="0,0,0,6" MaxWidth="200"/>
    </InfoBar.Content>
</InfoBar>

Пример InfoBar в состоянии по умолчанию с неопределенным индикатором выполнения

Упрощенная стилизация

Вы можете изменить стандартные значения Style и ControlTemplate, чтобы придать элементу управления уникальный внешний вид. Список доступных ресурсов тем см. в разделе Cтиль и шаблон элемента управления документации по API InfoBar.

Дополнительные сведения см. в разделе Облегченное определение стиля статьи Стили XAML.

Например, можно сделать так, чтобы цвет фона для всех информационных панелей InfoBar на странице был синим:

<Page.Resources>
    <x:SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="LightBlue"></x:SolidColorBrush>
</Page.Resources>

Отмена закрытия

Событие Closing позволяет отменить и (или) отложить закрытые InfoBar. Это полезно в тех случаях, когда элемент InfoBar должен оставаться открытым неопределенно долго или до завершения настраиваемого действия. Когда закрытие InfoBar отменяется, параметр IsOpen снова принимает значение TRUE. Можно также отменить программное закрытие.

<InfoBar x:Name="UpdateAvailable"
    Title="Update Available"
    Message="Please close this tip to apply required security updates to this application"
    Closing="InfoBar_Closing">
</InfoBar>

public void InfoBar_Closing(InfoBar sender, InfoBarClosingEventArgs args)
{
    if (args.Reason == InfoBarCloseReason.CloseButton) 
    {
        if (!ApplyUpdates()) 
        {
            // could not apply updates - do not close
            args.Cancel = true;
        }
    }
}

Диалоговые окна и всплывающие элементы

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

InfoBar

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

Замечания

Когда лучше использовать другой элемент управления?

Рекомендации

Правила появления и исчезновения

Мигающий контент

Обновление InfoBar

Встроенные сообщения со сдвигом содержимого

Цвет и значок

Важность

Сообщение

UWP и WinUI 2

Создание элемента InfoBar

Использование предварительно определенных уровней серьезности

Закрытие InfoBar программным способом

Настройка: цвет фона и значок

Кнопка «Добавить действие»

Кнопка действия с выравниванием по правому краю

Перенос содержимого

Настраиваемое содержимое

Упрощенная стилизация

Отмена закрытия

Дополнительные ресурсы

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

InfoBar

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

Замечания

Когда лучше использовать другой элемент управления?

Рекомендации

Правила появления и исчезновения

Мигающий контент

Обновление InfoBar

Встроенные сообщения со сдвигом содержимого

Цвет и значок

Важность

Сообщение

UWP и WinUI 2

Создание элемента InfoBar

Использование предварительно определенных уровней серьезности

Закрытие InfoBar программным способом

Настройка: цвет фона и значок

Кнопка «Добавить действие»

Кнопка действия с выравниванием по правому краю

Перенос содержимого

Настраиваемое содержимое

Упрощенная стилизация

Отмена закрытия

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

Дополнительные ресурсы