快速构建Windows 8风格应用34-构建Toast通知

原文:快速构建Windows 8风格应用34-构建Toast通知

引言

开发过WindowsPhone应用或者使用过WindowsPhone手机的开发者都知道，我们会收到一些应用的提示信息，这些提示信息出现在手机的上端，并且停留几秒钟后会自动消失，当然如果我们点击弹出的信息会自动运行相应的应用程序，这种提示信息我们叫做通知。

其实Windows 8 Store 应用也借鉴了Windows Phone上的提示信息，我们开发人员可以使自己应用程序在合适时间弹出相关提示信息，那么这些Windows 8 Store应用的提示信息，我们叫做Toast通知。

并且Toast通知样式可以自定义的。例如：

一、Toast通知概述

Toast 通知是在屏幕右上角（对于从右到左 (Right-To-Left) 方向位于左上角）显示的通知。

• Toast 通知可在应用上下文之外提供临时消息
• 用 toast 通知可立即吸引用户注意
• 用户可以永久关闭应用的 toast 通知
• 能够快速导航到应用中上下文相关的位置
• 很容易从应用本地或云端调用 toast 通知

Toast 通知使用与动态磁贴类似的模板架构体系，有丰富的展现形式可以选择。

更多关于Toast 通知概述可以参考：Toast 通知概述（Windows 应用商店应用） (Windows)

二、Toast通知构建

1，声明Toast通知功能

打开Package.appxmanifest应用清单文件，“应用程序UI”选项卡中找到“支持Toast通知”设置为“是”。

2，声明 Toast 通知背景色和文本颜色

我们可以为 Toast 通知设置背景颜色和浅色或深色文本。注意：该设置同时适用Toast 和磁贴通知背景以及文本颜色。

3，指定小徽标图像

应用的小徽标图像显示在每个 Toast 通知的右下角，让用户识别引发通知的应用。

4，添加命名空间声明

   1:  using Windows.UI.Notifications;

   2:  using Windows.Data.Xml.Dom;

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }5，为 Toast 选取一个模板并检索其 XML 内容

我们从系统提供的模板目录中选择一个适合的模板（详细的模板列表可参考 ToastTemplateType 枚举）。

注意：我们发送的每个单独的通知都可以使用不同的模板。

   1:  ToastTemplateType toastTemplate = ToastTemplateType.ToastImageAndText01; 

   2:  XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);

这里我使用的是ToastImageAndText01 模板，该模版样式如下：

6，为通知提供文本内容

我们可以首先检索模板中标记名称为“text”的所有元素。

ToastImageAndText01 模板只包含一个代码分配的文本字符串。该字符串最多可包含三行自动换行的字符串，因此我们应该相应地设置字符串的长度，以避免被截断。

   1:  XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text");

   2:   toastTextElements[0].AppendChild(toastXml.CreateTextNode("你好Windows 8!"));

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

7，为通知提供图像

我们可以首先检索模板中标记名称为“image”的所有元素。

与磁贴不同，Toast 模板（如 ToastImageAndText01）最多包含一个图像。

注意：并非所有 Toast 模板都包含图像，某些磁贴模板是仅文本的。

   1:  XmlNodeList toastImageAttributes = toastXml.GetElementsByTagName("image");

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

然后我们可以从应用的程序包、本地存储或从 Web 使用图像。注意：该图像大小小于 200 KB，小于 1024 x 1024 像素。

这里我以应用程序包的图像为例：

   1:  ((XmlElement)toastImageAttributes[0]).SetAttribute("src", "ms-appx:///Assets/SmallLogo.png");

   2:  ((XmlElement)toastImageAttributes[0]).SetAttribute("alt", "red graphic");

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

8，指定Toast 持续时间或者Toast 音频（非必要）

我们可以为Toast设置持续时间（仅有两个值：short和long），通常当我们的通知属于约会或者会议提醒之类的时候才使用“long”值。

注意：Toast持续时间默认为“short”。

   1:  IXmlNode toastNode = toastXml.SelectSingleNode("/toast");

   2:  ((XmlElement)toastNode).SetAttribute("duration", "long");

另外我们也可以设置Toast音频，默认情况下Windows在播放通知时会播放一个简短的声音。同时我们可以选择使用系统提供的声音，也可以不使用任何声音。

由于模板中不包含 audio 元素，因此我们必须定义该元素，同时使用“ms-winsoundevent:”前缀指定声音文件。

   1:  IXmlNode toastNode = toastXml.SelectSingleNode("/toast");                        

   2:  XmlElement audio = toastXml.CreateElement("audio");

指定非默认声音。

   1:  audio.SetAttribute("src", "ms-winsoundevent:Notification.IM");

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

定义 audio 元素之后，需要将其附加到 Toast 的 XML 负载中，作为 toast 元素的子元素。

   1:  toastNode.AppendChild(audio);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

9，指定应用的启动参数

通常用户点击 Toast 通知时，相关应用应当会启动，并显示与该通知的内容相关的视图。

我们可以使用 Toast 元素的 launch 属性来实现该效果。

该属性提供一个在通过 Toast 启动应用时，从 Toast 传递到应用的字符串。此字符串没有任何特定形式，它由我们应用来定义。

我们的应用在每次被激活时必须检查作为参数形式的此字符串，并相应地调整它的视图或操作。例如：

   1:  ((XmlElement)toastNode).SetAttribute("launch", "{\"type\":\"toast\",\"param1\":\"12345\",\"param2\":\"67890\"}");

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

10，创建 Toast 通知并发送

   1:  ToastNotification toast = new ToastNotification(toastXml);

   2:  ToastNotificationManager.CreateToastNotifier().Show(toast);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

最后运行效果可如下：

点击按钮后弹出Toast通知：

 

更多关于Toast通知资料可参考：

1，发送 Toast 通知（使用 C#/VB/C++ 和 XAML 的 Windows 应用商店应用） (Windows)

2，Toast notifications sample