08/20/2017 description: The InAppNotification control offers the ability to show local notifications in your application. keywords: windows 10, uwp, uwp community toolkit, uwp toolkit, InAppNotification, in app notification, xaml control, xaml


The InAppNotification control offers the ability to show local notifications in your application.


The control should be placed where you want your notification to be displayed in the page, generally in the root grid.

    x:Name="ExampleInAppNotification" />

Note: Since the control is part of the page visual tree, it will render in the order it was added in the parent control, and might be hidden by other elements. For the control to render on top of other elements, add it as the last child of the parent control or set the Canvas.ZIndex to a high number.

Show notification

You have multiple options to show an in-app notification.

  1. By simply displaying the notification using the current template
  1. By using a simple text content.
ExampleInAppNotification.Show("Some text.");
  1. By using a UIElement (with a container as parent, ex: Grid)
var grid = new Grid();

// TODO : Construct the Grid in C#

  1. By using a DataTemplate
object inAppNotificationWithButtonsTemplate;
bool isTemplatePresent = Resources.TryGetValue("InAppNotificationWithButtonsTemplate", out inAppNotificationWithButtonsTemplate);

if (isTemplatePresent && inAppNotificationWithButtonsTemplate is DataTemplate)
    ExampleInAppNotification.Show(inAppNotificationWithButtonsTemplate as DataTemplate);

Notification duration

By passing a second argument to the Show() method, you can set the duration of the notification (in milliseconds).

ExampleInAppNotification.Show("Some text.", 2000); // the notification will appear for 2 seconds

Dismiss notification


Example Image

InAppNotification animation



If you want to fully customize the in-app notification, you will see that the Dismiss button is still visible. To hide it, simply set the property to ShowDismissButton="False".



This event is raised when the system or your user dismissed the notification.

private void InAppNotification_OnDismissed(object sender, EventArgs e)
    // TODO


By default, the popup animation of the control is a bottom to top animation. You can update the popup animation using the RenderTransformOrigin property of the control. See examples:

<controls:InAppNotification RenderTransformOrigin="0.5,1" />

The default value (X: 0.5, Y:1) will show popup animation from bottom to top.

<controls:InAppNotification RenderTransformOrigin="0.5,0" />

An alternate version of the popup animation (used by the vscode-like notification) will start from top to bottom.

Example Code

InAppNotification Sample Page

Default Template

InAppNotification XAML File is the XAML template used in the toolkit for the default styling.

Requirements (Windows 10 Device Family)

Device family Universal, 10.0.14393.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls