Содержимое всплывающего уведомления

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

Важные API: пакет NuGet уведомлений набора средств сообщества UWP

Примечание

Традиционные шаблоны для Windows 8.1 и Windows Phone 8.1 см. в предыдущем каталоге шаблонов всплывающих уведомлений.

Начало работы

Установите библиотеку уведомлений. Если вы хотите использовать C# вместо XML для создания уведомлений, установите пакет NuGet с именем Microsoft.Toolkit.Uwp.Notifications (выполните поиск по критерию "notifications uwp"). В примерах C#, приведенных в этой статье, используется версия 7.0.0 пакета NuGet.

Установите Визуализатор уведомлений. Это бесплатное приложение для Windows помогает проектировать Интерактивные всплывающие уведомления, предоставляя мгновенное визуальное представление уведомления при редактировании, аналогично редактору XAML в Visual Studio или представлению конструктора. Смотрите в разделе Визуализатор уведомлений дополнительные сведения или загрузите Notifications Visualizer из Store.

Отправка всплывающего уведомления

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

Структура всплывающего уведомления

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

Основные компоненты содержимого всплывающего уведомления — это...

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

В необработанных XML определен содержимого всплывающего уведомления, но вы можете использовать наши NuGet библиотеки получить объектной модели C# (или C++) для создания содержимого всплывающего уведомления. В этой статье описываются все, что происходит в пределах содержимого всплывающего уведомления.

new ToastContentBuilder()
    .AddArgument("conversationId", 9813)

    .AddText("Some text")

    .AddButton(new ToastButton()
        .SetContent("Archive")
        .AddArgument("action", "archive")
        .SetBackgroundActivation())

    .AddAudio(new Uri("ms-appx:///Sound.mp3"));

Вот визуальное представление содержимого всплывающего уведомления:

структура всплывающего уведомления

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

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

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

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

Удостоверение приложения для обычного всплывающего уведомления Удостоверение приложения с appLogoOverride
notification without appLogoOverride notification with appLogoOverride

Текстовые элементы

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

Toast with title and description

С момента выпуска юбилейного обновления Windows 10 вы можете контролировать число отображаемых строк с помощью свойства HintMaxLines текста. Значение по умолчанию (и максимальное) — 2 строки текста для заголовка, и до 4 строк (объединенных) для двух дополнительных элементов описания (второй и третий с типом AdaptiveText).

new ToastContentBuilder()
    .AddText("Adaptive Tiles Meeting", hintMaxLines: 1)
    .AddText("Conf Room 2001 / Building 135")
    .AddText("10:00 AM - 10:30 AM");

Переопределение логотипа приложения

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

Toast with app logo override

Используйте свойство HintCrop, чтобы кадрировать изображение. Например, окружность приводит к обрезанному изображению. В противном случае изображением будет квадратным. Размер изображения — 48x48 пикселей при 100% масштабе. Обычно рекомендуется предоставлять версию каждого ресурса значка для каждого коэффициента масштабирования: 100%, 125%, 150%, 200% и 400%.

new ToastContentBuilder()
    ...
    
    .AddAppLogoOverride(new Uri("https://picsum.photos/48?image=883"), NotificationAppLogoCrop.Circle);

Главное изображение

Новые возможности в юбилейном обновлении: всплывающие уведомления могут отображать изображение Hero, которое представляет собой популярное тоастженеричероимаже , отображаемое в баннере всплывающего уведомления и в центре поддержки. Размер изображения — 364x180 пикселей при 100% масштабе.

Toast with hero image
new ToastContentBuilder()
    ...
    
    .AddHeroImage(new Uri("https://picsum.photos/364/180?image=1043"));

Встроенное изображение

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

Toast with additional image
new ToastContentBuilder()
    ...
    
    .AddInlineImage(new Uri("https://picsum.photos/360/202?image=1043"));

Ограничения на размер изображения

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

  • http://
  • ms-appx:///
  • ms-appdata:///

Для удаленных веб-изображений по адресам http и https есть ограничения на размер файла каждого отдельного изображения. В обновлении Fall Creators Update (16299) мы увеличили ограничение до 3 МБ для обычных подключений и до 1 МБ при лимитном подключении. До этого размер изображений всегда был ограничен до 200 КБ.

Обычное подключение Лимитное подключение До обновления Fall Creators Update
3 МБ 1 МБ 200 КБ

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

Текст атрибута

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

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

Toast with attribution text
new ToastContentBuilder()
    ...
    
    .AddAttributionText("Via SMS");

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

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

Toast with custom timestamp

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

new ToastContentBuilder()
    ...
    
    .AddCustomTimeStamp(new DateTime(2017, 04, 15, 19, 45, 00, DateTimeKind.Utc));

