Windows 8 主要磁貼與本地通知更新：從靜態 Logo 到動態資訊磁貼的完整實作

前言：磁貼是應用的臉面，動態磁貼是留存的引擎

開始畫面的磁貼是使用者感知應用狀態的第一界面。**靜態磁貼**僅顯示 Logo 與名稱；**動態磁貼**透過本地/排程/推播通知，週期性更新文字、圖片、數字，讓使用者不進入應用即可獲取關鍵資訊 (新訊息數、頭條新聞、股價、天氣、行程提醒)。本文詳細實作靜態磁貼設定與本地通知動態更新全流程。

一、建立靜態主要磁貼 (Package.appxmanifest)

雙擊 `Package.appxmanifest` → `應用程式 UI` 索引標籤：

• Logo (150×150)：中型磁貼圖示 (必要)。
• Small Logo (30×30)：應用清單、搜尋、分享、鎖屏顯示 (必要)。
• Wide Logo (310×150)：寬幅磁貼圖示 (必要，若欲支援寬幅動態更新)。
• Store Logo (50×50)：商店列表顯示 (必要)。
• 顯示名稱：磁貼下方文字 (≤13 字元，超長截斷)。
• 短名稱：寬幅磁貼/應用列表顯示 (≤13 字元)。
• 前景文字：`淺色` / `深色` (依 Logo 背景亮度決定)。
• 背景色：磁貼背景、AppBar、對話框按鈕、商店詳情頁強調色 (十六進位 #RRGGBB)。

二、本地通知更新磁貼：核心 API 流程

命名空間：`Windows.UI.Notifications`, `Windows.Data.Xml.Dom`

步驟 1：選擇模板並取得 XML

// 範例：寬幅磁貼 - 一張圖片 + 一行文字
XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);
// 同時建立方塊磁貼 XML (最佳實踐：雙版本並發)
XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04);

模板 XML 結構：

<tile>
  <visual>
    <binding template="TileWideImageAndText01">
      <image id="1" src=""/>
      <text id="1"></text>
    </binding>
    <!-- 方塊磁貼 binding 將在此附加 -->
  </visual>
</tile>

步驟 2：填充文字內容

// 寬幅文字
XmlNodeList wideText = tileXml.GetElementsByTagName("text");
wideText[0].InnerText = "即時新聞：Windows 8.1 正式釋出！";

// 方塊文字 (使用寬幅同樣文字或精簡版)
XmlNodeList squareText = squareTileXml.GetElementsByTagName("text");
squareText[0].AppendChild(squareTileXml.CreateTextTextNode("Windows 8.1 釋出！"));
// 注意：方塊模板 TileSquareText04 有 4 行文字，可填入多行

步驟 3：設定圖片來源 (三種來源，同 Toast)

XmlNodeList wideImages = tileXml.GetElementsByTagName("image");
var imgElem = (XmlElement)wideImages[0];

// 1. 應用封裝資源 (最快、離線)
imgElem.SetAttribute("src", "ms-appx:///Assets/WideLogo.png");
imgElem.SetAttribute("alt", "新聞配圖");

// 2. 本地儲存 (動態產生/下載)
// imgElem.SetAttribute("src", "ms-appdata:///local/TileImages/news_wide.png");

// 3. 網路圖片 (需 ≤200KB, ≤1024×768)
// imgElem.SetAttribute("src", "https://cdn.example.com/tile_news.jpg");

步驟 4：合併方塊與寬幅 Binding (關鍵：雙版本並發)

使用者隨時可能將磁貼切換為方塊或寬幅，**必須在同一 XML 中包含兩種 binding**，系統會自動根據當前磁貼尺寸選擇渲染。

// 取得方塊 XML 中的  節點
IXmlNode squareBinding = squareTileXml.GetElementsByTagName("binding").Item(0);
// 匯入至寬幅 XML 的  節點下 (作為同級)
IXmlNode importedNode = tileXml.ImportNode(squareBinding, true);
tileXml.GetElementsByTagName("visual").Item(0).AppendChild(importedNode);

// 合併後 XML 結構：
// 
//   ...
//   ...
// 

步驟 5：建立通知、設定過期時間、發送

TileNotification notification = new TileNotification(tileXml);

// 設定過期時間 (避免過期內容誤導使用者)
// 本地通知預設永不過期，建議根據內容時效性設定 (如新聞 30 分鐘、天氣 2 小時)
notification.ExpirationTime = DateTimeOffset.UtcNow.AddMinutes(30);

// 發送
TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);

步驟 6：清除通知 (恢復靜態磁貼)

// 單獨清除 (若有多個通知佇列啟用)
// TileUpdateManager.CreateTileUpdaterForApplication().Remove(notification);

// 全部清除 (恢復 Package.appxmanifest 靜態磁貼)
TileUpdateManager.CreateTileUpdaterForApplication().Clear();

三、執行效果展示

方塊磁貼 (150×150)：

寬幅磁貼 (310×150)：

四、進階主題與最佳實踐

1. 通知佇列 : 最多 5 條輪播

// 啟用佇列 (預設關閉，僅顯示最新一條)
TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);
// 連續發送 5 條 Update()，系統自動輪播 (約 7 秒/條)

適用場景：新聞頭條輪播、股票漲跌前 5 名、行程提醒多筆。

2. 週期性通知 : 雲端內容定時拉取

// 設定雲端 XML 端點，系統每 30 分鐘/1 小時/6 小時/12 小時/1 天自動下載更新
PeriodicUpdateRecurrence recurrence = PeriodicUpdateRecurrence.HalfHour;
Uri pollUri = new Uri("https://api.example.com/tile.xml"); // 回傳合法 Tile XML
TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdate(pollUri, recurrence);

優點：應用不在前景也能更新、節省推播成本。缺點：最小間隔 30 分鐘、無法即時觸發。

3. 推播通知 : 即時伺服器主動推送

WNS (Windows Push Notification Services) → 雲端服務 → `TileUpdater.PushNotificationReceived`。即時性最強、成本最高 (需雲端後端)。

4. 圖片大小鐵律

• ≤ 200 KB、≤ 1024×768 像素** (寬幅) / **≤ 1024×1024** (方塊/小徽標)。
• 超限 → 通知**靜默失敗** (不顯示、無錯誤事件)。**務必預先壓縮、驗證尺寸**。