Creating A Toast Notification Containing Image, Selection-Box And Buttons

In this article, I have explained in detail how to create an adaptive and interactive toast notification in Universal Windows Platform.

The toast notification that I am going to create will contain contents like text, image, selection-box and buttons.
 
So, lets get started.
  • Open Visual Studio and create a new Project. Here, I am using Visual Studio 2017.

  • Choose Blank App (Universal Windows) and name it.

    Creating A Toast Notification Containing Image, Selection-Box And Buttons
  • Now, open the Main.xaml file in the Solution Explorer of your project. I am going to create a button in my xaml file which will popup the toast notification on clicking it.

  • To create a button, go the Toolbox present in the left-hand side of the Visual Studio. If you don’t find it, go to View -> Toolbox. Type ‘button’ in the search bar and drag and drop the button to your xaml file.

    Creating A Toast Notification Containing Image, Selection-Box And Buttons
  • You can change the name of the button by going to Content= “Button”. Double click on the button which will create a Click Event of the button.

  • Call a function named ShowToast() inside the Button Click Event.
    1. private void Button_Click(object sender, RoutedEventArgs e)  
    2.  {  
    3.    ShowToast();  
    4. }  
  • Right-click on your Project in the Solution Explorer and add an XML file to your file by following the below steps shown in the image. I have named my XML file as toast.xml

    Creating A Toast Notification Containing Image, Selection-Box And Buttons

    Creating A Toast Notification Containing Image, Selection-Box And Buttons
  • Paste the following code in your XML File.
    1. <?xml version="1.0" encoding="utf-8" ?>  
    2. <toast>  
    3.     <visual>  
    4.         <binding template="ToastGeneric">  
    5.             <text>Notification Message</text>  
    6.             <text>This is a Notification Message</text>  
    7.             <image src="C:\Users\Admin\Desktop\Toast\toast\Assets\pikachu.png"/>  
    8.         </binding>  
    9.     </visual>  
    10.     <actions>  
    11.         <input id="snoozeTime" type="selection" defaultInput="15">  
    12.             <selection id="1" content="1 minute"/>  
    13.             <selection id="15" content="15 minutes"/>  
    14.             <selection id="60" content="1 hour"/>  
    15.             <selection id="240" content="4 hours"/>  
    16.             <selection id="1440" content="1 day"/>  
    17.         </input>  
    18.         <action  
    19.          activationType="system"  
    20.          arguments="snooze"  
    21.          hint-inputId="snoozeTime"  
    22.          content=""/>  
    23.         <action  
    24.          activationType="system"  
    25.          arguments="dismiss"  
    26.          content=""/>  
    27.     </actions>  
    28. </toast>  
  • Now, paste the following code in Main.xaml.cs file.
    1. private async void ShowToast() {  
    2.     XmlDocument doc = newXmlDocument();  
    3.     StorageFile file = awaitStorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///toast.xml", UriKind.Absolute));  
    4.     IRandomAccessStreamreadStream = await file.OpenAsync(FileAccessMode.Read);  
    5.     XDocument xmldoc = XDocument.Load(readStream.AsStreamForRead());  
    6.     var toastTemplate = xmldoc.ToString();  
    7.     doc.LoadXml(toastTemplate);  
    8.     var toast = newToastNotification(doc);  
    9.     var toastNotifier = Windows.UI.Notifications.ToastNotificationManager.CreateToastNotifier();  
    10.     ToastNotificationManager.CreateToastNotifier().Show(toast);  
    11. }  
  • Also add the following namespaces to the Main.xaml.cs file.
    1. using Windows.Data.Xml.Dom  
    2. using Windows.Storage  
    3. using Windows.Storage.Stream  
    4. using System.Xml.Linq  
    5. using Windows.UI.Notifications;  
  • To display the image in your toast notification, you need to add your image in the Assets folder present in your Project and add its path in the image src present in the XML file code.

  • Finally, it’s the time to run the project. Run the project and on clicking the button, you must get the toast notification.

    Creating A Toast Notification Containing Image, Selection-Box And Buttons
The Snooze button will snooze the notification based on the time you select from the selection-box and the Dismiss button will dismiss the notification.