What’s new for Toast notifications and Action Center in Windows 10 Anniversary Update


In the most recent Windows 10 Anniversary Update, numerous improvements have been made to Toast notifications and Action Center.

Toast supports full Adaptive: In the previous release, Toasts only supported a limited set of Adaptive schema (text and image). With the Anniversary Update, Toast notifications support the full Adaptive schema. Developers can now make Toast notifications visually as rich as Live Tiles, and re-use a large portion of their payload between Toast notifications and Live Tiles.

Action Center in the Cloud: We have enabled cross-device scenarios for users who own multiple devices (linked via their MSA login), making notifications more "ambient".

Hero Image: You can specify a hero image in a Toast notification to emphasis visual content and celebrate imagery.

Attribution: You can specify a new text element placement that provides a consistent way to show content attribution in a Toast notification.

Context menu action: You can specify an action that gets placed in the context menu.

Web Notifications via Microsoft Edge: Edge now supports web notifications through W3C standard web notification API's. These web notifications are displayed as native Toast notifications and appear in Action Center.

Notification Listener: Apps can finally access the user's notifications (via a public API), enabling scenarios like showing notifications on wearable accessories.

Action Center UI Refreshed: We’ve made some UI improvements to Action Center and notifications that you’ll automatically see without changing your app’s code.

More User Control/Customization: Users now have more control of Action Center through the Notifications & Actions settings page.

 

Toast supports full Adaptive!

In Windows 10, we introduced Adaptive for Tiles, which allows you to design your own Tile notification content using a simple and flexible data structure that adapts to different Windows devices and screen densities. However, for Toast notifications, while focusing on enabling interactivity with actions, we only supported text and images from the Adaptive schema. For more details on what was supported in Windows 10, please see this blog post: Adaptive and interactive toast notifications for Windows 10.

In the most recent Windows 10 Anniversary Update, we've added full Adaptive to Toast notifications. You can now use advanced text and image properties, groups, and subgroups inside a Toast notification payload. This brings three major benefits to our developers...

  1. Your Toast notifications can now be as visually as rich as your Tile notifications
  2. You only need to learn Adaptive once to work with Toast and Tiles
  3. You can share a good amount of code between Toast and Tile notifications when the scenario fits

The following is a quick example showing how a weather Toast can be constructed by using Adaptive and re-using 95% of the code from your weather Tile.

For this specific example (and in most other cases), you just need to do 2 simple things to your Tile notification payload to make it work for Toast notifications as well:

  1. Remove all Tile-related attributes
  2. Make sure that you have at least one line of text at the front of the payload - Toast notifications are collapsed by default on Mobile devices and inside Action Center, the summary text ensures that users see consistent content in collapsed Toast notifications

We are working on a blog post to document the full Adaptive content supported on toast notifications. For now, please look at Adaptive Tile Templates – Schema and Documentation, since most of what works on Tiles will work on Toasts.

<tile>
  <visual displayName="Seattle" baseUri="Assets/Apps/Weather/">

    <binding template="TileWide" branding="nameAndLogo" hint-overlay="30">
      <image src="Mostly Cloudy-Background.jpg" placement="background"/>
      <group>
        <subgroup hint-weight="1">
          <text hint-align="center">Mon</text>
          <image src="Mostly Cloudy.png" hint-removeMargin="true"/>
          <text hint-align="center">63°</text>
          <text hint-style="captionSubtle" hint-align="center">42°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Tue</text>
          <image src="Cloudy.png" hint-removeMargin="true"/>
          <text hint-align="center">57°</text>
          <text hint-style="captionSubtle" hint-align="center">38°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Wed</text>
          <image src="Sunny.png" hint-removeMargin="true"/>
          <text hint-align="center">59°</text>
          <text hint-style="captionSubtle" hint-align="center">43°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Thu</text>
          <image src="Sunny.png" hint-removeMargin="true"/>
          <text hint-align="center">62°</text>
          <text hint-style="captionSubtle" hint-align="center">42°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Fri</text>
          <image src="Sunny.png" hint-removeMargin="true"/>
          <text hint-align="center">71°</text>
          <text hint-style="captionSubtle" hint-align="center">66°</text>
        </subgroup>
      </group>
    </binding>

  </visual>
