Implementing Adaptive Toast in Windows 10 Universal Apps

Toast Notification in windows 10 are keeps on getting better, they are widely used display the information very quickly and also it to engage the users interaction with the applications. In windows 8.1 we has some default template to display the toast notifications but we never has any option of creating our own layout in the toast notification. In windows 10 we have the option to set the Toast layout by our self and it is called Adaptive Toast. Where the developer chose the content in toast and update the toast.

The following steps helps in creating the Adaptive Toast Notifications in Windows 10.

Related Read : How to use Adaptive Tiles in Windows 10 Universal Apps.

Step 1: Create the XML which will be used to display the Toast. In our sample, I have used the ToastGeneric template, as this defines the Toast Notification as Adaptive.

The below code helps in doing it.

text elements are  used to display the text in the toast, if the user needs to add image in the toast then he can display it by adding  the image element.

Even you can change the logo of the Toast Notification by setting the placement of the image as appLogoOverride.

 string toast = "<toast>"
 + "<visual>"
 + "<binding template = \"ToastGeneric\" >"
 + "<image placement=\"appLogoOverride\" src=\"Assets\\DailyDotNETTips.png\" />"
 + "<text> Daily .Net Tips </text>"
 + "<text> Arun has posted a new blog</text>"
 + "<text> open to see it :)</text>"
 + "<image placement=\"inline\" src=\"Assets\\win.jpg\" />"
 + "</binding>"
 + "</visual>"
 + "</toast>";

Step 2: Create a XmlDocument object which is used to load the XML created.

Windows.Data.Xml.Dom.XmlDocument toastDOM = new Windows.Data.Xml.Dom.XmlDocument();
toastDOM.LoadXml(toast);

Step 3: Create a toast notification object by passing the created XmlDocument object as parameter to the ToastNotification class.

 ToastNotification toastNotification = new ToastNotification(toastDOM);

Step 4:  display the toast.

 var toastNotifier = Windows.UI.Notifications.ToastNotificationManager.CreateToastNotifier();
 toastNotifier.Show(toastNotification);

Now the Toast get displayed.

A Toast Notification, after being swiped away or ignored by the user it automatically goes into action center.

User can use the Chevron to view the complete Toast information.
    

User can even delete the toast by clicking the X button.
Hope this post might have helped in creating the Adaptive Toast in windows 10.