Windows 8 动手实验系列教程 实验7：磁贴和通知

动手实验

实验7：磁贴和通知

2012年9月

简介

磁贴是Windows应用商店应用用户体验的重要元素。当应用程序被安装后，它的磁贴将在Windows 8开始屏幕被创建。该磁贴(称为主磁贴)作为启动应用程序的快捷方式。默认情况下，主磁贴的图像来自Logo.png文件，它由Visual Studio包含在Window应用商店项目中。图像大小为150X150像素，并由它创建了一个正方形磁贴。然而，通过向项目添加一个310X150的图像并在应用程序清单中将它指定为“宽徽标”，您可以同时在应用程序中包含一个宽磁贴。如果应用程序支持宽磁贴，那么用户可以在开始屏幕上在正方形磁贴和宽磁贴之间进行切换。

Windows应用商店应用同时包含创建附加磁贴(称为辅助磁贴)的选项。辅助磁贴作为启动应用程序的快捷方式，同时为应用程序提供预定义的位置和状态。例如天气应用程序会允许用户为华盛顿州雷德蒙德和佐治亚州亚特兰大等地理位置创建辅助磁贴。用户然后可以通过简单地点击辅助磁贴启动应用程序并查看雷德蒙德或亚特兰大的天气。

您可以通过使用Windows运行时中的Windows.UI.StartScreen.SecondaryTile类创建辅助磁贴。磁贴创建通常由用户发起，例如在应用栏点击某个命令。具备创建辅助磁贴功能的应用程序提供了许多参数，包括磁贴背景图像的统一资源标识符 (URI)和一个包含激活参数的字符串。当应用程序从辅助磁贴启动时，操作系统将激活参数传递给应用程序。这些参数提供了应用程序的初始化信息。对于天气应用程序，激活参数也许仅仅是一个邮政编码。

磁贴被创建后，它不必保持静止状态。Windows应用商店应用享有许多通过更新和推送通知使磁贴内容动态和引人注目的方法。例如应用程序可以使用Windows.UI.Notifications.TileUpdater类更新磁贴的内容。这些更新可以可选地被排队。当启用队列后，操作系统每隔几秒钟轮换显示最近的五个更新，这使磁贴显得新鲜和生动。

当然应用程序需要在运行时刻才能使用TileUpdater类更新磁贴。但是磁贴甚至可以在应用程序未运行时被更新（通过Windows通知服务，WNS）。设想天气应用程序即使在未运行时也需要显示恶劣天气警报。通过Windows通知服务，天气应用程序的服务器可以发送推送通知来更新开始屏幕的磁贴。

推送通知并不局限于更新磁贴。它们也可以弹出包含用户消息的toast^注窗口（例如“在您的区域检测到恶劣天气”），并且在磁贴上显示锁屏提醒（数字或预定义的字形）。例如，设想一个提醒用户在收件箱中有新消息的邮件应用程序。

在本实验中您将通过向Contoso Cookbook添加辅助磁贴、推送通知和toast以获得关于它们的第一手体验。在结束时，用户将能够通过辅助磁贴在开始屏幕固定喜爱的食谱，通过Windows通知服务查看磁贴的更新和toast的运行。

译者注：Toast指土司、面包块，这里指在类似面包块形状的长方形区域中显示的消息。

目标

本实验将向您展示如何：

• 创建辅助磁贴。
• 使用推送通知更新主磁贴。
• 使用计划toast通知用户，即使应用程序未运行。

 

系统要求

您需要下列软件完成本实验：

• Microsoft Windows 8
• Microsoft Visual Studio 2012

 

设置

您必须执行以下步骤来准备本实验的计算机：

1、安装 Microsoft Windows 8。

2、安装 Microsoft Visual Studio 2012。

 

练习

本动手实验包含以下练习：

1、合并（Incorporate）辅助磁贴

2、合并推送通知

3、合并计划toast

 

完成本实验的预计时间：30至40分钟。

 

 

练习 1: 合并辅助磁贴

在本练习中您将向项-明细页面的应用栏添加命令以允许用户在开始屏幕使用辅助磁贴固定喜爱的食谱。您还将向Contoso Cookbook添加逻辑，使得当应用程序从辅助磁贴激活时能够显示相应的食谱。

任务1 – 修改应用栏

需要完成的第一项工作是向应用栏添加固定命令。然后我们为其编写处理程序以创建辅助磁贴，点击该磁贴可以显示当前显示的食谱。

1、在Visual Studio中打开您在实验6中完成的ContosoCookbook项目。如果您尚未完成实验6或希望从一个参考副本开始，您可以在开始材料中找到实验已完成的版本。

2、打开ItemDetailPage.xaml并在应用栏“LeftCommands”部分的结束处添加以下语句。

XAML

