Windows 8 Metro App开发[10]通知使用(Toast,Tile和Badge)

注：本系列学习帖子我在DevDiv.com移动开发社区原创首发

转载请注明出处：BeyondVincent(破船)@DevDiv.com

如果你有什么问题也可以前往交流

下面是首发地址：

[DevDiv原创]Windows 8 Metro App开发Step by Step---(13个学习帖子)

在我写的上一个帖子中，我概述了Windows 8 中的通知，介绍了通知的类型（tile，toast和badges），以及通知的分发机制(local，scheduled和push)。在这一篇帖子中，我将以编程者的角度来给大家介绍我目前对通知的了解情况，希望能够起到抛砖引玉的作用，更多功能还需要等待你来实现。

注：1、本次主要以代码的形式来讲解通知的使用

2、本次讲解的通知分发方法为local[关于分发方法，请参考我的上一个帖子

通过本次的学习，你将初步掌握如下内容：

1、准备工作

2、Toast通知的使用

3、Tile通知的使用

4、Badge通知的使用
5、最后附上程序相关代码工程

更多内容请查看下面的帖子

Windows 8 Metro App开发Step by Step

1、准备工作

a) 首先以Blank App创建一个应用程序。然后打开Package.appxmanifest文件，按照下面图中的标准，制作了3个图片，并添加到工程中。

b) 获取 NotificationsExtensions 库

由于Tile、Toast和Badge使用的都是xml模版，为了简化对xml的操作，这里我们可以使用NotificationsExtensions对象库模型，它提供磁贴、锁屏提醒和 Toast 通知 XML 模板内容，而无需直接使用 XML 文档对象模型 (DOM)。 当你在 Microsoft Visual Studio 中使用此库时，你可以获得下列好处：

• 智能感知，它将可用的通知 XML 标记和属性列为对象属性。这样，开发人员将无需参考架构文档来获取有关元素和结构的信息。
• 工厂函数，可通过该函数来创建主干通知。然后，你可以用你的内容填充这些通知。
• 一种在你的通知负载中同时包括方形和加宽磁贴版本（这是最佳做法！）的简化方式。
• 一种查找和填充文本和图像属性的有用方式。可通过它们的名称来获取有关它们在模板中的预期使用、大小或位置的更多信息。
  

具体的使用操作说明微软的官网上有详细内容，我就不细说了，参考下面的链接：

使用 NotificationsExtensions 填充锁屏提醒、磁贴和 Toast 模板

这里我就默认你已经按照上面链接给出的操作步骤，完成了对NotificationsExtensions库的引用。

2、Toast通知的使用

先上相关代码

private void sendToast(object sender, RoutedEventArgs e)
{
  IToastNotificationContent toastContent = null;
  IToastText01 templateContent = ToastContentFactory.CreateToastText01();
  templateContent.TextBodyWrap.Text = "今天去游泳！(BeyondVincent|破船|)";
  toastContent = templateContent;
  ToastNotification toast = toastContent.CreateNotification();
  ToastNotificationManager.CreateToastNotifier().Show(toast);
}

看上面的代码，通过使用NotificationsExtensions库提供的IToastNotificationContent类，我们可以方便的创建出一个ToastNotification，然后在利用ToastNotificationManager该语句ToastNotificationManager.CreateToastNotifier().Show(toast); 将Toast通知显示出来。显示效果如下图所示：
显示在屏幕的右上角



关于Toast通知需要注意的是：需要在Package.appxmanifest中将是否支持Toast通知设置为是，如下图



3、Tile通知的使用
微软提供了好多Tile模版供我们使用，这里已经给出了详细的介绍，大家可以前去学习了解
Choosing a tile template
在这里我用了两种方式更新Tile：纯文本（ITileWideText03ITileWideText04）和web图片（ITileSquareImage）

先上纯文本代码：

private void UpdateTileWithText()
{
  ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03();
  tileContent.TextHeadingWrap.Text = "你有三条未读短信！";

  ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();
  squareContent.TextBodyWrap.Text = "你有三条未读短信！";
  tileContent.SquareContent = squareContent;

  TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());
}

看上面的代码，在这里同样使用NotificationsExtensions库提供的功能，很方便的创建出Notification，然后使用最后一行代码将其更新。

使用web图片代码：

void UpdateTileWithWebImage()
{
  ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01();

  tileContent.TextCaptionWrap.Text = "高清：撑杆跳伊辛巴耶娃4米70无缘奥运三连冠";

  tileContent.Image.Src = "http://img1.gtimg.com/4/460/46005/4600509_980x1200_292.jpg";
  tileContent.Image.Alt = "Web image";

  ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage();

  squareContent.Image.Src = "http://img1.gtimg.com/4/460/46005/4600509_980x1200_292.jpg";
  squareContent.Image.Alt = "Web image";

  tileContent.SquareContent = squareContent;

  TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());
}

如果我们要清除Tile信息，则调用下面的代码即可

TileUpdateManager.CreateTileUpdaterForApplication().Clear();

运行效果如下图：

文字：


图片：


4、Badge通知的使用
微软也提供了badge相关的详细介绍以及图标，建议参考下面的链接，进行了解
Badge overview (Metro style apps)
Choosing a badge image


下面我继续上代码，这里我同样用两种方式展现badge的使用（数字和图片）

先上数字的代码：

void UpdateBadgeWithNumber(int number)
{
  BadgeNumericNotificationContent badgeContent = new BadgeNumericNotificationContent((uint)number);

  BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());
}

代码很简单，我就不表了。

在上图片的代码：

void UpdateBadgeWithGlyph(GlyphValue index)
{
  BadgeGlyphNotificationContent badgeContent = new BadgeGlyphNotificationContent(index);

  BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());
}

同样不细表，如果大家在使用过程中遇到什么问题，可以跟帖进行讨论。

下面是清除badge通知内容的代码：

BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();

很简单吧。那我就来上两个允许效果图：

数字：


图片：


5、最后附上程序相关代码工程
下图是程序主界面图：


下载代码：

DevDiv_Notifications.rar