磁貼: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);