</tile>
<toast>
  <visual baseUri="Assets/Apps/Weather/">

    <binding template="ToastGeneric">
      <text>Today will be sunny with a high of 63 and a low of 42.</text>
      <group>
        <subgroup hint-weight="1">
          <text hint-align="center">Mon</text>
          <image src="Mostly Cloudy.png" hint-removeMargin="true"/>
          <text hint-align="center">63°</text>
          <text hint-style="captionSubtle" hint-align="center">42°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Tue</text>
          <image src="Cloudy.png" hint-removeMargin="true"/>
          <text hint-align="center">57°</text>
          <text hint-style="captionSubtle" hint-align="center">38°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Wed</text>
          <image src="Sunny.png" hint-removeMargin="true"/>
          <text hint-align="center">59°</text>
          <text hint-style="captionSubtle" hint-align="center">43°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Thu</text>
          <image src="Sunny.png" hint-removeMargin="true"/>
          <text hint-align="center">62°</text>
          <text hint-style="captionSubtle" hint-align="center">42°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Fri</text>
          <image src="Sunny.png" hint-removeMargin="true"/>
          <text hint-align="center">71°</text>
          <text hint-style="captionSubtle" hint-align="center">66°</text>
        </subgroup>
      </group>
    </binding>

  </visual>
</toast>
new ToastBindingGeneric()
{
    Children =
    {
        new AdaptiveText()
        {
            Text = "Today will be mostly sunny with a high of 63 and a low of 42."
        },

        new AdaptiveGroup()
        {
            Children =
            {
                GenerateSubgroup("Mon", "Mostly Cloudy.png", 63, 42),
                GenerateSubgroup("Tue", "Cloudy.png", 57, 38),
                GenerateSubgroup("Wed", "Sunny.png", 59, 43),
                GenerateSubgroup("Thu", "Sunny.png", 62, 42),
                GenerateSubgroup("Fri", "Sunny.png", 71, 66)
            }
        }
    }
};

Here is what the weather wide tile looks like using the above payload:

Here is what the weather toast notification looks like using the above payload:

Action Center in the Cloud!

In the upcoming update, we have enabled cross-device scenarios for users who own multiple devices (linked via their MSA login), making notifications more "ambient" - we are uploading users' notifications from their phone (works for both Windows Mobile and Android) to the cloud, and mirroring them to the user's PC. This means that users can see notifications from their phone when they are using their PC. The mirrored notifications are powered by Cortana, and can be managed on both devices inside Cortana's settings on a per app basis. To learn more, please see Notification Mirroring. Additionally, this also enables Universal Dismiss, so that when you get the same notification on multiple devices, developers can easily allow a "dismiss once, dismiss everywhere" experience.

Hero Image

You can now provide a "hero image" inside your Toast notification payload. This results in a special visual treatment that emphasizes this image when the notification is displayed, as shown below.

A hero image is normally collapsed in Action Center, but if the notification happens to be the most recent notification for an app inside Action Center, the hero image inside that Toast will be pre-expanded to invite the users to see more. In the below example, both notifications have hero image specified, only the most recent notification's hero image is pre-expanded.

<toast>
  <visual>

    <binding template="ToastGeneric">
      <text>Jill Bender says</text>
      <text>Check out where we camped last weekend! It was incredible, wish you could have come on the backpacking trip!</text>
      <image placement="appLogoOverride" hint-crop="circle" src="https://unsplash.it/64?image=1027"/> 
      <image placement="hero" src="https://unsplash.it/360/180?image=1043"/>
    </binding>
  </visual>
  <actions>
    ...
  </actions>
</toast>
new ToastContent()
{
    Visual = new ToastVisual()
    {
        BindingGeneric = new ToastBindingGeneric()
        {
            Children = { ... }

            HeroImage = new ToastGenericHeroImage()
            {
                Source = "https://unsplash.it/360/180?image=1043"
            },

            AppLogoOverride = ...
        }
    }

    ...
};

Attribution

You can now specify attribution text in your notification. This is especially useful if you are displaying content from a different source, and need to provide attribution for the source. For example, if Cortana wants to pop a stock price notification, but the data is powered by Morningstar, Cortana can specify "Morningstar" as the attribution text, ensuring the user knows where the data is sourced from.

Attribution text is always displayed regardless of the visual state of the toast notification - collapsed, expanded, in the popup banner, and inside Action Center.

<toast>
  <visual>

    <binding template="ToastGeneric">
      <text>Tortoise beats rabbit in epic race</text>
      <text>In a surprising turn of events, Rockstar Rabbit took a nasty crash, allowing Thomas the Tortoise to win the race.</text>
      <image placement="inline" src="https://unsplash.it/360/180?image=1043"/> 
      <text placement="attribution">The Animal Times</text>
    </binding>
  </visual>
  <actions>
    ...
  </actions>
</toast>
new ToastContent()
{
    Visual = new ToastVisual()
    {
        BindingGeneric = new ToastBindingGeneric()
        {
            Children = { ... }

            Attribution = new ToastGenericAttributionText()
            {
                Text = "The Animal Times"
            }
        }
    }

    ...
};

Context menu action

In Windows 10, users can right click (or tap-and-hold on touch devices) a Toast notification to bring up a context menu, which provides quick OS actions like turning off notifications for the app, or opening OS notification settings, like shown below.

