[Windows通用应用开发]Toast通知(一)——Toast实现

本系列文章：
[Windows通用应用开发]Toast通知(一)——Toast实现
[Windows通用应用开发]Toast通知(二)——Toast音效
[Windows通用应用开发]Toast通知(三)——定时Toast

---

Toast通知实现

Toast通知是指在屏幕上方弹出的交互式信息。

下面介绍在Windows和Windows Phone应用商店应用开发中，Toast通知的实现步骤：

清单设置

将package.appxmanifest的第一页中支持Toast通知一项选定为是

Toast模板

Toast模板有四种，可参考Microsoft提供的帮助文档，但在Windows Phone 8.1中无论使用哪一种，目前只会显示为第二种模板（纯文本），Windows 10 for Phone支持显示所有模板。

开发流程

后续将以第二种模板，在Windows Phone中实现进行说明。对于Windows应用商店应用，实现方法相同，结果相同，可采用更多模板。

• 选择模板
  此处选择了第二种模板，在Windows Phone 8.1中，它会呈现为 ToastText02 的已修改版本：没有图像，带有两个文本字符串以及应用的清单中提供的“方形 150x150”徽标。

var type = ToastTemplateType.ToastText02;var content = ToastNotificationManager.GetTemplateContent(type);

• 添加文本
  第二种模板的XML示例如下：

<toast>    <visual>        <binding template="ToastText02">            <text id="1">headlineText</text>            <text id="2">bodyText</text>        </binding>      </visual></toast>

将xml的内容填充到content中(C#)：

XmlNodeList toastxml = content.GetElementsByTagName("text");toastxml[0].AppendChild(content.CreateTextNode("标题"));toastxml[1].AppendChild(content.CreateTextNode("Hello World!"));

• 显示Toast

ToastNotification toast = new ToastNotification(content);ToastNotificationManager.CreateToastNotifier().Show(toast);

• 运行截图（wp10，纯文本模板2）

  

  在通知中心中也可以找到

  

使用带图片的模板

在目前的预览版WP10以及Windows应用商店应用中，可以完整使用上述所有模板（所有模板中的所有图像都要求大小小于 200 KB，小于 1024 x 1024 像素）。
带图片的模板2的XML示例如下：

<toast>    <visual>        <binding template="ToastImageAndText02">            <image id="1" src="image1" alt="image1"/>            <text id="1">headlineText</text>            <text id="2">bodyText</text>        </binding>      </visual></toast>

相比于前文所述的纯文字模板2，多了一个image标签，需要添加如下代码(C#)：

XmlNodeList image = content.GetElementsByTagName("image");((XmlElement)image[0]).SetAttribute("src", "ms-appx:///Assets/lena.png");((XmlElement)image[0]).SetAttribute("alt", "red graphic");

其中资源路径表示方法为：

http:// 或 https://
基于 Web 的图像。
ms-appx:///
应用包中包含的图像。
ms-appdata:///local/
保存到本地存储中的图像。
file:///
本地图像。（仅支持桌面应用。）

• 运行截图（wp10，带图片的模板4）
  
  调试使用预览版WP10系统，图像显示有bug（中间的叉是默认应用图标）。文字第三行默认处于隐藏状态，需要下拉才可以显示。

• 运行截图（win10，带图片的模板4）
  

---

所有代码均通过Windows 10 Mobile和Windows 10真机调试