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

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.
  
  
  

• 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.
  
  
  

• 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.
  

  private void Button_Click(object sender, RoutedEventArgs e)
   {
     ShowToast();
  }

• 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
  
  
  
  
  

• Paste the following code in your XML File.
  

  <?xml version="1.0" encoding="utf-8" ?>
  <toast>
      <visual>
          <binding template="ToastGeneric">
              <text>Notification Message</text>
              <text>This is a Notification Message</text>
              <image src="C:\Users\Admin\Desktop\Toast\toast\Assets\pikachu.png"/>
          </binding>
      </visual>
      <actions>
          <input id="snoozeTime" type="selection" defaultInput="15">
              <selection id="1" content="1 minute"/>
              <selection id="15" content="15 minutes"/>
              <selection id="60" content="1 hour"/>
              <selection id="240" content="4 hours"/>
              <selection id="1440" content="1 day"/>
          </input>
          <action
           activationType="system"
           arguments="snooze"
           hint-inputId="snoozeTime"
           content=""/>
          <action
           activationType="system"
           arguments="dismiss"
           content=""/>
      </actions>
  </toast>

• Now, paste the following code in Main.xaml.cs file.
  

  private async void ShowToast() {
      XmlDocument doc = newXmlDocument();
      StorageFile file = awaitStorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///toast.xml", UriKind.Absolute));
      IRandomAccessStreamreadStream = await file.OpenAsync(FileAccessMode.Read);
      XDocument xmldoc = XDocument.Load(readStream.AsStreamForRead());
      var toastTemplate = xmldoc.ToString();
      doc.LoadXml(toastTemplate);
      var toast = newToastNotification(doc);
      var toastNotifier = Windows.UI.Notifications.ToastNotificationManager.CreateToastNotifier();
      ToastNotificationManager.CreateToastNotifier().Show(toast);
  }

• Also add the following namespaces to the Main.xaml.cs file.
  

  using Windows.Data.Xml.Dom
  using Windows.Storage
  using Windows.Storage.Stream
  using System.Xml.Linq
  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.
  
  
  

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.