[Windows通用應用開發]Toast通知(一)——Toast實現

本系列文章：
[Windows通用應用開發]Toast通知(一)——Toast實現
[Windows通用應用開發]Toast通知(二)——Toast音效
[Windows通用應用開發]Toast通知(三)——定時Toast

---

Toast通知實現

Toast通知是指在屏幕上方彈出的交互式信息。

下面介紹在Windows和Windows Phone應用商店應用開發中，Toast通知的實現步驟：

清單設置

將package.appxmanifest的第一頁中支持Toast通知一項選定爲是

Toast模板

Toast模板有四種，可參考Microsoft提供的幫助文檔，但在Windows Phone 8.1中無論使用哪一種，目前只會顯示爲第二種模板（純文本），Windows 10 for Phone支持顯示所有模板。

開發流程

後續將以第二種模板，在Windows Phone中實現進行說明。對於Windows應用商店應用，實現方法相同，結果相同，可採用更多模板。

• 選擇模板
  此處選擇了第二種模板，在Windows Phone 8.1中，它會呈現爲 ToastText02 的已修改版本：沒有圖像，帶有兩個文本字符串以及應用的清單中提供的“方形 150x150”徽標。

var type = ToastTemplateType.ToastText02;
var content = ToastNotificationManager.GetTemplateContent(type);

• 添加文本
  第二種模板的XML示例如下：

<toast>
    <visual>
        <binding template="ToastText02">
            <text id="1">headlineText</text>
            <text id="2">bodyText</text>
        </binding>  
    </visual>
</toast>

將xml的內容填充到content中(C#)：

XmlNodeList toastxml = content.GetElementsByTagName("text");
toastxml[0].AppendChild(content.CreateTextNode("標題"));
toastxml[1].AppendChild(content.CreateTextNode("Hello World!"));

• 顯示Toast

ToastNotification toast = new ToastNotification(content);
ToastNotificationManager.CreateToastNotifier().Show(toast);

• 運行截圖（wp10，純文本模板2）

  在通知中心中也可以找到

使用帶圖片的模板

在目前的預覽版WP10以及Windows應用商店應用中，可以完整使用上述所有模板（所有模板中的所有圖像都要求大小小於 200 KB，小於 1024 x 1024 像素）。
帶圖片的模板2的XML示例如下：

<toast>
    <visual>
        <binding template="ToastImageAndText02">
            <image id="1" src="image1" alt="image1"/>
            <text id="1">headlineText</text>
            <text id="2">bodyText</text>
        </binding>  
    </visual>
</toast>

相比於前文所述的純文字模板2，多了一個image標籤，需要添加如下代碼(C#)：

XmlNodeList image = content.GetElementsByTagName("image");
((XmlElement)image[0]).SetAttribute("src", "ms-appx:///Assets/lena.png");
((XmlElement)image[0]).SetAttribute("alt", "red graphic");

其中資源路徑表示方法爲：

http:// 或 https://
基於 Web 的圖像。
ms-appx:///
應用包中包含的圖像。
ms-appdata:///local/
保存到本地存儲中的圖像。
file:///
本地圖像。（僅支持桌面應用。）

• 運行截圖（wp10，帶圖片的模板4）
  
  調試使用預覽版WP10系統，圖像顯示有bug（中間的叉是默認應用圖標）。文字第三行默認處於隱藏狀態，需要下拉纔可以顯示。

• 運行截圖（win10，帶圖片的模板4）
  

---

所有代碼均通過Windows 10 Mobile和Windows 10真機調試