Action Center Notifications In Universal Windows Programs

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

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.

ToastTextBox

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