什麼叫磁貼？
美國 微軟公司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 元素，結果如下所示：