Индикатор выполнения

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

Toast with progress bar

Подробнее о применении индикатора выполнения см. на странице Индикатор выполнения во всплывающем уведомлении.

Заголовки

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

Toasts with header

Подробнее о применении заголовков см. на странице Заголовки для всплывающих уведомлений.

Адаптивное содержимое

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

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

Обратите внимание, что любое Адаптивное содержимое должно содержаться в адаптивеграуп. В противном случае оно не будет обработан с помощью адаптивных.

Текстовые элементы и столбцы

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

Toast with additional text
new ToastContentBuilder()
    ...
    
    .AddVisualChild(new AdaptiveGroup()
    {
        Children =
        {
            new AdaptiveSubgroup()
            {
                Children =
                {
                    new AdaptiveText()
                    {
                        Text = "52 attendees",
                        HintStyle = AdaptiveTextStyle.Base
                    },
                    new AdaptiveText()
                    {
                        Text = "23 minute drive",
                        HintStyle = AdaptiveTextStyle.CaptionSubtle
                    }
                }
            },
            new AdaptiveSubgroup()
            {
                Children =
                {
                    new AdaptiveText()
                    {
                        Text = "1 Microsoft Way",
                        HintStyle = AdaptiveTextStyle.CaptionSubtle,
                        HintAlign = AdaptiveTextAlign.Right
                    },
                    new AdaptiveText()
                    {
                        Text = "Bellevue, WA 98008",
                        HintStyle = AdaptiveTextStyle.CaptionSubtle,
                        HintAlign = AdaptiveTextAlign.Right
                    }
                }
            }
        }
    });

Кнопки

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

Подробнее о полноценной реализации кнопок см. на странице Отправка локального всплывающего уведомления.

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

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

Примечание

В уведомлении размещается до пяти кнопок (включая элементы контекстного меню, которое мы рассмотрим ниже).

notification with actions, example 1
new ToastContentBuilder()
    ...
    
    .AddButton(new ToastButton()
        .SetContent("See more details")
        .AddArgument("action", "viewDetails"))

    .AddButton(new ToastButton()
        .SetContent("Remind me later")
        .AddArgument("action", "remindLater")
        .SetBackgroundActivation());

Кнопки со значками

На кнопки можно добавить значки. Эти значки — белые прозрачные изображения 16x16 пикселей при 100% масштабе, в самом изображении не должно быть внутренних полей. Если вы решили показывать значки на всплывающем уведомлении, то следует указать значки для ВСЕХ кнопок уведомления, так как в таком случае стиль кнопок меняется на «кнопки со значками».

Примечание

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

Toast that has buttons with icons
new ToastContentBuilder()
    ...
    
    .AddButton(new ToastButton()
        .SetContent("Dismiss")
        .AddArgument("action", "dismiss")
        .SetImageUri(new Uri("Assets/NotificationButtonIcons/Dismiss.png", UriKind.Relative))
        .SetBackgroundActivation());

Кнопки, активирующие ожидание обновления

Новые возможности в обновлении Fall Creators Update. На фоновых кнопках активации, можно использовать поведение после активации PendingUpdate для создания многоэтапных взаимодействий со всплывающими уведомлениями. Когда пользователь нажимает кнопку, активируется фоновая задача и всплывающее уведомление переводится в состояние «ожидается обновление» и остается на экране, пока ваша фоновая задача не заменит его на новое всплывающее уведомление.

Подробнее о реализации такого механизма см. в разделе Ожидание обновления во всплывающих уведомлениях.

Всплывающее уведомление с ожидающим обновлением

<a name="context-menu-actions">Действия из контекстного меню

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

Примечание

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

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

Toast with context menu

Синтаксис построителя не поддерживает действия контекстного меню, поэтому рекомендуется использовать синтаксис инициализатора.

ToastContent content = new ToastContent()
{
    ...
 
    Actions = new ToastActionsCustom()
    {
        ContextMenuItems =
        {
            new ToastContextMenuItem("Change location", "action=changeLocation")
        }
    }
};

Примечание

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

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

Входные данные

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

Чтобы быстро ответить текстовое поле

Чтобы включить текстовое поле для быстрого ответа (например, в приложении для обмена сообщениями), Добавьте текстовый ввод и кнопку и сослаться на идентификатор текстового поля ввода, чтобы кнопка отображалась рядом с полем ввода. Значок для кнопки должен иметь изображение размером 32x32 пикселя без заполнения, белые Пиксели заданы как прозрачные и 100% Scale.

notification with text input and actions
new ToastContentBuilder()
    ...
    
    .AddInputTextBox("tbReply", "Type a reply")

    .AddButton(new ToastButton()
        .SetContent("Reply")
        .SetTextBoxId("tbReply") // To place button next to text box, reference text box's id
        .SetImageUri(new Uri("Assets/Reply.png", UriKind.Relative))
        .AddArgument("action", "reply")
        .SetBackgroundActivation());

