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
}