<Button x:Name="PinRecipeButton" HorizontalAlignment="Left" Style="{StaticResource PinAppBarButtonStyle}" Click="OnPinRecipeButtonClicked" />

3、打开StandardStyles.xaml并定位到被注释的样式元素中的关键字PinAppBarButtonStyle。取消注释以使代码如下所示。

XAML

<!--

        <Style x:Key="RenameAppBarButtonStyle" TargetType="ButtonBase" 
        BasedOn="{StaticResource AppBarButtonStyle}">
        <Setter Property="AutomationProperties.AutomationId" Value="RenameAppBarButton"/>
        <Setter Property="AutomationProperties.Name" Value="Rename"/>
        <Setter Property="Content" Value="&#xE13E;"/>
        </Style> -->
        <Style x:Key="PinAppBarButtonStyle" TargetType="ButtonBase" 
        BasedOn="{StaticResource AppBarButtonStyle}">
        <Setter Property="AutomationProperties.AutomationId" Value="PinAppBarButton"/>
        <Setter Property="AutomationProperties.Name" Value="Pin"/>
        <Setter Property="Content" Value="&#xE141;"/>
        </Style>
<!--
<Style x:Key="MusicInfoAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">

4、打开ItemDetailPage.xaml.cs并添加以下using语句。

C#

using Windows.UI.StartScreen;

5、现在向ItemDetailPage类添加以下方法。

C#

private async void OnPinRecipeButtonClicked(object sender, RoutedEventArgs e)
{
    var item = (RecipeDataItem)this.flipView.SelectedItem;
    var uri = new Uri(item.TileImagePath.AbsoluteUri);

    var tile = new SecondaryTile(
            item.UniqueId,              // Tile ID
            item.ShortTitle,            // Tile short name
            item.Title,                 // Tile display name
            item.UniqueId,              // Activation argument
            TileOptions.ShowNameOnLogo, // Tile options
            uri                         // Tile logo URI
        );

    await tile.RequestCreateAsync(); 
}

注意：本步骤中的磁贴徽标统一资源标识符（Tile logo URI）指向Images文件夹中的150 x 150像素的图像。辅助磁贴图像必须在本地加载。它们不能以远程方式加载（与普通的图像不同）。

6、启动应用程序并点击某个食谱以转到项-明细页面。

7、确认应用栏包含固定(Pin)命令，如图1所示。

图 1 固定(Pin)命令

8、返回Visual Studio并停止调试。

 

任务 2 – 修改 OnLaunched

创建辅助磁贴非常简单，但是您也需要注意当应用程序从辅助磁贴激活后需要导航到项-明细页面以显示某个食谱。

1、打开App.xaml.cs并找到OnLaunched方法。

2、在if(rootFrame == null)子句前添加以下语句。

C#

if (args.PreviousExecutionState == ApplicationExecutionState.Running) 
{
    if (!String.IsNullOrEmpty(args.Arguments))
        ((Frame)Window.Current.Content).Navigate(typeof(ItemDetailPage), args.Arguments);
    Window.Current.Activate();
    return;
}

注意：当Windows应用商店应用启动后，LaunchActivatedEventArgs.Kind将告诉您应用程序启动的原因，同时LaunchActivatedEventArgs.PreviousExecutionState将告诉您应用程序在之前的运行后是否被终止。类似地，当应用程序从辅助磁贴启动时，LaunchActivatedEventArgs.Arguments将提供激活参数，它被传递给SecondaryTile构造函数的第四个参数。您在这里所做的工作是当用户点击辅助磁贴时如果应用程序已经运行，则导航到项-明细页面以显示食谱。

3、向OnLaunched方法中对SuggestionsRequested和CommandsRequested事件的侦听(我们在之前的实验中进行了关联)之后添加以下语句。

C#

// 如果应用程序从辅助磁贴激活，则显示食谱
if (!String.IsNullOrEmpty(args.Arguments)) 
{
    rootFrame.Navigate(typeof(ItemDetailPage), args.Arguments);
    Window.Current.Content = rootFrame;
    Window.Current.Activate();
    return;
}

任务 3 – 固定食谱

现在让我们通过将食谱固定到开始屏幕来测试以上修改并确认当应用程序从磁贴启动后正确的食谱将被显示。

1、在调试器中按F5启动应用程序。

2、转到项-明细页面以查看您选择的食谱。

3、从屏幕底部向上滑出应用栏（或按Windows徽标键+Z）并点击Pin按钮。

4、在其后的弹出窗口中点击固定到开始屏幕（Pin to Start）按钮（图2）

图2 固定辅助磁贴

1、返回Visual Studio并停止调试。

2、转到Windows 8开始屏幕并验证现在开始屏幕包含显示该食谱的辅助磁贴。

3、点击辅助磁贴并验证Contoso Cookbook启动并显示相应的食谱。

