十四、磁贴和通知
众所周知，在 Windows 8 中，微软引入了一种使用磁贴启动应用的新方式，磁贴是用户体验中标志性的一部分。对于 Windows 10，还有一些令人兴奋和与众不同的附加功能。本章概述了 Windows 10 中可用的磁贴和通知。您将探索如何创建不同类型的磁贴和通知。
14.1 创建默认图块
问题
您需要在应用中添加一个默认图块。
解决办法
使用package.appxmanifest为 UWP 应用平铺和显示提供信息。
它是如何工作的
在 Visual Studio 2015 中创建新的通用 Windows 应用项目。打开项目的package.appxmanifest。这将打开清单编辑器窗口，如图 14-1 所示。
图 14-1。
Application package.appmanifest
如果未选择应用选项卡，请选择它。如果需要，更改显示名称的值。显示名称是应用列表中列出的已安装/可用的应用名称，并显示在应用的标题中。
在应用清单中，单击“视觉资源”选项卡。在“磁贴和徽标”部分，更改为徽标提供的图像，并选择 Windows 清单中的徽标。更改或输入应用的新简称，该简称应为 13 个字符。否则，它将被截断。选择显示简短 mime 的适当平铺尺寸。您可以以 W3DC 格式输入您喜欢的背景颜色(例如#FFFFFF)或使用默认的背景颜色。
编译项目并运行应用，以测试应用创建的图块标题和图像徽标。
14.2 创建自适应图块
自适应磁贴是 Windows 10 的新增功能。对于自适应磁贴，有新的轻量级 XML 模板，允许开发人员根据自己的要求设计磁贴通知内容，以支持不同的设备和显示器。
问题
您希望为您的 UWP 应用创建自适应切片。
解决办法
与标准单幅图块一样，使用自适应单幅图块模板提供单幅图块的内容。对于创建自适应单幅图块，有自适应单幅图块模板，可用于创建不同类型的单幅图块。
通知可视化工具( https://www.microsoft.com/store/apps/9nblggh5xsl1 )帮助开发人员设计自适应图块。它提供即时的视觉预览。这有助于您快速设计自适应图块并进行测试。它提供了一种简单的方法来配置 tile 属性，如文本、字体、显示颜色、显示名称、背景图像、徽章值等等。
自适应模板适用于不同类型的通知和不同的外形规格。自适应磁贴外观取决于安装应用的设备和通知类型(磁贴或 toast)。
自适应平铺 XML 模式语法如下:
<tile>
<visual>
<binding template="TileMedium">
...
</binding>
<binding template="TileWide">
...
</binding>
<binding template="TileLarge">
...
</binding>
</visual>
</tile>
在binding元素中是 key，在这里指定了每个图块大小的内容。在一个 XML 负载中，可以指定多个绑定。以下是可在binding的template参数中指定的不同类型的图块尺寸:
TileSmallTileMediumTileWideTileLarge(仅桌面)
它是如何工作的
自适应图块模板基于 XML。让我们使用通知可视化工具为自适应图块生成 XML。
在 Visual Studio 2015 中创建新的通用 Windows 应用项目。这将创建一个新的 Windows 应用项目。从 Visual Studio 解决方案资源管理器的项目中打开 default.html 页。在default.html的 body 标签中添加以下 HTML 标记。
<input type="button" value="Update Adaptive Tile" id="btnUpdateAdaptiveTile" />
这个 HTML 在default.html页面上添加了一个简单的 HTML 按钮，带有文本“Update Adaptive Tile”。
现在，右键单击解决方案资源管理器中的项目，并选择添加➤新 JavaScript 文件。为文件提供一个名称:LoadTileandNotifications.js。添加以下代码:
function GetControl() {
WinJS.UI.processAll().done(function () {
var adaptiveTilebutton = document.getElementById("btnUpdateAdaptiveTile");
adaptiveTilebutton.addEventListener("click", AddAdaptiveTiles, false);
}
document.addEventListener("DOMContentLoaded", GetControl);
在前面的代码中，您为btnUpdateAdaptiveTile HTML 按钮添加了一个事件处理程序AddAdaptiveTiles()。然后在加载default.html时添加了getControl方法。
重新打开default.html并添加对LoadTileandNotifications.js文件的引用。
<script src="/js/LoadTileandNotifications.js"></script>
现在，让我们使用下面的代码片段在LoadTileandNotifications.js文件中添加一个AddAdaptiveTiles()事件处理程序方法。
function AddAdaptiveTiles() {
var adaptivetileXml = "<tile><visual displayName=\"UWP recipes\" branding=\"name\">"
+ "<binding template=\"TileSmall\"><group><subgroup><text hint-style=\"subtitle\"> Windows 10 Apps receipes </text><text hint-style=\"subtitle\">Adaptive Tiles</text></subgroup></group></binding>"
+ "<binding template=\"TileMedium\"><group><subgroup><text hint-style=\"subtitle\"> Windows 10 Apps receipes </text><text hint-style=\"subtitle\">Adaptive Tiles</text></subgroup></group></binding>"
+ "<binding template=\"TileLarge\"><group><subgroup><text hint-style=\"subtitle\"> Windows 10 Apps receipes </text><text hint-style=\"subtitle\">Adaptive Tiles</text></subgroup></group></binding>"
+ "<binding template=\"TileWide\"><group><subgroup><text hint-style=\"subtitle\"> Windows 10 Apps recipes </text><text hint-style=\"subtitle\">Adaptive Tiles</text></subgroup></group></binding>"
+ "</visual></tile>";
var adaptivetileDom = Windows.Data.Xml.Dom.XmlDocument();
adaptivetileDom.loadXml(adaptivetileXml);
var notifications = Windows.UI.Notifications;
var tileNotification = new notifications.TileNotification(adaptivetileDom);
notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
}
在这个事件监听器函数中，您创建了一个 XmlDocument 对象adaptivetileDom，它用于加载adaptivetileXml. adaptiveXml包含adaptiveTile的 XML 有效负载，该负载包含以下自适应图块绑定:
TileSmallTileMediumTileLargeTileWide
在前面的代码中，使用了Windows.UI.Notifications名称空间。
在adaptivetileXml中，所有瓷砖都有以下显示名称:UWP 食谱。下一个参数是 branding，设置为Name。这将在图块底部显示名称值。
<group>和<subgroup>元素用于对显示在标题上的内容进行语义分组。在这种情况下，首先显示“Windows 10 Apps recipes”，然后在下一行显示“Recipes on Tiles”。两个文本元素被组合在一起。
在TileLarge绑定中，我们也在 tile 中显示图像和文本内容。该图像与文本一起显示，但是您也可以将其设置为磁贴的背景。
hint-width属性用于指定当图块中存在多列时的列宽。
创建 XMLDocument 后，创建一个类型为Windows.UI.Notifications.TileNotification()的tileNotification对象，并将adaptivetileXml XmlDocument 对象作为参数传递给TileNotification类。TileNotification对象用于定义图块和与图块相关的可视元素。
在此之后，使用TileUpdateManager类将通知发送到应用的图块，这将通过使用createTileUpdaterForApplication().update()方法更改更新程序绑定到的指定图块的内容。
在 Windows 10 设备上运行应用时，点击更新自适应磁贴按钮，动态更新磁贴，如图 14-2 所示。
图 14-2。
Windows 10 adaptive tile update using Windows.UI.Notifications.TileNotification()
14.3 创建包含可视内容的祝酒通知
问题
您希望创建一个交互式 toast 通知，与图像一起显示，以覆盖 toast 中的应用徽标和内嵌图像缩略图。
解决办法
Windows 10 UWP 提供了 toast 通知，它是使用类似于自适应磁贴的 XML 模板开发的。Toast 通知 XML 主要包含三个关键元素:视觉、动作和音频。ToastNotificationManager用于发送 toast 通知。使用ToastNotificationManager向应用发送新通知。
它是如何工作的
在上一节中，您使用 XML 模式创建了一个自适应图块。以类似的方式，您将创建一个交互式 toast 通知，通知用户在出版社目录中添加了一本新书。
使用相同的项目。在default.html的<body>标签中添加以下 HTML 标记。
<input type="button" value="Display Toast" id="btnDisplayToast" />
<br />
这在default.html页面上创建了一个简单的显示 Toast HTML 按钮。
打开 LoadTileandNotifications.js，在现有的GetControl()方法中添加以下代码:
var toastNotificationbutton = document.getElementById("btnDisplayToast");
toastNotificationbutton.addEventListener("click", DisplayToastNotification, false);
在前面的代码中，您基本上获得了对btnDisplayToast按钮的引用，并将 click 事件处理程序与AddToastNotification()方法相关联。
使用以下代码片段添加一个新的AddToastNotification事件方法:
function AddToastNotification()
{
var toastXML = "<toast><visual>"
+ "<binding template=\"ToastGeneric\"><text>Apress Catalog</text><text>Apress is working on new Windows 10 Receipes guide</text>"
+ "<image placement=\"appLogoOverride\" src=\"/img/Alarm.png\" /><image placement=\"inline\" src=\"/img/Pattern-Blue-Dots-background.jpg\" /></binding>"
+ " </visual>"
+ "</toast>";
var toastNotificationDom = Windows.Data.Xml.Dom.XmlDocument();
toastNotificationDom.loadXml(toastXML);
var notifications = Windows.UI.Notifications;
// Get the toast notification manager for the current app.
var notificationManager = notifications.ToastNotificationManager;
// Create a toast notification from the XML, then create a ToastNotifier object
// to send the toast.
var toast = new notifications.ToastNotification(toastNotificationDom);
notificationManager.createToastNotifier().show(toast);
}
在前面的事件侦听器方法中，adaptivetileXml变量包含 toast 通知的 XML 有效负载，这类似于“自适应图块”，但是在<binding>元素中，模板值被设置为ToastGeneric。
然后创建一个类型为ToastNotification的新的toast对象，并指定toastNotificationDom XmlDocument。之后，使用ToastNotificationManager类向应用的磁贴发送通知，该类发送指定 toast 的内容。
在默认页面的仿真程序中运行应用。点击显示 Toast 按钮测试输出，如图 14-3 所示。
图 14-3。
Toast notification from UWP app
您可以创建与您的应用关联的 toast 通知，并在应用运行时动态通知用户。在下一个菜谱中，您将学习如何向 toast 通知添加操作。
14.4 创建带有操作的 Toast 通知
问题
您希望创建一个交互式 toast 通知，为用户显示可能的操作。
解决办法
将<Actions>元素添加到 toast 通知 XML。
它是如何工作的
在前面的配方中，您使用 XML 模式创建了一个自适应 toast 通知。以类似的方式，您将创建一个带有操作的交互式 toast 通知，该通知将向用户通知添加到出版社目录中的新书，并允许用户采取操作。
让我们使用与上一个配方相同的项目。打开 LoadTileandNotifications.js 文件。添加一个新方法，AddInteractiveToastNotification()。
function AddInteractiveToastNotification()
{
var toastXML = "<toast><visual>"
+ "<binding template=\"ToastGeneric\"><text>Apress Catalog</text><text>Apress is working on new Windows 10 Receipes guide</text>"
+ "<image placement=\"appLogoOverride\" src=\"/img/Alarm.png\" /><image placement=\"inline\" src=\"/img/Pattern-Blue-Dots-background.jpg\" /></binding>"
+ " </visual>"
+ "<actions><action content=\"check\" arguments=\"check\" imageUri=\"/img/storelogo.png\" /><action content=\"cancel\" arguments=\"cancel\" /></actions>"
+ " <audio src=\"ms-winsoundevent:Notification.Reminder\"/>"
+ "</toast>";
var toastNotificationDom = Windows.Data.Xml.Dom.XmlDocument();
toastNotificationDom.loadXml(toastXML);
var notifications = Windows.UI.Notifications;
// Get the toast notification manager for the current app.
var notificationManager = notifications.ToastNotificationManager;
// Create a toast notification from the XML, then create a ToastNotifier object
// to send the toast.
var toast = new notifications.ToastNotification(toastNotificationDom);
notificationManager.createToastNotifier().show(toast);
}
在AddInteractiveToastNotification()事件处理程序方法中，唯一的区别在于 XML 有效负载，您添加了额外的元素来允许用户采取行动。当 toast 通知发送到应用时，它还会播放通知声音。动作在<actions><action>元素下指定。
在default.html中，为新按钮添加以下行，以显示交互式通知事件:
<p>
<input type="button" value="Display interactive Toast" id="btnDisplayinteractiveToast" />
<br />
</p>
这段代码增加了一个新的按钮，显示交互式吐司。为了将AddInteractiveToastNotification()方法与btnDisplayinteractiveToast按钮相关联，让我们在现有的GetControl()方法中添加以下代码行。
var toastinteractiveNotificationbutton = document.getElementById("btnDisplayinteractiveToast");
toastinteractiveNotificationbutton.addEventListener("click", AddInteractiveToastNotification, false);
前面的代码与前面的配方相同，其中您将一个按钮单击事件处理程序与一个方法相关联。在这种情况下，您将带有btnDisplayinteractiveToast id 的按钮关联到AddInteractiveToastNotification()方法。
编译项目并在模拟器中运行。加载default.html页面后，按下显示互动吐司按钮。按钮点击通知以两种不同的可能动作显示给用户。还会播放通知声音，如图 14-4 所示。
图 14-4。
Interactive toast notification from app
在这个菜谱中，您学习了如何通过 toast 通知与用户进行交互。您还了解了如何让用户根据 toast 通知采取行动。
14.5 创建预定的磁贴和 Toast 通知
问题
您希望创建一个交互式 toast 通知，并向用户显示提醒。
解决办法
在 tile 和 toast 通知 XML 中添加一个<Actions>元素。
它是如何工作的
在前面的配方中，您使用 XML 模式创建了一个自适应 toast 通知。以类似的方式，让我们创建一个交互式的 toast 通知，通知用户在出版社目录中添加了一本新书，并允许用户采取行动。
让我们使用与上一个配方相同的项目。打开 LoadTileandNotifications.js 文件，添加下面的AddScheduledTileNotification()方法。
function AddScheduledTileNotification() {
var adaptivetileXml = "<tile><visual displayName=\"Future recipes\" branding=\"name\">"
+ "<binding template=\"TileSmall\"><group><subgroup><text hint-style=\"subtitle\"> Updated Tiles </text><text hint-style=\"subtitle\">Adaptive Tiles</text></subgroup></group></binding>"
+ "<binding template=\"TileMedium\"><group><subgroup><text hint-style=\"subtitle\"> Updated Tiles </text><text hint-style=\"subtitle\">Adaptive Tiles</text></subgroup></group></binding>"
+ "<binding template=\"TileLarge\"><group><subgroup><text hint-style=\"subtitle\"> Updated Tiles </text><text hint-style=\"subtitle\">Adaptive Tiles</text></subgroup></group></binding>"
+ "<binding template=\"TileWide\"><group><subgroup><text hint-style=\"subtitle\"> Updated Tiles </text><text hint-style=\"subtitle\">Adaptive Tiles</text></subgroup></group></binding>"
+ "</visual></tile>";
var adaptivetileDom = Windows.Data.Xml.Dom.XmlDocument();
adaptivetileDom.loadXml(adaptivetileXml);
var currentTime = new Date();
//notification should appear in 3 seconds
var startTime = new Date(currentTime.getTime() + 3 * 1000);
var scheduledTile = new Windows.UI.Notifications.ScheduledTileNotification(adaptivetileDom, startTime);
//Give the scheduled tile notification an ID
scheduledTile.id = "Future_Tile";
var tileUpdater = Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication();
tileUpdater.addToSchedule(scheduledTile);
}
在这个方法中，我们在局部变量adaptivetileXml中为图块设置新的 XML。然后我们创建了一个 XMLDocument 类型的本地对象adaptivetileDom，在其中我们加载了adaptiveXml文本。
要向 tile 发送计划更新，我们首先需要设置计划时间，为此我们创建一个startTime局部变量，并将值设置为当前时间和 3 秒。为了发送磁贴的预定更新，创建一个类型为Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication()的tileUpdater对象，然后调用addToSchedule方法在配置的时间发送更新。
若要执行上述方法，请添加一个 HTML 按钮并绑定一个事件处理程序来执行上述方法。打开 default.html 并添加以下 HTML 代码片段，以添加一个带有文本的 HTML 按钮，计划的自适应瓷砖。
<p>
<input type="button" value="Scheduled Adaptive Tile" id="btnScheduledAdaptiveTile" />
<br />
</p>
接下来，打开 LoadTileandNotifications.js，用下面几行代码更新现有的LoadTileandNotifications()方法:
var ScheduledAdaptiveTilebutton = document.getElementById("btnScheduledAdaptiveTile");
ScheduledAdaptiveTilebutton.addEventListener("click", AddScheduledTileNotification, false);
这为btnScheduledAdaptiveTile按钮添加了一个新的onclick事件处理程序，并关联了当点击预定的自适应平铺按钮时要执行的AddScheduledTileNotification方法。
要测试这一点，编译并运行应用。加载default.html页面后，点击预定自适应平铺按钮。这将在 3 秒钟内向图块发送通知。您可以通过检查图块标题和文本进行验证，这些标题和文本会在预定时间发生变化。
在本食谱中，您在预定时间向 UWP 应用磁贴发送了更新。当发送基于内容变化的动态更新时，如天气应用、电子邮件应用、旅行计划应用等，计划更新非常有用。
14.6 在单幅图块上创建或更新徽章
问题
您想要在牌上添加徽章。
解决办法
使用 tile XML 有效负载中的<badge>元素来显示徽章。使用BadgeNotification创建徽章。
它是如何工作的
在现有的项目中，我们将添加一个额外的方法UpdateTileBadge，来展示如何在图块上创建徽章更新。打开 LoadTileandNotifications.js 并添加以下方法:
function UpdateTileBadge()
{
AddAdaptiveTiles();
var badgeXml = "<badge value=\"alarm\"/>";
var badgeDom = Windows.Data.Xml.Dom.XmlDocument();
badgeDom.loadXml(badgeXml);
var notifications = Windows.UI.Notifications;
var badgeNotification = new notifications.BadgeNotification(badgeDom);
notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);
}
在这个方法中，我们调用AdaptiveTiles()方法来显示自适应图块。
然后我们添加badgeXML，它包含徽章的 XML 有效负载，以便在磁贴上显示警报。在badgeXml中，我们将徽章的值设置为“报警”。
然后我们创建一个类型为Windows.UI.Notifications.BadgeNotification的badgeNotifications对象，并传递徽章通知的 XML。
接下来，调用createBadgeUpdaterForApplication.update()方法来更新带有徽章通知的磁贴。
现在打开 default.html 并添加一个新按钮来测试用徽章更新磁贴的UpdateTileBadge()方法。
<p> <input type="button" value="Update Badge" id="btnUpdateBadge" />
<br />
</p>
接下来，打开 LoadTileandNotifications.js，用下面几行代码更新GetControl()方法:
var badgeUpdatebutton = document.getElementById("btnUpdateBadge");
badgeUpdatebutton.addEventListener("click", UpdateTileBadge, false);
这将添加一个新的 onclick 事件处理程序btnUpdateBadge按钮，并关联在单击 Update Badge 按钮时执行的UpdateTileBadge方法。
当您编译并运行该应用时，单击default.html页面上的更新徽章按钮。这将更新磁贴，应用磁贴将在右上角显示带有 Windows 报警图标的徽章，如图 14-5 所示。
图 14-5。
Badge notification on a Windows UWP adaptive tile
可以在 badge XML 中指定不同类型的窗口标志符号，例如警报、警告、可用、错误、暂停、新消息等。
Note
在 UWP 应用中，徽章显示在右下角。
在本章中，您了解了 UWP 应用磁贴和各种更新磁贴的方法，以及如何通过磁贴添加通知，如何动态更新自适应磁贴的内容。
版权属于：月萌API www.moonapi.com，转载请注明出处
