快速入門：在程式碼中使用 NotificationsExtensions 程式庫 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

注意不是使用 JavaScript？請參閱快速入門：在程式碼中使用 NotificationsExtensions 程式庫 (XAML)。

您可以使用 NotificationsExtensions 物件模型程式庫提供磚、徽章以及快顯通知 XML 範本內容，而不需使用 XML 文件物件模型 (DOM)。這樣您就能夠以更簡單、更清晰且更直接的方式提供通知內容。在 Microsoft Visual Studio 使用這個程式庫會得到下列好處：

IntelliSense 會將可用的標籤與屬性列為物件屬性，不需要查閱元素與結構的結構描述文件。
可用來建立基本架構通知並讓您在稍後填入內容的 Factory 函式。
以簡單的方法將多種磚大小同時加入通知承載 (最佳做法)。
尋找和填入文字與影像屬性的好用方法，為您提供這些屬性的更多資訊，例如範本的使用目的、大小或位置。

注意 NotificationsExtensions 程式庫受 Microsoft 有限公用授權 (MS-LPL) 條款所規範。您可以在 Windows 市集應用程式或 Web 服務中重複使用該程式庫，並視需要針對您的應用程式予以自訂。

先決條件

磚與通知詞彙及概念的實用知識。如需詳細資訊，請參閱磚、徽章及通知。
能夠使用 Windows 執行階段 API 透過 JavaScript 建立基本 Windows 市集應用程式的能力。如需詳細資訊，請參閱使用 JavaScript 建立您的第一個 Windows 市集應用程式。
如果您具備 XML 基礎知識，則您會更清楚地了解 NotificationsExtensions 程式庫將為您建立的內容。

指示

1. 取得 NotificationsExtensions 程式庫

有好幾個可下載的磚、快顯通知及通知範例都包含 NotificationsExtensions 程式庫，您可予以複製供您自己使用。我們會在這個程序中使用主要磚和徽章範例。

注意 NotificationsExtensions 是一個 C# 程式庫，不過它可以納入 JavaScript、C#、C++ 及 Microsoft Visual Basic 專案並搭配使用。

從 Windows 開發人員中心下載應用程式磚和徽章範例。
將 "App tiles and badges sample.zip" 檔案解壓縮到您選擇的資料夾。
移至先前範例解壓縮的目標資料夾。將 NotificationsExtensions 資料夾從範例複製到您自己的專案目錄，成為專案的 .sln 檔案的同層級資料夾。

2. 讓您的專案包含該程式庫

啟動 Visual Studio，並開啟您的專案。
在 [專案總管] 中，用滑鼠右鍵按一下樹狀目錄頂端的方案。
選取 [加入]，然後選取 [現有專案]****。
瀏覽到專案中的 NotificationsExtensions 資料夾，然後選取 NotificationsExtensions.csproj 檔案。
在方案內的每個專案中，用滑鼠右鍵按一下 [參考]，然後選取 [加入參考]****。
在 [參考管理員] 中，選取 [方案]**** 下的 NotificationsExtensions，然後按一下 [確定]。此時，NotificationsExtensions 已可供使用。

注意如果您不想將整個 NotificationsExtensions 專案納入您的方案，則可將 NotificationsExtensions 建置成獨立專案，然後在您的專案中僅包含 NotificationsExtensions.winmd 當成參考。

3. 讓您的應用程式伺服器包含該程式庫

如果使用 ASP.NET 將推播通知傳送到 Windows 推播通知服務 (WNS)，或是如果您實作 ASP.NET 服務來處理定期磚或徽章更新的要求，則您也可以在應用程式伺服器程式碼中使用 NotificationsExtensions。唯一的缺點是必須在 NotificationsExtensions 專案屬性中加入 WINRT_NOT_PRESENT 編譯建置符號。

移至先前範例解壓縮的目標目錄。開啟範例資料夾，然後將 NotificationsExtensions 資料夾複製到您選擇的新位置。
選取 NotificationsExtensions.csproj 檔案，在 Visual Studio 中開啟專案。
在 [專案] 功能表中，選擇 [NotificationsExtensions 屬性]****。
將 [輸出類型] 選項變更為「類別庫」以建置 DLL 檔案。
另外，在 NotificationsExtensions 屬性中，選取 [建置]**** 索引標籤。
在 [一般] 類別底下，於 [條件式編譯的符號]**** 方塊中加入 "WINRT_NOT_PRESENT"。如果這個方塊已經包含其他符號，請在 "WINRT_NOT_PRESENT" 前面加上分號做為分隔符號。
按 F7 或使用 [建置] > [建置方案] 來建置專案。
將已建置的 NotificationsExtensions.dll 檔案從資料夾 (在 \NotificationsExtensions\bin\Debug\ 下) 複製到您的應用程式伺服器程式碼。

