磁贴:Metro开始界面下的那些方格-中文百科频道

什么叫磁贴？

美国微软公司2012年将发布的操作系统Windows 8，全新Metro开始界面下的那些方格，英文是Tile，中文之前有文人骚客称之为瓷砖，还有人叫它板砖。不过瓷砖板砖地砖和砖头，感觉确实不如磁贴来的更传神一些，你说呢？

Metro(米雀)是微软在Windows Phone中正式引入的一种界面设计语言，也是Windows 8的主要界面显示风格。在Windows Phone之前，微软已经在Zune Player和XBox 360主机中尝试采用过类似的界面风格，并得到了用户的广泛认可。于是，微软在新发布的Windows Phone、已经发布的Windows 8预览版以及Office 15中也采用了Metro设计，今后的微软产品中将更多的能看到Metro的影子，而更少的看到传统的Windows视窗界面。

创建默认

说明

使用 Microsoft Visual Studio 11 清单编辑器创建默认磁贴（使用 JavaScript 和 HTML 的 Modern 风格应用）

目标

若要使用已安装的模板在 Visual Studio Express 2012 RC for Windows 8 中创建新项目，则需在包清单中定义默认的磁贴及其图像。

先决条件Visual Studio Express 2012 RC for Windows 8

显示在磁贴上的图像文件，150 x 150 像素。

该图像文件的较小版本，30 x 30 像素。此图像不用于磁贴本身，而是在搜索结果、“所有程序”列表以及 UI 的其他位置中使用。

推荐：该图像文件的加宽版本为 310 x 150 像素。注意如果未提供加宽图像，则除非发布你的应用的新版本，否则无法通过加宽模板更新磁贴。但是，磁贴显示为正方形磁贴还是加宽磁贴由用户决定。有关何时应该包括以及何时不应包括加宽图像的详细信息，请参阅磁贴指南和清单。

说明

1.创建新项目。打开 Visual Studio Express 2012 RC for Windows 8。

单击“新建项目...”

如果还未打开，请单击“新建项目”窗口左侧面板中的“已安装”。

选择项目语言。

选择“Windows Modern 风格”。

在“新建项目”窗口的中心窗格中，选择“空白应用程序”。

在窗口底部为项目指定一个名称。

单击“确定”。

2.打开清单编辑器如果未显示“解决方案资源管理器”，请从“视图”菜单中进行选择。

双击“package.appxmanifest”。此时会打开“清单编辑器”窗口。

3. 提供磁贴详细信息如果还未打开，请选择清单编辑器的“应用程序UI”窗格。

使用你自己的徽标图像的路径取代默认的图像。

选择是否在磁贴上显示应用的短名称。此名称不能超过 13 个字符。如果名称太长，将会被截断。你可以选择显示徽标，显示名称或两者都不显示。

选择名称的文本是使用浅色字体还是深色字体（基于背景色）。

接受默认背景色，或以 W3DC 颜色字符串（如“#FFFFFF”）提供自己的颜色。此背景色用于对应用的其他部分进行着色：任意应用中对话框的按钮颜色，以及 Windows 应用商店中的“应用详情”页。

指定磁贴

贴：先决条件了解磁贴和通知术语及概念。有关详细信息，请参阅磁贴、锁屏提醒以及通知。使用 Windows 运行时 API 创建采用 JavaScript 的基本 Modern 风格应用的功能。若要使此页上显示的示例代码正常工作，则必须在文件中包含以下行： var Notifications = Windows.UI.Notifications。

说明

步骤1:定义加宽磁贴此示例选择模板，检索模板文本和图像元素，以及为这些元素分配值。

var tileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileWideImageAndText01); // Get the text attributes for this template and fill them in.var tileTextAttributes = tileXml.getElementsByTagName("text"); tileTextAttributes.appendChild(tileXml.createTextNode("This tile notification uses ms-resource images")); // Get the image attributes for this template and fill them in.var tileImageAttributes = tileXml.getElementsByTagName("image"); tileImageAttributes.setAttribute("src", "ms-resource:images/redWide.png");

步骤 2: 定义正方形磁贴此示例重复执行仅图像正方形磁贴的前面步骤。

var squareTileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileSquareImage); var squareTileImageAttributes = squareTileXml.getElementsByTagName("image"); squareTileImageAttributes.setAttribute("src", "ms-resource:images/graySquare.png");

步骤3:向宽磁贴的负载添加正方形磁贴此示例检索 binding 元素，该元素定义 squareTileXml 负载中的正方形磁贴并导入该元素以及将其作为加宽磁贴的同级追加。

var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true); tileXml.getElementsByTagName("visual").item(0).appendChild(node);

备注

前面的步骤在 XML 负载的一个 visual 元素下添加了两个 binding 元素，结果如下所示：

This tile notification uses ms-resource images

如何借助本地通知使用通知队列

说明

步骤1:设置选项以启用通知循环此代码为你的应用启用通知队列。运行应用时，仅需要发起此调用一次，因此应在初始化代码中发起此次调用。

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().enableNotificationQueue(true);

步骤2:创建磁贴通知这是所有磁贴通知中的第一步且这种情形与其他任何情形没有区别，此处包含该步骤仅用于完整性。有关详细信息，请参阅快速入门：发送磁贴更新。

var template = Windows.UI.Notifications.TileTemplateType.tileWideText03; var tileXml = Windows.UI.Notifications.TileUpdateManager.getTemplateContent(template); // TODO: Fill in the template with your tile content.// TODO: Define a square tile and add it to tileXML.var tileNotification = new Windows.UI.Notifications.TileNotification(tileXml);

步骤3:授予通知标记此步骤可选。标记为不超过 16 个字符的字符串加上终止 NULL 字符，用于唯一标识应用中的通知。

tileNotification.tag = "stock.msft";

步骤4:向磁贴发送通知

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);