Action Center Notifications In Universal Windows Programs - Part 4

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

• Action Center Notifications In Universal Windows Programs Part 1
• Action Center Notifications In Universal Windows Programs Part 2
• Action Center Notifications In Universal Windows Programs: Part 3

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

public static ToastTextBox CreateText(string id) {
    ToastTextBox btnText = new ToastTextBox(id) {
        Title = "Enter the Name",
            PlaceholderContent = "First Name"
    };
    return btnText;

}

DefaultInput

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

Note

This property is to remove the PlaceholderContent.

public static ToastTextBox CreateText(string id) {
    ToastTextBox btnText = new ToastTextBox(id) {
        Title = "Enter the Name",
            PlaceholderContent = "First Name",
            DefaultInput = "Vinoth"
    };
    return btnText;

}

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

public static ToastButton CreateButton(string btnName, string args) {
    ToastButton btnButton = new ToastButton(btnName, args) {
        ActivationType = ToastActivationType.Foreground
    };
    return btnButton;
}

Set the image in the button control

public static ToastButton CreateButton(string btnName, string args, string image) {
    ToastButton btnButton = new ToastButton(btnName, args) {
        ActivationType = ToastActivationType.Background,
            ImageUri = "Assets/" + image
    };
    return btnButton;
}

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.

var toastCustom = new ToastActionsCustom() {
    Inputs = {
            CreateText("1")
        },
        Buttons = {
            CreateButton("Submit", "1", "ok.png", "1")
        }
};

public static ToastButton CreateButton(string btnName, string args, string image, string txtBoxid) {
        ToastButton btnButton = new ToastButton(btnName, args) {
            ActivationType = ToastActivationType.Background,
                ImageUri = "Assets/" + image,
                TextBoxId = txtBoxid

        };
        return btnButton;
    } // This is just a sample script. Paste your real code (javascript or HTML) here.

if ('this_is' == /an_example/) {
    of_beautifier();
} else {
    var a = b ? (c % d) : e[f];
}

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.
  
  
  

Foreground update for desktop & mobile output is given below.



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