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

標籤：style   blog   http   color   io   os   使用   ar   strong   

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

引言

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

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

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

一、建立基本磁貼

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

我們可以在應用程式資訊清單檔案中設定預設的靜態磁貼，並且該靜態磁貼分為兩種大小：

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

1.建立Windows 8 商店應用程式；

2.開啟應用資訊清單檔（package.appxmanifest），選擇“應用程式 UI”視窗；

3.

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

到此為止，我們設定的基本磁貼已經完成，當然我們也可以設定寬徽標、小徽標、市集徽標等徽標。

二、本地通知更新磁貼

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

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

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

1.添加命名空間

   1:  using Windows.UI.Notifications;

   2:  using Windows.Data.Xml.Dom;

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

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

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

   1:  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.提供相關常值內容

   1:  XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");

   2:   tileTextAttributes[0].InnerText = "你好！測試磁貼更新~";

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

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

4.提供映像

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

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

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

這裡我們可以從應用的程式包中本地映像、應用的本機存放區或者Web中擷取映像。

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

• 使用應用程式套件組合中本地映像：

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

   2:   ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "red graphic");

• 使用應用的本機存放區映像：

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

   2:  ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "red graphic");

• 使用Web中映像：

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

   2:  ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "red graphic");

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

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

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

   1:  XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04);

   2:  XmlNodeList squareTileTextAttributes = squareTileXml.GetElementsByTagName("text");

   3:  squareTileTextAttributes[0].AppendChild(squareTileXml.CreateTextNode("Hello World! My very own tile notification"));

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

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

   2:  tileXml.GetElementsByTagName("visual").Item(0).AppendChild(node);

6.建立通知

   1:  TileNotification tileNotification = new TileNotification(tileXml);

7.設定通知到期日

預設情況下，本地磁貼和徽章不會到期，但是推播通知、定期通知、啟用通知會在三天之後到期。通常我們會設定一個合理的到期時間。

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

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

8.發送通知

   1:  TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

9.清除磁貼通知

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

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

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

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

最後實現效果：

• 方形通知：

• 寬版通知：

 

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

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

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