快速構建Windows 8風格應用31-構建磁貼

引言

磁貼是吸引用戶經常使用應用重要手段之一。我們可將應用程序內較好的內容使用磁貼進行展示。

另外應用程序磁貼是應用程序中的核心部分，而且很可能也是用戶最常見到的部分，因此利用動態磁貼來吸引用戶經常使用我們的應用程序！

本篇博文主要介紹如何創建基本磁貼（也就是默認磁貼）以及如何使用本地通知更新磁貼。

一、創建基本磁貼

基本磁貼也可以叫做默認磁貼。通常我們點擊基本磁貼來啟動或者切換應用。

我們可以在應用程序清單文件中設置默認的靜態磁貼，並且該靜態磁貼分為兩種大小：

注意：這兩種大小的磁貼都可以被動態更新。那么我們怎么創建應用中的基本磁貼呢？

1.創建Windows 8 商店應用程序；

2.打開應用清單文件（package.appxmanifest），選擇“應用程序 UI”窗口；

3.

• 使用自己的徽標圖像路徑取代默認的圖像；
• 設置磁貼上顯示應用的短名稱。注意：該名稱不能超過 13 個字符。如果名稱太長，將會被截斷。當然我們可以選擇顯示徽標，顯示名稱或兩者都不顯示；
• 選擇名稱的文本是使用淺色字體還是深色字體（基於背景色）；
• 也可設置背景色，該背景色用於對應用的其他部分進行着色，例如：任意應用中對話框的按鈕顏色，以及 Windows 應用商店中的“應用詳情”頁等；

到此為止，我們設置的基本磁貼已經完成，當然我們也可以設置寬徽標、小徽標、應用商店徽標等徽標。

二、本地通知更新磁貼

其實更新磁貼的方式總共有四種（可參考選擇通知傳遞方式），應用程序可使用本地通知來更新其磁貼，這對於正在運行的應用程序且信息發生變更的情形十分有效。

應用程序可在精確的時間點安排磁貼和 Toast 更新。另外應用程序可在未運行時通過雲端進行更新磁貼。

那么我們使用本地通知更新磁貼呢？

1.添加命名空間

using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;

其中Windows.UI.Notifications 包含磁貼 API。

2.選取模版並查看XML內容

我們可以使用系統提供的模版TileTemplateType，選擇一個適合應用程序的模版。這里以TileWideImageAndText01 模板為例，該模版中需要一個圖像和一個文本字符串。

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);

其中GetTemplateContent 方法檢索一個 XmlDocument，該XML框架如下：

<tile>
    <visual>
        <binding template="TileWideImageAndText01">
            <image id="1" src=""/>
            <text id="1"></text>
        </binding>
    </visual>
</tile>

3.提供相關文本內容

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
 tileTextAttributes[0].InnerText = "你好！測試磁貼更新~";

我們首先需要檢索模板中標記名稱為“text”的所有元素。TileWideImageAndText01 模板僅包含單個文本字符串，代碼接着將分配該字符串。

注意：字符串中最多可以在兩行內自動換行，因此應該相應地設置字符串的長度以避免截斷。

4.提供圖像

我們首先需要檢索模板中標記名稱為“image”的所有元素。TileWideImageAndText01 模板中包含單個圖像。

注意：並非所有磁貼模板都包含圖像，某些磁貼模板是僅文本的。

XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");

這里我們可以從應用的程序包中本地圖像、應用的本地存儲或者Web中獲取圖像。

注意：在包含多個圖像的磁貼通知中，圖像可以使用這些圖像的任意組合，同時模版中圖片大小必須小於200KB,像素小於1024*768。（可參考：磁貼和 Toast 圖像大小）

• 使用應用程序包中本地圖像：

((XmlElement)tileImageAttributes[0]).SetAttribute("src", "ms-appx:///Assets/WideLogo.png");
((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "red graphic");

• 使用應用的本地存儲圖像：

((XmlElement)tileImageAttributes[0]).SetAttribute("src", "ms-appdata:///local/redWide.png");
((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "red graphic");

• 使用Web中圖像：

((XmlElement)tileImageAttributes[0]).SetAttribute("src", "http://www.contoso.com/redWide.png");
((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "red graphic");

5.包含一個方形和寬版通知

首先我們在發送通知時，是無法知道當前應用程序的磁貼的狀態是方形還是寬版。因此我們在更新通知時同時包括方形和寬版是最佳做法。

使用在寬版通知中使用的文本字符串定義了一個僅文本方形通知：

XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04);
XmlNodeList squareTileTextAttributes = squareTileXml.GetElementsByTagName("text");
squareTileTextAttributes[0].AppendChild(squareTileXml.CreateTextNode("Hello World! My very own tile notification"));

然后我們向寬版磁貼的負載添加方形磁貼。檢索在方形 TileXml 負載中定義方形磁貼的 binding 元素。作為寬版磁貼的同級附加該 binding 元素。

IXmlNode node = tileXml.ImportNode(squareTileXml.GetElementsByTagName("binding").Item(0), true);
tileXml.GetElementsByTagName("visual").Item(0).AppendChild(node);

6.創建通知

TileNotification tileNotification = new TileNotification(tileXml);

7.設置通知到期日期

默認情況下，本地磁貼和鎖屏提醒不會過期，但是推送通知、定期通知、激活通知會在三天之后過期。通常我們會設置一個合理的過期時間。

注意：磁貼內容的保留時間應不長於內容具有相關性的時間。

tileNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10);

8.發送通知

TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

9.清除磁貼通知

如果我們設置了通知過期時間，就不需要顯示調用清除通知的方法。

Windows.UI.Notifications.TileUpdateManager.CreateTileUpdaterForApplication().Clear();

注意：我們不能通過雲清除通知。

雖然在本地調用 Clear 方法會清除磁貼而不考慮其通知的來源，但是定期通知或推送通知只能將磁貼更新為新內容。

最后實現效果：

• 方形通知：

• 寬版通知：

 

更多關於磁貼介紹可參考：

1. 打造卓越的磁貼體驗（第 1 部分）；
2. 打造卓越的磁貼體驗（第 2 部分）；
3. App tiles and badges sample；