磁貼

美國 微軟公司2012年將發布的 作業系統 Windows 8，全新Modern開始界面下的那些方格，英文是Tile，中文之前有騷人墨客稱之為 瓷磚，還有人叫它板磚。

基本介紹

• 中文名：磁貼
• 外文名：Tile
• 國家：美國
• 公司：微軟公司
• 時間：2012年
• 作業系統：Windows、Windows Phone

定義

美國 微軟公司2012年將發布的作業系統Windows 8，全新Modern開始界面下的那些方格，英文是Tile，中文之前有騷人墨客稱之為瓷磚，還有人叫它板磚。

Modern界面下的windows8的“色塊”磁貼

創建默認

說明

使用 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 套用商店中的“套用詳情”頁。

傳送更新

先決條件

本主題假設你了解磁貼和通知術語及概念，以及 XML。還假設你知道如何使用 Windows 運行時 API 創建採用 JavaScript 的基本的 Modern 風格套用。

若要使此頁上顯示的示例代碼正常工作，則必須在檔案中包含以下行：

var Notifications = Windows.UI.Notifications;

說明

為磁貼選擇一個模板並獲取它的 XML 內容 var tileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileWideText03);

有關完整的模板列表，請參閱 TileTemplateType。

通過文檔對象模型 (DOM) 方法提供模板內容 此示例使用 TileWideText03 模板，該模板包含一個可包含三行自動換行的文本字元串，如下所示：

var tileAttributes = tileXml.getElementsByTagName("text"); tileAttributes[0].appendChild(tileXml.createTextNode("Hello World! My very own tile notification"));

基於已經指定的 XML 內容創建通知

var tileNotification = new Notifications.TileNotification(tileXml);

為通知設定到期時間 該通知將在十分鐘內到期並從磁貼中刪除。

var currentTime = new Date(); tileNotification.expirationTime = new Date(currentTime.getTime() + 600 * 1000);

向套用磁貼傳送通知。

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

指定磁貼

貼

先決條件

了解磁貼和通知術語及概念。有關詳細信息，請參閱磁貼、鎖屏提醒以及通知。

使用 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[0].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[0].setAttribute("src", "ms-resource:images/redWide.png");

步驟 2: 定義正方形磁貼 此示例重複執行僅圖像正方形磁貼的前面步驟。

var squareTileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileSquareImage); var squareTileImageAttributes = squareTileXml.getElementsByTagName("image"); squareTileImageAttributes[0].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 元素，結果如下所示：

<tile> <visual lang="en-US> <bindingtemplate="TileSquareImage"><imageid="1"src="ms-appx:///images/graySquare.png"/></binding><bindingtemplate="TileWideImageAndText01"><imageid="1"src="ms-appx:///images/redWide.png"/><textid="1">This tile notification uses ms-resource images</text></binding></visual></tile>

通知方法

說明

步驟 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);

清除方法

說明

步驟 1: 清除通知並還原為默認磁貼。 此行代碼從套用的磁貼中清除當前通知。

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().clear();

備註

對於啟用通知佇列且在佇列中有通知的磁貼，調用 clear 方法清空佇列。

請注意，不能通過雲清除通知。儘管本地調用 clear 方法都會清除磁貼而不要加快通知的來源，但是，為了通過定期或推送通知清除磁貼中的通知，你應該傳送一個新通知以替換當前內容。