4. 在您的程式碼中使用該程式庫

現在您可以在程式碼中，將 NotificationsExtensions 當成物件使用。它包含三個值得注意的成員：

BadgeContent
TileContent
ToastContent

每個內容類型又會包含代表每個類型元素與屬性的成員。

下列範例使用 NotificationsExtensions 將值指派給數字徽章，然後再將它傳送給磚。


var badgeContent = NotificationsExtensions.BadgeContent.BadgeNumericNotificationContent(85);
var badgeNotification = badgeContent.createNotification();

Windows.UI.Notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

為了進行比較，下列範例顯示直接使用 XML DOM (不含 NotificationsExtensions) 的同一個程序。


var notifications = Windows.UI.Notifications;                        
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(notifications.BadgeTemplateType.badgeNumber);
var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "85");
var badgeNotification = new notifications.BadgeNotification(badgeXml);

BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

下一個範例使用 NotificationsExtensions 提供磚通知中的文字。第一個步驟使用 NotificationsExtensions TileContentFactory 函式，根據特定範本建立物件。每個範本都有不同的 create 函式；只要將 "create" 字詞附加到範本名稱即可，例如 "createTileWide310x150ImageAndText01"。

然後範本型物件就會提供 IntelliSense，以顯示該範本中根據其功能而命名之屬性的可用元素，例如 textHeading、textBodyWrap、textBody1 或 textColumn1Row4。這樣您就能夠明確得知您正在指派哪一個元素。

將值指派給屬性之後，就可以透過正常方式傳送磚通知。


var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Text01();

tileContent.textHeading.text = "Hello!";
tileContent.textBody1.text = "One";
tileContent.textBody2.text = "Two";
tileContent.textBody3.text = "Three";

var tileNotification = tileContent.createNotification();

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

這個範例使用 NotificationsExtentions 將文字和影像指派給通知。影像元素和文字一樣，其屬性是根據它們在範本中的功能來命名，例如 imageMain 和 imageSmallColumn2Row2。


var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150ImageAndText01();

tileContent.textCaptionWrap.text = "This tile notification uses ms-appx images";

tileContent.image.src = "ms-appx:///images/redWide.png";
tileContent.image.alt = "A red rectangle";

這個範例使用 NotificationsExtensions 定義完整的磚通知。這說明此程式庫的特性之一 — 將範本大小新增到承載時的順序有其重要性。

小型範本 (正方形 71x71 — 僅限 Windows Phone 8.1) 只能新增到中型範本。
中型範本 (正方形 150x150) 只能新增到寬形範本。
寬形範本只能新增到大型 (正方形 310x310 — 僅限 Windows) 範本。

如果您嘗試使用不同順序，會發現無法使用必要的屬性。


var tileLargeContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare310x310Text09();
tileLargeContent.textHeadingWrap.text = "Lorem ipsum dolor sit amet, consectetur";
tileLargeContent.textHeading1.text = "Lorem ipsumo";
tileLargeContent.textHeading2.text = "Lorem ipsumo";
tileLargeContent.textBody1.text = "VivAmus tincidunt convallis urn";
tileLargeContent.textBody2.text = "VivAmus tincidunt convallis urn";

var tileWideContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150Text04();
tileWideContent.textBodyWrap.text = "Lorem ipsum dolor sit amet, consectetur";

var tileMediumContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Block();
tileMediumContent.textBlock.text = "24";
tileMediumContent.textSubBlock.text = "Aliquam";
        
tileWideContent.square150x150Content = tileMediumContent;
tileLargeContent.wide310x150Content = tileWideContent;

var tileNotification = tileLargeContent.createNotification();

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

這個範例使用 NotificationsExtensions 提供快顯通知的內容，包括文字、影像、音訊、持續時間及啟動參數。


var toastContent = NotificationsExtensions.ToastContent.ToastContentFactory.createToastImageAndText01();

toastContent.textBodyWrap.text = "Lorem ipsum dolor sit amet";

toastContent.image.src = "ms-appx:///images/redWide.png";
toastContent.image.alt = "A red rectangle";

toastContent.audio.content = NotificationsExtensions.ToastContent.ToastAudioContent.loopingAlarm;
toastContent.audio.loop = true;

toastContent.duration = NotificationsExtensions.ToastContent.ToastDuration.long;

toastContent.launch = '{"type":"toast","param1":"12345","param2":"67890"}';

var toast = toastContent.createNotification();
Windows.UI.Notifications.ToastNotificationManager.createToastNotifier().show(toast);

摘要

這個主題已經示範如何使用 NotificationsExtensions 簡化徽章、磚以及快顯通知的建立程序。這是填入範本最直接的方法，比直接使用 XML DOM 更方便。