Implementing Adaptive Toast with Actions in Windows 10 Universal Apps

We are learning some of the improvements in toast and tiles notifications in Windows 10. This post is also one of them which explain how to use toast notification with action buttons. We have seen in our last post Implementing Adaptive Toast in Windows 10 Universal Apps how to create an adaptive toast. In this post we will see how to create an adaptive toast with action buttons where the users can directly interact with the toast. These action buttons invoke an app or do some task in the background when clicked. The sample I have demonstrated will display a textbox when the user receives a message and then the user can directly reply for the message form the toast itself.



Let’s see how to do it in details.

Related Post :  Implementing Adaptive Toast in Windows 10 Universal Apps

Step 1: Create the XML which will be used to display the Toast, along with the action buttons.

In our sample, I have used the ToastGeneric template, as this defines the Toast Notification as Adaptive.

The below code will help in doing it.

string toast = "<toast activationType='background' launch='args'>"

+ "<visual>"

+ "<binding template = \"ToastGeneric\" >"

+ "<image placement=\"appLogoOverride\" src=\"Assets\\DailyDotNETTips.png\" />"

+ "<text> Daily .Net Tips </text>"

+ "<text> Hi Arun, how about meeting tomorrow ?</text>"

+ "</binding>"

+ "</visual>"

+ "<actions>"

+ " <input id=\"message\" type=\"text\" placeholderContent=\"reply here\" />"

+ "<action activationType=\"background\" content=\"reply\" arguments=\"reply\" />"

+ "<action activationType=\"background\" content=\"video call\" arguments=\"video\" />"

+ "</actions> "

+ "</toast>";

text elements are used to display the text in the toast, if the user needs to add image in the toast then he can display it by adding the image element.

Even you can change the logo of the Toast Notification by setting the placement of the image as appLogoOverride.

The actions element specifies the control’s to be included in the toast. The buttons are included with an action element and the activationtype of these buttons specifies what kind of activation the button will perform.

The content attribute specifies the content of the button and the argument attributes is helpful to differentiate the button clicked in the background task.

Step 2: Create a XmlDocument object which is used to load the XML created and display the toast.

Windows.Data.Xml.Dom.XmlDocument toastDOM = new Windows.Data.Xml.Dom.XmlDocument();
toastDOM.LoadXml(toast);
ToastNotification toastNotification = new ToastNotification(toastDOM);
var toastNotifier = Windows.UI.Notifications.ToastNotificationManager.CreateToastNotifier();
toastNotifier.Show(toastNotification);

Step 3: Create a new project with a background task class which implements IBackgroundTask interface and then refer the  project in the our toast project.

public sealed class BGTask : IBackgroundTask
{
public void Run(IBackgroundTaskInstance taskInstance)
{
var details = taskInstance.TriggerDetails as ToastNotificationActionTriggerDetail;
var arguments = details.Argument;
var input = details.UserInput;
if (input.Count > 0)
{
//Perform the requested orperation
}
}
}

Step 4: Register the Background task.

BackgroundAccessStatus status = await BackgroundExecutionManager.RequestAccessAsync();

// Construct the background task
BackgroundTaskBuilder builder = new BackgroundTaskBuilder()
{
Name = "BGTask",
TaskEntryPoint = "Task.BGTask"
};

builder.SetTrigger(new ToastNotificationActionTrigger());
BackgroundTaskRegistration registration = builder.Register();

Step 5: Declare the background task in the package.appmanifest file.

 <Extensions>
 <Extension Category="windows.backgroundTasks" EntryPoint="Task.BGTask">
 <BackgroundTasks>
 <Task Type="systemEvent" />
 </BackgroundTasks>
 </Extension>
 </Extensions>

Now the toast is displayed and you can see the toast contains a textbox and two action buttons which invoke a background task when clicked.

Hope this post might have helped in creating the Adaptive Toast with action buttons in windows 10.