Панель элементов ввода с кнопками

Вы можете сделать один (или несколько) элементов ввода с обычными кнопками, которые отображаются ниже элементов ввода.

notification with text and input actions
new ToastContentBuilder()
    ...
    
    .AddInputTextBox("tbReply", "Type a reply")

    .AddButton(new ToastButton()
        .SetContent("Reply")
        .AddArgument("action", "reply")
        .SetBackgroundActivation())

    .AddButton(new ToastButton()
        .SetContent("Video call")
        .AddArgument("action", "videoCall"));

Меню выбора

Помимо текстовых полей также можно использовать меню выбора.

notification with selection input and actions
new ToastContentBuilder()
    ...
    
    .AddToastInput(new ToastSelectionBox("time")
    {
        DefaultSelectionBoxItemId = "lunch",
        Items =
        {
            new ToastSelectionBoxItem("breakfast", "Breakfast"),
            new ToastSelectionBoxItem("lunch", "Lunch"),
            new ToastSelectionBoxItem("dinner", "Dinner")
        }
    })

    .AddButton(...)
    .AddButton(...);

Отложить/закрыть

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

reminder notification

Мы привяжем кнопку «Отложить» к действию меню выбора с помощью свойства SelectionBoxId на кнопке всплывающего уведомления.

new ToastContentBuilder()
    .SetToastScenario(ToastScenario.Reminder)
    
    ...
    
    .AddToastInput(new ToastSelectionBox("snoozeTime")
    {
        DefaultSelectionBoxItemId = "15",
        Items =
        {
            new ToastSelectionBoxItem("5", "5 minutes"),
            new ToastSelectionBoxItem("15", "15 minutes"),
            new ToastSelectionBoxItem("60", "1 hour"),
            new ToastSelectionBoxItem("240", "4 hours"),
            new ToastSelectionBoxItem("1440", "1 day")
        }
    })

    .AddButton(new ToastButtonSnooze() { SelectionBoxId = "snoozeTime" })
    .AddButton(new ToastButtonDismiss());

Чтобы использовать системные действия для откладывания и закрытия уведомления:

  • Укажите ToastButtonSnooze или ToastButtonDismiss
  • При необходимости задайте строку пользовательского содержимого:
    • Если не указать строку, мы будем автоматически использовать локализованные строки для "отсрочки" и "закрытия".
  • При необходимости задать SelectionBoxId:
    • Если вы не хотите, чтобы пользователь выбирал интервал откладывания, а просто хотите, чтобы уведомление было отложено только один раз на определенный системой период (одинаковый во всей операционной системе), не создавайте <input> совсем.
    • Если вы хотите предоставить выбор интервала откладывания, выполните следующие действия.
      • Укажите SelectionBoxId в действии откладывания
      • Сопоставьте идентификатор ввода с SelectionBoxId действия откладывания
      • Укажите ToastSelectionBoxItem от значения для nonNegativeInteger, которое представляет snooze интервал в минутах.

Аудио

Пользовательские звуковые сигналы всегда поддерживались в мобильной версии и поддерживаются в настольной версии 1511 (сборка 10586) и более поздних. На пользовательские звуковые сигналы можно ссылаться через следующие пути:

  • ms-appx:///
  • ms-appdata:///

Кроме того, можно выбирать звуковые сигналы из списка ms-winsoundevents, который всегда поддерживался на обеих платформах.

new ToastContentBuilder()
    ...
    
    .AddAudio(new Uri("ms-appx:///Assets/NewMessage.mp3"));

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

Будильники, напоминания и входящие вызовы

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

Важно!

При использовании сценария «Напоминание» или «Будильник» для всплывающего уведомления требуется задать по крайней мере одну кнопку. В противном случае это всплывающее уведомление будет рассматриваться как обычное всплывающее уведомление.

  • Напоминание. Всплывающее уведомление с напоминанием остается на экране, пока пользователь его не закроет или не выполнит действие. В Windows Mobile всплывающие уведомления также отображаются сразу в развернутом виде. Звук будет воспроизводиться.
  • Будильник: помимо поведения напоминания, оповещения Кроме того цикл звук с помощью звуковой сигнал по умолчанию.
  • IncomingCall: уведомления о входящих вызовах на устройствах Windows Mobile открываются во весь экран. В противном случае — они ведут себя как будильники, за исключением того, что используют аудио мелодии звонка и их кнопки выглядят по-другому.
new ToastContentBuilder()
    .SetToastScenario(ToastScenario.Reminder)
    ...

Локализация и специальные возможности

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

Обработка активации

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