New Windows 10 SDK and newwindows10sdk

New Windows 10 SDK and newwindows10sdk

Overview

Toast Notification plays an important role in UWP apps. It can greatly enhance the communication between apps and users, such as Operation promotion activities, version updates, and reminder tasks. Toast Notification allows you to create adaptive and interactive notifications through images, text, and buttons.

InAbout Windows 10 SDK Preview Build 17110A Brief Introduction to Toast Notification is provided. This article will give a more in-depth explanation from the development perspective. Toast Notification is mainly divided into network content Notification and local content Notification. In this article, we mainly focus on the development and display of the following new features of Toast Notification. For the moment, we will not detail the source of the Notification:

• Image Size Limit
• Progress bar
• New input options

Development Process

NuGet Installation

To implement Toast Notification in UWP, we need to introduce an SDK:Microsoft. Toolkit. Uwp. CommunicationsTo install NuGet in Visual Studio Package Management:

Install-Package Microsoft.Toolkit.Uwp.Notifications -Version 2.2.0

Basic implementation

Let's implement a Toast Notification with a relatively basic style. The content of Toast mainly includes the following parts:

• Launch-defines a parameter. When you click Toast, it is passed back to the application, allowing developers to deeply link to the application page content corresponding to the correct content displayed in Toast;
• Visual-Toast static content display, including text and images;
• The interactive part of Actions-Toast, including clickable buttons and text input;
• Audio-the music that is played when Toast is displayed.

Here we define the basic content required by ToastContent:

string title = "Shaomeng sent you a picture";string content = "Check this out!";string image = "ms-appx:///assets/test.jpg";string logo = "ms-appx:///assets/shaomeng.jpg";// Construct the visuals of the toastToastVisual visual = new ToastVisual(){    BindingGeneric = new ToastBindingGeneric()    {        Children =        {            new AdaptiveText()            {                Text = title            },            new AdaptiveText()            {                Text = content            },            new AdaptiveImage()            {                Source = image            }        },        AppLogoOverride = new ToastGenericAppLogo()        {            Source = logo,            HintCrop = ToastGenericAppLogoCrop.Circle        }    }};// In a real app, these would be initialized with actual dataint conversationId = 384928;// Construct the actions for the toast (inputs and buttons)ToastActionsCustom actions = new ToastActionsCustom(){    Buttons =    {        new ToastButton("Like", new QueryString()        {            { "action", "like" },            { "conversationId", conversationId.ToString() }        }.ToString())        {            ActivationType = ToastActivationType.Background        },        new ToastButton("View", new QueryString()        {            { "action", "viewImage" },            { "imageUrl", image }        }.ToString())    }};ToastAudio audio = new ToastAudio(){    Src = new Uri("ms-appx:///assets/test.mp3", UriKind.RelativeOrAbsolute)};

Define content for Toast Content

Use the above content to define a ToastContent and display it:

ToastContent toastContent = new ToastContent(){    Launch = "test string",    Visual = visual,    Actions = actions,    Audio = audio,};var toast = new ToastNotification(toastContent.GetXml());ToastNotificationManager.CreateToastNotifier().Show(toast);

 

Image Size Limit

The supported image sources in Toast Notification include: http: //, ms-appx: //, and ms-appdata :///

For network images, the unit of the image size limit is the size of a single image. After 16299, the limit of normal connections is 3 MB, and that of metered connections is 1 MB, whereas that of normal connections is 200 KB. You can see that the size limit on the network image is much more relaxed, and many high-definition images can also be used.

If your image size exceeds the size limit, or the download process fails and times out, the notification will be displayed normally, but some images will be discarded.

In the above example, we use a buildcast jpg with a low resolution, which is about 50 kb. If we replace the image in the above example with a 3 MB original network image:

string image = "http://192.168.1.110/buildcast.png";

The size of buildcast.png is 5.63 MB. If you see the result, the image is indeed abandoned and only other parts are displayed:

If you use the same image but put it in the project:

string image = "ms-appx:///assets/buildcast.png";

The result is that the image is displayed normally. This also confirms the conclusion above that the image size limit is only for network images:

 

Progress bar

In some scenarios, such as downloading or other processes, you must display a progress bar in the notification so that you can keep an eye on the progress. The progress bar can be uncertain or definite.

In Toast Content, the AdaptiveProgressBar class is used to display and update the progress bar. For example, it mainly involves the following attributes:

• Title-set and display the Title of the progress bar. DataBinding is supported;
• Value-sets and displays the current progress of the progress bar. DataBinding is supported. The default Value is 0.0, and the Value range is 0.0 ~ 1.0; AdaptiveProgressBarValue. Indeterminate indicates an uncertain value. The display effect is the three points that are constantly moving, indicating that an uncertain process is in progress. new BindableProgressBarValue ("myProgressValue") is the numeric binding statement;
• ValueStringOverride-set and display the current rewrite progress value. DataBinding is supported. The writing mode is new BindableString ("progressValueString "),
• Status-sets and displays the Status of the current progress bar. DataBinding is supported. For example, Status may include downloading..., finished! And so on;

Next, let's take a look at the sample code:

