20、磁贴和磁贴通知（tile）（上）
win8 中的磁铁操作要比 windows phone 中的复杂一些，不过原理大同小异，都是一些固定内容模型。
参考文档：
磁贴和磁贴通知 ： http://msdn.microsoft.com/zh-cn/library/windows/apps/hh779724.aspx
磁贴模板目录 ： http://msdn.microsoft.com/zh-cn/library/windows/apps/hh761491.aspx
Tiles 在系统的开始菜单中代表着应用，并且应用可以使用 tile 和 badge 通知来向用户显示 新的、重大的、定制的内容。
Tile 通知是一种固定格式的 XML，其中包含文字和图片内容。在应用程序清单中，必须包含一张正方形的的 logo，如果
应用程序也想使用宽模版 logo，也需要在清单中注明。如果你的应用中同样支持宽 tile，强烈建议你预加载 方形和宽形 在预加
载的 xml 中，从而无论开始菜单中的 tile 是方形或者 宽形的 都可以接收通知。
因为通知（notifications） 仅仅是一些 XML，你可以通过很多种方法进行创建。可以使用本示例中包含的 NotificationsExtensions 类库，也可以使用一些字符串。
位于 Windows.UI.Notifications 命名空间下的 TileUpdateManager 类：
// 创建用于更改和更新启动菜单图块的 TileUpdater 对象。此类还提供对系统提供的平铺模板 XML 内容的访问，以便您可以自定义用于更新您平铺的内容。 public static class TileUpdateManager { // 创建并初始化 TileUpdater 的新实例，此操作可让您更改调用应用程序图块的外观。 // 返回结果: // 用于将更改发送到应用程序的平铺的对象。 public static TileUpdater CreateTileUpdaterForApplication(); // 创建并初始化图块 TileUpdater 的新实例，该图块属于和调用应用程序位于同一包中的另一应用程序。TileUpdater 允许开发人员更改该平铺外观。 // applicationId: // 标题的唯一 ID。 // 返回结果: // 用于通过 applicationId 将更改发送到平铺标识的对象。 public static TileUpdater CreateTileUpdaterForApplication(string applicationId); // 创建并初始化 TileUpdater 的新实例，此操作可让您更改 secondary tile 的外观。平铺可属于调用应用程序或相同包中的其他任何应用程序。 // tileId: // 标题的唯一 ID。 // 返回结果: // 用于通过 tileID 将更新发送到平铺标识的对象。 public static TileUpdater CreateTileUpdaterForSecondaryTile(string tileId); // 获取预定义的图块模板之一的 XML 内容，这样您可以自定义该内容以进行图块更新。 // 参数: // type: // 模板的名称。 // 返回结果: // 包含 XML 的对象。 public static XmlDocument GetTemplateContent(TileTemplateType type); }
1、Send tile notification with text：
NotificationsExtensions 类库同样的包含在了源代码文件中，所有源代码文件在 前言 中可以下载。
//使用 NotificationsExtensions 类库 <Button x:Name="UpdateTileWithText" Content="Send tile notification with text" Click="UpdateTileWithText_Click"/> //使用模版自定义字的符串 <Button x:Name="UpdateTileWithTextWithStringManipulation" Content="Send tile notification created with strings" Click="UpdateTileWithTextWithStringManipulation_Click"/> //清除 tile <Button x:Name="ClearTile" Content="Clear tile" Click="ClearTile_Click"/>
三个按钮相应的单击事件：
//使用 NotificationsExtensions 类库 private void UpdateTileWithText_Click(object sender, RoutedEventArgs e) { // 创建一个宽模版
ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03(); tileContent.TextHeadingWrap.Text = "Hello World! My very own tile notification"; //因为用户可能把桌面上的宽 tile 设置为 正方形的，所以在这里 //把 方形的 模版附加到 宽形的模版上面 ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04(); squareContent.TextBodyWrap.Text = "Hello World! My very own tile notification"; tileContent.SquareContent = squareContent; //发送这个 notification TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification()); }
//使用自定义的 xml private void UpdateTileWithTextWithStringManipulation_Click(object sender, RoutedEventArgs e) { // create a string with the tile template xml string tileXmlString = "<tile>" + "<visual>" + "<binding template='TileWideText03'>" + "<text id='1'>Hello World! My very own tile notification</text>" + "</binding>" + "<binding template='TileSquareText04'>" + "<text id='1'>Hello World! My very own tile notification</text>" + "</binding>" + "</visual>" + "</tile>"; // 创建一个 DOM 对象 Windows.Data.Xml.Dom.XmlDocument tileDOM = new Windows.Data.Xml.Dom.XmlDocument(); // 加载 xml 字符串到 DOM ,捕获任何无效的 xml 字符
tileDOM.LoadXml(tileXmlString); // 创建一个 tile notification TileNotification tile = new TileNotification(tileDOM); // 发送这个 notification 到这个应用的 application tile
TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);
//返回 XML 表示形式及其所有子代。 string xmlStr = tileDOM.GetXml(); }
// 清除桌面通知 private void ClearTile_Click(object sender, RoutedEventArgs e) { // 删除所有更新并将平铺还原为其默认内容（如应用程序清单所声明）。 TileUpdateManager.CreateTileUpdaterForApplication().Clear(); }
桌面显示的宽屏通知：
2、Send tile notification with local images ：
Tile notifications 可以指定本地的图片。这些图片可以引用应用程序包 （使用 ms-appx:/// 协议），或者引用本地的
存储空间（local storage）（程序运行时下载的图片）使用 （ms-appdata:///local/ 协议）。图片的格式必须是 .png,
.jpg, .jpeg 或者 gif。图片的最大为 200 KB， 尺寸最大为 1024 x 1024。
//使用 NotificationsExtensions 类库 <Button x:Name="UpdateTileWithImage" Content="Send tile notification with local images" Click="UpdateTileWithImage_Click"/> //使用模版自定义字的符串 <Button x:Name="UpdateTileWithImageWithStringManipulation" Content="Send tile notification created with strings" Click="UpdateTileWithImageWithStringManipulation_Click"/> //清除 tile <Button x:Name="ClearTile" Content="Clear tile" Click="ClearTile_Click"/>
//使用 NotificationsExtensions 类库
void UpdateTileWithImage_Click(object sender, RoutedEventArgs e) { ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01(); tileContent.TextCaptionWrap.Text = "This tile notification uses ms-appx images"; //tile 上的图片 tileContent.Image.Src = "ms-appx:///images/redWide.png";
//图片的描述文字 tileContent.Image.Alt = "Red image"; ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage(); squareContent.Image.Src = "ms-appx:///images/graySquare.png"; squareContent.Image.Alt = "Gray image"; tileContent.SquareContent = squareContent; TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification()); }
//使用模版自定义字的符串 void UpdateTileWithImageWithStringManipulation_Click(object sender, RoutedEventArgs e) { string tileXmlString = "<tile>" + "<visual>" + "<binding template='TileWideImageAndText01'>" + "<text id='1'>This tile notification uses ms-appx images</text>" + "<image id='1' src='ms-appx:///images/redWide.png' alt='Red image'/>" + "</binding>" + "<binding template='TileSquareImage'>" + "<image id='1' src='ms-appx:///images/graySquare.png' alt='Gray image'/>" + "</binding>" + "</visual>" + "</tile>"; Windows.Data.Xml.Dom.XmlDocument tileDOM = new Windows.Data.Xml.Dom.XmlDocument(); tileDOM.LoadXml(tileXmlString); TileNotification tile = new TileNotification(tileDOM); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile); }
//清除 tile private void ClearTile_Click(object sender, RoutedEventArgs e) { TileUpdateManager.CreateTileUpdaterForApplication().Clear(); }
显示效果（上面为一张红色的 png 图片）：
3、Send tile notification with web images ：
本示例讲述如果使用 web 服务中的图片。
Tile notifications 也可以指定 web 服务端的图片。这些图片可以通过使用 http:// 或者 https:// 协议进行传输。图片的格式必须是 .png,
.jpg, .jpeg 或者 gif。图片的最大为 200 KB， 尺寸最大为 1024 x 1024。
//图片的 uri 地址 <TextBox x:Name="ImageUrl" Text="http://" />
//使用 NotificationsExtensions 类库 <Button x:Name="UpdateTileWithWebImage" Content="Send tile notification with web images" Click="UpdateTileWithWebImage_Click" /> //使用模版自定义字的符串 <Button x:Name="UpdateTileWithWebImageWithStringManipulation" Content="Send tile notification created with strings"
Click="UpdateTileWithWebImageWithStringManipulation_Click"/> //清除 tile <Button x:Name="ClearTile" Content="Clear tile" Click="ClearTile_Click"/>
//使用 NotificationsExtensions 类库 void UpdateTileWithWebImage_Click(object sender, RoutedEventArgs e) { ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01(); tileContent.TextCaptionWrap.Text = "This tile notification uses web images."; //重要: //在工程清单中，Internet (Client) 功能必须选中（在 Capabilities 选择卡中），从而 //可以显示服务器端的图片（通过 http:// 或者 https:// 协议） tileContent.Image.Src = ImageUrl.Text; tileContent.Image.Alt = "Web image"; ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage(); squareContent.Image.Src = ImageUrl.Text; squareContent.Image.Alt = "Web image"; tileContent.SquareContent = squareContent;
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification()); }
4、Send badge notification :
本示例是讲述如何发送 badge 通知。
Badge notifications 使用一个数字 或者 系统提供的图形 来更新你的应用的 tile。Badges 通知可以同时在 方形或者 宽形
的 tile 上面显示。
三个按钮:
更新接收更新,输入的数字 的文本框:
显示结果：
更新接收更新,选择输入的图案 的下拉框:
显示结果：
前端的 xaml ：
// 用 数字 更新 tile <TextBox x:Name="NumberInput" Text="1" /> // 用 图案 更新 tile <ComboBox x:Name="GlyphList"> <ComboBoxItem x:Name="none">none</ComboBoxItem> <ComboBoxItem x:Name="activity">activity</ComboBoxItem> <ComboBoxItem x:Name="alert">alert</ComboBoxItem> <ComboBoxItem x:Name="available">available</ComboBoxItem> <ComboBoxItem x:Name="away">away</ComboBoxItem> <ComboBoxItem x:Name="busy">busy</ComboBoxItem> <ComboBoxItem x:Name="newMessage">newMessage</ComboBoxItem> <ComboBoxItem x:Name="paused">paused</ComboBoxItem> <ComboBoxItem x:Name="playing">playing</ComboBoxItem> <ComboBoxItem x:Name="unavailable">unavailable</ComboBoxItem> <ComboBoxItem x:Name="error">error</ComboBoxItem> <ComboBoxItem x:Name="attention">attention</ComboBoxItem> </ComboBox> //使用 NotificationsExtensions 类库 <Button x:Name="UpdateBadge" Content="Send badge notification" Click="UpdateBadge_Click" /> //使用模版自定义字的符串 <Button x:Name="UpdateBadgeWithStringManipulation" Content="Send badge notification created with strings" Click="UpdateBadge_Click" /> //清除 tile <Button x:Name="ClearBadge" Content="Clear badge" Click="ClearBadge_Click" />
1）用数字更新 ：
//使用 NotificationsExtensions 类库
void UpdateBadge_Click(object sender, RoutedEventArgs e) { int number; if (Int32.TryParse(NumberInput.Text, out number)) { //使用 NotificationsExtensions 类库 BadgeNumericNotificationContent badgeContent =
new BadgeNumericNotificationContent((uint)number); // 用 数字 更新 tile
BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());
} else { //用户输入的不是数字 不会更新 } }
//使用模版自定义字的符串 void UpdateBadge_Click(object sender, RoutedEventArgs e) { int number; if (Int32.TryParse(NumberInput.Text, out number)) { // 用 badge 的 xml 模版创建字符串
string badgeXmlString = "<badge value='" + number + "'/>"; Windows.Data.Xml.Dom.XmlDocument badgeDOM = new Windows.Data.Xml.Dom.XmlDocument(); try { // 创建 DOM badgeDOM.LoadXml(badgeXmlString); // 定义图块徽标覆盖的更新的内容、关联元数据和事件以及过期时间。 //徽章可以显示从 1 到 99 的数字或 状态标志符号。 BadgeNotification badge = new BadgeNotification(badgeDOM);
// CreateBadgeUpdaterForApplication() : 创建并初始化 BadgeUpdater 的新实例，此操作可让您更改调用应用程序图块上的徽章外观或内容。 BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);
// 返回 XML 表示形式及其所有子代。 string strXML = badgeDOM.GetXml(); } catch (Exception) { //输入的不是有效的 badge 的 xml 模版 } } else { // 用户输入的不是数字 不会更新 } }
//清除 badge void ClearBadge_Click(object sender, RoutedEventArgs e) { BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear(); }
2） 用符号更新 badge ：
//使用 NotificationsExtensions 类库 void UpdateBadge_Click(object sender, RoutedEventArgs e) { //注意:这通常会创建新的BadgeGlyphNotificationContent(GlyphValue.Alert)或任何GlyphValue的值(GlyphValue.Alert) or any of the values of GlyphValue BadgeGlyphNotificationContent badgeContent = new BadgeGlyphNotificationContent((GlyphValue)GlyphList.SelectedIndex); BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification()); }
//使用模版自定义字的符串 void UpdateBadge_Click(object sender, RoutedEventArgs e) { // 用 badge 的 xml 模版创建字符串 string badgeXmlString = "<badge value='" + ((ComboBoxItem)GlyphList.SelectedItem).Content.ToString() + "'/>"; Windows.Data.Xml.Dom.XmlDocument badgeDOM = new Windows.Data.Xml.Dom.XmlDocument(); try { // 创建 DOM badgeDOM.LoadXml(badgeXmlString); //把 xml 字符串 加载到 xml 中,并且捕捉非法的 xml 字符 BadgeNotification badge = new BadgeNotification(badgeDOM); BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge); } catch (Exception) { // 输入的不是有效的 badge 的 xml 模版 } }
注: badge 中图形的值 :
// 在 NotificationsExtensions 的扩展库中 /// <summary> /// The types of glyphs that can be placed on a badge. /// </summary> public enum GlyphValue { /// <summary> /// No glyph. If there is a numeric badge, or a glyph currently on the badge, /// it will be removed. /// </summary> None = 0, /// <summary> /// A glyph representing application activity. /// </summary> Activity, /// <summary> /// A glyph representing an alert. /// </summary> Alert, /// <summary> /// A glyph representing availability status. /// </summary> Available, /// <summary> /// A glyph representing away status /// </summary> Away, /// <summary> /// A glyph representing busy status. /// </summary> Busy, /// <summary> /// A glyph representing that a new message is available. /// </summary> NewMessage, /// <summary> /// A glyph representing that media is paused. /// </summary> Paused, /// <summary> /// A glyph representing that media is playing. /// </summary> Playing, /// <summary> /// A glyph representing unavailable status. /// </summary> Unavailable, /// <summary> /// A glyph representing an error. /// </summary> Error, /// <summary> /// A glyph representing attention status. /// </summary> Attention }