4、按Alt+F4关闭应用程序。

 

练习 2: 合并推送通知

推送通知允许Windows应用商店应用更新磁贴（主磁贴或辅助磁贴）的内容，即使应用程序并未运行。推送通知也可以更新磁贴的锁屏提醒，它可以是0到99的数值或某个特殊的字形（例如出现在磁贴上的星号）。推送通知来自Windows通知服务（WNS）对调用的响应，这些调用来自与您的应用相关的基于云的服务。在本练习中您将向Contoso Cookbook添加推送通知。

任务 1 – 修改应用程序清单

Microsoft已经部署了一个Contoso Cookbook可以调用并订阅推送通知的Windows Azure服务，该服务通过WNS传递通知。当该服务被部署时，它被配置为向具备特定包名称和来自特定发布者（”Contoso”） 的应用传递通知。为了获取该服务发出的推送通知，您需要修改应用程序清单以使用正确的包名称和发布者身份。通常您不需要为应用程序进行上述修改，但是因为我们需要重复使用Microsoft已经安装的Azure服务，所以我们需要使用服务的包数据。

1、在解决方案资源管理器中双击Package.appxmanifest以打开清单。

2、在清单编辑器中单击打包(Packaging)选项卡。

3、将包名称(Package name)修改为“BUILD.87821274-9e97-488c-b5af-69dace508bff”。

4、将包显示名称(Package display name)修改为“Contoso Cookbook”。

5、将发布者显示名称(Publisher display name)修改为“Contoso”。

6、单击发布者(Publisher)这一行的选择证书(Choose Certificate)按钮。然后从配置证书(Configure Certificate)下拉列表中选择从文件中选择(Select from file)并在其后的对话框中选择Contoso.pfx。您将在开始材料的Certs文件夹中找到Contoso.pfx。然后单击确定。

7、验证Package name, Package display name, Publisher和Publisher display name具有如图3所示的值。

图 3 被编辑的清单

8、保存修改并关闭Package.appxmanifest。

任务 2 – 订阅推送通知

为了订阅推送通知，Windows应用商店应用从Windows运行时检索一个通知通道并向服务传递通道的统一资源标识符(URI)。当服务需要更新磁贴时，它使用通道URI调用WNS。WNS然后将通知递送给应用程序。让我们在Contoso Cookbook启动时抓取一个通道URI并使用它来订阅推送通知。

1、打开App.xaml.cs并添加以下using语句。

C#

using Windows.UI.Notifications;
using Windows.Networking.PushNotifications;
using Windows.Security.Cryptography;
using System.Net.Http;
using Windows.Networking.Connectivity;
using Windows.UI.Popups;

2、向OnLaunched方法中为CommandsRequested事件注册处理程序的语句后添加以下语句。

C#

// 清空磁贴和锁屏提醒
TileUpdateManager.CreateTileUpdaterForApplication().Clear();
BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();

// 为推送通知进行注册
var profile = NetworkInformation.GetInternetConnectionProfile();

if (profile.GetNetworkConnectivityLevel() == NetworkConnectivityLevel.InternetAccess)
{
    var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
    var buffer = CryptographicBuffer.ConvertStringToBinary(channel.Uri, BinaryStringEncoding.Utf8);
    var uri = CryptographicBuffer.EncodeToBase64String(buffer);
    var client = new HttpClient();

    try
    {
        var response = await client.GetAsync(new Uri("http://ContosoRecipes8.cloudapp.net?uri=" + uri + "&type=tile"));

        if (!response.IsSuccessStatusCode)
        {
            var dialog = new MessageDialog("Unable to open push notification channel");
            dialog.ShowAsync();
        }
    }
    catch (HttpRequestException)
    {
        var dialog = new MessageDialog("Unable to open push notification channel");
        dialog.ShowAsync();
    }
}

注意：对CreatePushNotificationChannelForApplicationAsync的调用将从Windows运行时请求一个通知通道。在本示例中，您对URI进行Base64编码，这样您可以在查询字符串中将URI传递给食谱服务。Base64编码不是绝对必要，但是它防止这种可能性，即通道URI可能在查询字符串中包含需要base-64编码的字符。

您正在使用HttpClient(它是.NET框架的一部分,目前Windows运行时不包含对HTTP网络的支持)触发对托管在Windows Azure中的食谱服务的调用并传递通道URI。该服务维护所有订阅服务的客户端(通过URI标识)记录并在20分钟时间内每隔2分钟向这些客户端发送通知。每个传递给服务的通道URI标识了一个在特定设备上运行的特定应用程序。

任务 3 – 测试推送通知

最后的步骤是确认您的应用程序收到传递给它的推送通知。

1、在调试器中按F5启动应用程序。作为应用程序启动方案的一部分，现在该应用程序重置它的磁贴并订阅推送通知。