In the Windows 10 Anniversary Update, we're extending this context menu to developers, so that apps can provide specific customized context menu actions for their notifications.

This is especially useful if you want to provide an action that deep-links to your app's notification settings (apps often have their own notification settings pages that provide more granular control over notifications).

You can also use context menu actions for other scenarios where a second-level action makes sense.

<toast>
  <visual>
    <binding template="ToastGeneric">
      <text>Adam Wilson tagged you in a photo</text>
      <text>On top of McClellan Butte - with Andrew Bares</text>
      <image placement="inline" src="https://unsplash.it/360/202?image=883"/> 
    </binding>
  </visual>
  <actions>
    <action placement="contextMenu"
      content="Manage notifications on photo tags"
      activationType="background"
      arguments="action=managePhotoTagNotificationSettings"/>
  </actions>
</toast>
new ToastContent()
{
    Visual = new ToastVisual()
    {
        ...
    },

    Actions = new ToastActionsCustom()
    {
        ContextMenuItems =
        {
            new ToastContextMenuItem("Manage notifications on photo tags", "args")
            {
                ActivationType = ToastActivationType.Background
            }
        }
    }

    ...
};

Web Notifications via Microsoft Edge

Edge in Windows 10 Anniversary Update now supports web notifications. When browsing on Edge, you can now receive web notifications from supported websites, as long as you grant permission, and as long as you don’t close the browser tab (it’s fine if tab is not in focus or not in foreground). Web developers simply call the W3C standard web notification API's, and the web notifications will show up as Toast notifications and go into Action Center like any other notifications sent from UWP apps, thanks to Edge's native integration with Windows 10's notification framework.

Notification Listener

In Windows 10 Anniversary Update, we released a Notification Listener API, which gives apps access to all of the user's Toast notifications, as well as subscribing to changes in the notifications (notifications being added, dismissed, expired, etc). Apps can build companion apps for smart accessories or wearables to display notifications on them, or any other scenario that could benefit from this API set. A more detailed blog post on the new Notification Listener can be found here - Notification Listener Documentation – Windows 10.

Action Center UI Refreshed

We made some minor UI adjustments to make notifications richer in content and easier to triage inside Action Center.

  • Application Icon - previously, application icons appeared in every single notification inside Action Center when an appLogoOverride icon is not provided. In the upcoming update, the application icon will instead be shown in each group title, rather than on each notification.
  • Image Size - we made some adjustments to the image sizes to make the notification content richer and more informative. The application icon has shrank to 16px by 16px. The AppLogoOverride (when provided) has been enlarged to 48px by 48px. Therefore, make sure your AppLogoOverride image is at least 48px by 48px (and provide higher resolution versions for the different scale factor devices). For inline images, we used to show a small thumbnail, but now we've enlarged inline images so they stretch until either the height max is reached or width is reached. For desktop that number is 180px high and 332 px wide. For mobile it’s dynamic, at 2:3 ratio.
  • More Text Lines in Collapsed View - in the upcoming update, the collapsed view of toast notifications will now display up to three lines of text, rather than just two lines.

More User Control/Customization

In this update, we also made the notification settings page more powerful, giving users more granular control over notification and Action Center behaviors.

  • Privacy above Lock - Users can turn on privacy above lock screen on a per app basis to prevent specific notification content from showing above lock for certain apps. *This feature was made available to users since Version 1511 of Windows 10 (build 10586).
  • Priority in Action Center - Users can change priorities of their app's notifications, with options of "Top", "High", or "Low" for each app. This determines the ordering of notifications inside Action Center. For example, you can choose to have the Messaging app's notifications as "High" priority, so that your text messages always appear at the top of Action Center. For apps that have the same priority, the notifications are still ordered chronologically.
  • Number of Notifications Visible in Action Center - as mentioned above in the UI refreshment section, Action Center now only shows up to 3 most recent notifications per app by default, and the rest of the notifications are "collapsed". A user can click on "show more" to unveil the rest of the notifications (up to 20). A user also has the option to go into the settings and change that number on a per app basis, to show more (or less) notifications "pre-expanded" by default for certain apps.

Here is a screenshot of what the new desktop Level 3 per app Notification Setting page looks like:

Comments (3)

  1. Carlos says:

    And blur effect on mobile never came ….

  2. Linda Liu says:

    I am using Azure Mobile app service to send push notification (toast). But the xml “<image placement='hero' " seems not working on there. I am using .NET backend.

  3. I’m still missing one more option:
    Disable the new counter for a specific apps in the Action Center icon (the very bottom right in the task bar). For some apps, I don’t like to see the counter poping up, when they create a lot of notifications. Would be awesome to have an additional trigger for that 🙂

    And by the way: Very useful article! Exactly what I was looking for 🙂

Skip to main content