Action Center Notifications In Universal Windows Programs - Part 4

This article explains how to implement the Action Center ToastButton and ToastTextBox in to our Application.

Before reading this article, I highly recommend reading the previous part of the series

ToastTextBox & ToastButton

In Windows 10 Anniversary update, Microsoft has allowed Textbox and Button features in the Action Center & we can process the input into the background or foreground.

ToastTextBox

ToastTextBox features gets the input from the user from the ToastNotification. To create ToastTextBox object, each textbox, Id must be required.

Property

  • Id
    It represents to identify the Textbox (Next section will see the purpose of this)

  • Title
    Title of the Textbox

  • PlaceholderContent
    Hint to the user what should be entered.

Sample code

  1. public static ToastTextBox CreateText(string id) {  
  2.     ToastTextBox btnText = new ToastTextBox(id) {  
  3.         Title = "Enter the Name",  
  4.             PlaceholderContent = "First Name"  
  5.     };  
  6.     return btnText;  
  7.   
  8. }  
ToastTextBox

DefaultInput

This property is allowing to set the default value of the textbox.

Note

This property is to remove the PlaceholderContent.
  1. public static ToastTextBox CreateText(string id) {  
  2.     ToastTextBox btnText = new ToastTextBox(id) {  
  3.         Title = "Enter the Name",  
  4.             PlaceholderContent = "First Name",  
  5.             DefaultInput = "Vinoth"  
  6.     };  
  7.     return btnText;  
  8.   
  9. }  
ToastTextBox

ToastButton

This class is used to create the button for ToastNotification.

To create ToastButton, two properties must be required i.e. content Name & arguments like ToastContextMenu.
  • Name
    Content name of the button.

  • arguments
    It is required to find which button has clicked.

Property

  • ActivationType
    Activation type background, Foreground or protocol.

  • ImageUri
    To assign the image to the button.

Sample code

  1. public static ToastButton CreateButton(string btnName, string args) {  
  2.     ToastButton btnButton = new ToastButton(btnName, args) {  
  3.         ActivationType = ToastActivationType.Foreground  
  4.     };  
  5.     return btnButton;  
  6. }  
ToastTextBox

Set the image in the button control
  1. public static ToastButton CreateButton(string btnName, string args, string image) {  
  2.     ToastButton btnButton = new ToastButton(btnName, args) {  
  3.         ActivationType = ToastActivationType.Background,  
  4.             ImageUri = "Assets/" + image  
  5.     };  
  6.     return btnButton;  
  7. }  
ToastTextBox

Textbox Id in Button control

In ToastButton, one more property is available i.e. TextBoxId property is a property, which is used to move the button control right side of the textbox.

Ex

As you have seen in the previous image, button has placed downside of the textbox. If you want to move the button control to right of the textbox, it passes the textbox Id to the ToastButton control TextBoxId.
  1. var toastCustom = new ToastActionsCustom() {  
  2.     Inputs = {  
  3.             CreateText("1")  
  4.         },  
  5.         Buttons = {  
  6.             CreateButton("Submit""1""ok.png""1")  
  7.         }  
  8. };   
  9.   
  10. public static ToastButton CreateButton(string btnName, string args, string image, string txtBoxid) {  
  11.         ToastButton btnButton = new ToastButton(btnName, args) {  
  12.             ActivationType = ToastActivationType.Background,  
  13.                 ImageUri = "Assets/" + image,  
  14.                 TextBoxId = txtBoxid  
  15.   
  16.         };  
  17.         return btnButton;  
  18.     } // This is just a sample script. Paste your real code (javascript or HTML) here.  
  19.   
  20. if ('this_is' == /an_example/) {  
  21.     of_beautifier();  
  22. else {  
  23.     var a = b ? (c % d) : e[f];  
  24. }  
ToastTextBox

IToastNotificationActivatedEventArgs

IToastNotificationActivatedEventArgs contains the input values from the ActionCenter, which will trigger by the user.
  • Argument
    Argument field ise used to find the which button has clicked and all the Textbox value has received from the ValueSet collection

  • UserInput
    UserInput is a ValueSet & it contains the Textbox information.

  • Key
    It is helpful to find the Textbox

  • Value
    Textbox value.

    ToastTextBox

Foreground update for desktop & mobile output is given below.

ToastTextBox

I hope, you understood how to implement ToastButton and Textbox concept.