2、返回Visual Studio并停止调试以关闭应用程序。

3、转到Windows 8的开始屏幕并找到应用程序的主磁贴。如果它是一个正方形的磁贴，右键单击它并从应用栏选择“放大”以显示一个宽磁贴。

4、观察磁贴一段时间。在2分钟之内，磁贴应该发生改变以显示一些不同的特色食谱中的一个，如图4所示。

图4 在磁贴更新后Contoso Cookbook的主磁贴

5、等待2分钟后检查并验证磁贴再次被修改。注意即使应用程序未运行，这些也会发生！

注意：如果您想观察锁屏提醒的运行情况，在传递给HttpClient.GetAsync的URI中将“type=tile”修改为“type=badge”。再次运行应用程序，在大约两分钟后，一个数字或“锁屏提醒”将出现在磁贴上。

 

练习 3: 合并计划消息

Toast是在屏幕角落中的小窗口中显示的消息。无论计划Toast的应用程序是否运行，Toast都会出现。Toast可以通过应用程序自己被计划(当应用程序运行时)，或者从Windows通知服务响应通知。此外，Toast可以包含声音和文字。

在本练习中，您将向Contoso Cookbook添加计划toast以对提醒进行模拟。

任务 1 – 修改应用栏

为了提供计划toast的用户界面，我们需要向应用栏添加一个提醒(Reminder)命令并为它编写处理程序。

1、打开ItemDetailPage.xaml并向<Page.Resources>部分添加以下语句。

XAML

<Style x:Key="ReminderAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="ReminderAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Reminder"/>
    <Setter Property="Content" Value="&#xE121;"/>
</Style>

2、同时在ItemDetailPage.xaml中，向应用栏“LeftCommands”部分的结束处添加以下语句。

XAML 

<Button x:Name="ReminderButton" HorizontalAlignment="Left" Style="{StaticResource ReminderAppBarButtonStyle}" Click="OnReminderButtonClicked" />

3、打开ItemDetailPage.xaml.cs并添加以下using语句。

C# 

using Windows.UI.Notifications;
using Windows.UI.Popups;

4、接着向ItemDetailPage类添加以下方法。

C# 

private async void OnReminderButtonClicked(object sender, RoutedEventArgs e) 
{
    var notifier = ToastNotificationManager.CreateToastNotifier ();

    // 确认通知被启用
    if (notifier.Setting != NotificationSetting.Enabled)
    {
        var dialog = new MessageDialog("Notifications are currently disabled");
        await dialog.ShowAsync();
        return;
    }

    // 获取toast模板并插入包含消息的文本节点
    var template = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText01);
    var element = template.GetElementsByTagName("text")[0];
    element.AppendChild(template.CreateTextNode("Reminder!"));

    // 计划从现在起30秒后显示toast
    var date = DateTimeOffset.Now.AddSeconds(30);
    var stn = new ScheduledToastNotification(template, date);
    notifier.AddToSchedule(stn);
}

5、启动应用程序并点击某个食谱以 转到项-明细页面。

6、确认应用栏包含Reminder命令，如图5所示。

 

图5 Reminder命令

7、返回Visual Studio并停止调试。

任务 2 – 启用toast通知

在测试前的最后一个任务是在清单中启用toast通知。

1、打开Package.appxmanifest并转到应用程序UI选项卡。

2、将”支持Toast通知” (” Toast capable”)设置修改为”是”(图6)。

 

图6 启用toast通知

注意：您必须在应用程序可以计划toast前启用支持Toast通知。在启用这个设置后，一个切换按钮将出现在应用程序的权限页面，它允许用户启用或禁用通知。您添加的OnReminderButtonClicked方法检查通知是否被启用，如果通知未被启用将提醒用户。

任务 3 –运行toast!

最后的任务是测试计划toast通知的代码并查看toast的运行。

1、按F5启动应用程序。

2、转到您选择的食谱。

3、显示应用栏并点击Reminder按钮。

4、返回Visual Studio并停止调试。

5、切换到Windows 8开始屏幕或另一个应用程序，并为toast出现等待大约30秒。

 

 图 7 来自Contoso Cookbook的toast

6、点击toast并验证您将切换回Contoso Cookbook。

7、返回Visual Studio并停止调试。

 

总结

您现在已经查看了辅助磁贴，推送通知和计划toast的运行。这些仅仅是您可以在应用程序未运行时通过磁贴和通知更新内容的一小部分示例。

从我们在实验1开始Contoso Cookbook以来，我们已经完成了很多工作，但是还有一些工作需要完成。接下来我们将继续探索Windows应用商店API并允许用户模拟对应用程序以及额外食谱的购买。微软为应用做了大量推广和收集购买费用的工作，因此通过Windows应用商店应用赚钱非常容易。听起来很有趣？那么让我们开始吧。