// Define a tag (and optionally a group) to uniquely identify the notification, in order update the notification data later;string tag = "demo-filelist";string group = "downloads";// Construct the toast content with data bound fieldsToastContent content = new ToastContent(){    Visual = new ToastVisual()    {        BindingGeneric = new ToastBindingGeneric()        {            Children =            {                new AdaptiveText()                {                    Text = "Downloading your demo files..."                },                new AdaptiveProgressBar()                {                    Title = "Demo Files",                    Value = new BindableProgressBarValue("progressValue"),                    ValueStringOverride = new BindableString("progressValueString"),                    Status = new BindableString("progressStatus")                }            }        }    }};var toast = new ToastNotification(content.GetXml());// Assign the tag and grouptoast.Tag = tag;toast.Group = group;//Assign initial NotificationData valuestoast.Data = new NotificationData();toast.Data.Values["progressValue"] = "0.0";toast.Data.Values["progressValueString"] = "0/10 files";toast.Data.Values["progressStatus"] = "Downloading...";// Provide sequence number to prevent out-of-order updates, or assign 0 to indicate "always update"toast.Data.SequenceNumber = 0;ToastNotificationManager.CreateToastNotifier().Show(toast);

The following code updates the progress bar:

// Construct a NotificationData object;string tag = "demo-filelist";string group = "downloads";// Create NotificationData and make sure the sequence number is incremented// since last update, or assign 0 for updating regardless of ordervar data = new NotificationData{    SequenceNumber = seq_no};// Assign new valuesif (seq_no == 1){    data.Values["progressValue"] = "0.7";    data.Values["progressValueString"] = "7/10 files";}else if (seq_no == 2){    data.Values["progressValue"] = "1.0";    data.Values["progressValueString"] = "10/10 files";    data.Values["progressStatus"] = "Finished!";}// Update the existing notification's data by using tag/groupToastNotificationManager.CreateToastNotifier().Update(data, tag, group);

Let's take a look at the three states: initial value, update 1-in progress, update 2-completed:

 

New input options

The input area appears in the Actions area of Toast. That is to say, the input area is displayed only when Toast is expanded. Let's take a look at several common input forms:

1. Fast reply to input

Let's take a look at the code in the input part, add a ToastTextBox to input text, and add a ToastButton to process the input text. In order to make the button appear behind the text box, set the TextBoxId attribute of ToastButton to the Id of ToastTextBox. The operation after clicking the button is a background operation. You do not need to start the application or use the associated Protocol to start other applications.

// Construct the actions for the toast (inputs and buttons)ToastActionsCustom actions = new ToastActionsCustom(){    Inputs =    {        new ToastTextBox("tbReply")        {            PlaceholderContent = "Type a reply"        }    },    Buttons =    {        new ToastButton("Reply", "action=reply&convId=9318")        {            ActivationType = ToastActivationType.Background,            // To place the button next to the text box,            // reference the text box's Id and provide an image            TextBoxId = "tbReply",            ImageUri = "Assets/if_paperfly_701491.png"        }    }};

The running effect is as follows: the text area is not displayed when the tab is collapsed, and the Toast disappears after you click the text button.

2. Input with button bar

The input with the button bar is relatively more common. The input box is followed by several buttons for the operation. clicking each button will have a corresponding operation.

// Construct the actions for the toast (inputs and buttons)ToastActionsCustom actions = new ToastActionsCustom(){    Inputs =    {        new ToastTextBox("tbReply")        {            PlaceholderContent = "Type a reply"        }    },    Buttons =    {        new ToastButton("Reply", "action=reply&threadId=9218")        {            ActivationType = ToastActivationType.Background        },        new ToastButton("Video call", "action=videocall&threadId=9218")        {            ActivationType = ToastActivationType.Foreground        }    }};

3. multiple-choice Input

Provide an input option to the user. After selecting an option, click the button to perform the corresponding operation.

Inputs ={    new ToastSelectionBox("time")    {        DefaultSelectionBoxItemId = "lunch",        Items =        {            new ToastSelectionBoxItem("breakfast", "Breakfast"),            new ToastSelectionBoxItem("lunch", "Lunch"),            new ToastSelectionBoxItem("dinner", "Dinner")        }    }},

4. Wake-up input

The basic structure is the same as the selected input, except that the two Action buttons are built-in buttons in the system: delay and cancellation.

Inputs ={    new ToastSelectionBox("snoozeTime")    {        DefaultSelectionBoxItemId = "15",        Items =        {            new ToastSelectionBoxItem("5", "5 minutes"),            new ToastSelectionBoxItem("15", "15 minutes"),            new ToastSelectionBoxItem("60", "1 hour"),            new ToastSelectionBoxItem("240", "4 hours"),            new ToastSelectionBoxItem("1440", "1 day")        }    }},Buttons ={    new ToastButtonSnooze()    {        SelectionBoxId = "snoozeTime"    },    new ToastButtonDismiss()}

The two buttons are mainly used: ToastButtonSnooze-delay button, which is used to remind you again after the specified time according to the value selected in the SelectionBox above; ToastButtonDismiss-Cancel button, which cancels the reminder;

 

Now we have finished introducing the new content for Toast Notification in Windows 10 SDK 17110. If you are interested in Toast Notification, you can do more in-depth research, I believe it will be of great help to your UWP App.