2017 年 1 月

第 32 卷，第 1 期

新型应用 - 探索 UWP 社区工具包

作者 Frank La La | 2017 年 1 月

随着通用 Windows 平台 (UWP) 的发展，出现了常见的 UI 模式和挑战。虽然 UWP 提供了开箱即用的控件和 API 功能集，但所提供的内容仍存在一些差距，并且某些功能需要大量的编码和努力工作。为了解决这一差距并使 UWP 发展更快且更容易被初学者所接受，Microsoft 创造了 UWP 社区工具包并将其置于Github (bit.ly/2b1PAJY)。

UWP 社区工具包的目标是使开发者社区参与其中创造一系列控件和帮助程序功能，以此简化 UWP 的发展。UWP 社区工具包有五类工具： 控件、通知、动画、服务和帮助程序。在本月专栏中，我将对各类别进行一个大致的介绍并演示如何将工具包用于 UWP 项目。

UWP 社区工具包示例应用

探讨 UWP 社区工具包的最佳方式是从 Windows 应用商店下载 UWP 社区工具包示例应用 (bit.ly/2bypOyw)。该应用不仅展示了工具包的所有功能（参见图 1），同时还提供了控件、动画、通知等的互动演示，如图 2 所示。

图 1 UWP 社区工具包示例应用的主页屏幕

图 2 调整 RadialGauge 控件参数

此外，该应用还提供控件的 XAML 和代码形式，从而更快地进行修补、调整，并实现 UI 元素。

接口控件如前所述，UWP 社区工具包包含了一些 UI 控件： 截稿时间为 13 点。许多这些控件通常在移动应用程序或为移动优化的网站中发现。其中一个例子是 HamburgerMenu 控件。按照惯例，hamburger 菜单由三条横线组成，表明有一个折叠菜单。触摸或单击控件可切换其状态。图 3 和图 4 分别演示了控件折叠和展开的样子。  

图 3 折叠的 Hamburger 菜单

图 4 展开的 Hamburger 菜单

确保探索 UWP 社区工具包中每个控件的功能和设置。它们具有极大的灵活性，将为每一个 UWP 项目增加价值。

通知 Windows 10 提供了一个丰富的 API，可以使开发人员创建实时磁贴和 toast 通知，以提醒用户实时事件，并使他们随时了解最新信息。有关磁贴和 toast 通知的全面探索，建议阅读由拥有 UWP 磁贴和 toast API 的团队编写的磁贴和 Toast 博客 (bit.ly/2fzFsv1)。

虽然它非常有用且功能强大，但创建通知和实时磁贴对不熟悉 XML 和 XPath 的开发者可能是个挑战。UWP 社区工具包通过将对象模型置于底层结构顶部以更容易生成用于 toast 通知和实时磁贴的 UI。

动画 Windows 10 引入了组合 API，这是一个丰富的保留模式的声明性 API，任何 UWP 应用可以用它来直接创建组合对象、动画和视觉效果。实质上，它处于 XAML 和底层 DirectX 架构之间。组合 API 旨在为 XAML开发者提供一种方式来享有许多 DirectX 性能优势，同时以 C# 代码进行编写。对组合 API 的完整讨论超出了本卷的范围，你可以在 bit.ly/2fzCfeQ 了解更多信息。

UWP 社区工具包通过在组合 API 基础上提供 XAML 行为和扩展方法，以易于访问 API。UWP 社区工具包示例应用甚至有一个控制面来试验五个动画集上的不同参数。该工具包甚至会生成 C# 代码和 XAML 标记来实现动画。

服务我们生活在一个云时代，当应用连接到云服务时它们更加出色。但是，将这些服务添加到应用可能会增加复杂性：通过 OAuth 实现身份验证，充分利用 REST API 以及这些 API 的流体本质。幸运的是，UWP 社区工具包提供了一个广泛的对象模型，可以应对大部分的复杂问题。目前，UWP 工具包为 Bing、LinkedIn、Facebook、Twitter 和 Microsoft Graph Service 提供支持.这意味着开发人员只需执行最少的工作，就可以轻松地连接到这些在线服务。

帮助程序函数 UWP 社区工具包还包括各种帮助程序函数，使常见的应用程序开发任务执行起来更加容易。例如，在查询云服务之前，应用应该检查是否有网络连接。虽然这可以在没有此工具包的条件下完成，但它只能使用工具包在一行代码中完成。帮助程序也可用于打印、后台任务，以此获取系统信息等等。

将 UWP 社区工具包添加至项目

将 UWP 社区工具包添加至项目的最佳方式是通过 NuGet。通过从“文件”菜单中选择新项目，在 Visual Studio 中创建新的空白 UWP 项目。选择“已安装 | 模板 | Windows | 通用 |空白应用（通用 Windows）”。将项目命名为 UWPToolKitApp，然后单击“确定”。

将 UWP 社区工具包添加至项目最为简单的方法是添加 NuGet 包。在解决方案资源管理器中，右键单击“引用”并从上下文菜单中选择“管理 NuGet 包”以显示 NuGet 包管理器。

在搜索框中，键入 Microsoft.Toolkit.Uwp 以显示所有与 UWP 社区工具包相关联的 NuGet 包。你应该看到一些结果，包括 UWP 社区工具包本身，以及其他包和库。有关哪些包包含哪些功能的快速参考图，请参阅图 5。 

图 5 UWP 社区工具包 NuGet 包

现在，你将要添加主要的 NuGet 包 (Microsoft.Toolkit.Uwp) 和服务包 (Microsoft.Toolkit.Uwp.Services)。单击 Microsoft.Toolkit.Uwp 的条目，然后单击将出现在 NuGet 包管理器右侧的“安装”按钮。如果提示“查看更改”对话框，请检查更改，然后单击“确定”。在此单击“取消”将会取消 NuGet 包安装。此外，可能还会出现“接受许可协议”对话框，单击“我接受”以接受许可条款。  可以选择查看许可。可以选择拒绝许可。单击“我接受”将完成此包的安装。针对 Microsoft.Toolkit.Uwp.Services 包重复此过程，可能需要接受多个许可条款。

完成这些任务后，应该会在解决方案资源管理器中项目的引用部分看到 NuGet 包。

使用 Bing 搜索 现在将创建一个示例应用，它将检查在线连接和运行应用的设备模型。然后，它将向你提供在 Bing 中搜索有关该设备的信息的选项。

打开 MainPage.xaml 文件并在图 6 中添加 XAML 以创建一个简单的 UI。

图 6 创建示例应用 UI 的XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="33*"/>
    <RowDefinition Height="607*"/>
  </Grid.RowDefinitions>
  <Button Name="btnSearch" Click="btnSearch_Click" Grid.Row="0">Search Bing</Button>
  <ListView Name="lvSearchResults" Grid.Row="1">
    <ListView.ItemTemplate>
      <DataTemplate>
        <StackPanel>
          <TextBlock Text="{Binding Title}" FontWeight="Bold"></TextBlock>
          <TextBlock Text="{Binding Published}" FontStyle="Italic" ></TextBlock>
          <TextBlock Text="{Binding Link}" Foreground="Blue"></TextBlock>
          <TextBlock Text="{Binding Summary}"></TextBlock>
        </StackPanel>
      </DataTemplate>
   </ListView.ItemTemplate>
  </ListView>
</Grid>

在 MainPage.xaml.cs 文件中，将下列代码添加至构造函数方法：

btnSearch.IsEnabled = ConnectionHelper.IsInternetAvailable;
btnSearch.Content = $"Search Bing for {SystemInformation.DeviceModel}";

将下列代码添加至 MainPage.xaml.cs 文件：

private async void btnSearch_Click(object sender, RoutedEventArgs e)
  {
    var searchConfig = new BingSearchConfig
    {
      Country = BingCountry.UnitedStates,
      Language = BingLanguage.English,
      Query = SystemInformation.DeviceModel,
      QueryType = BingQueryType.Search
    };
  lvSearchResults.ItemsSource =
    await BingService.Instance.RequestAsync(searchConfig, 50);
  }

Visual Studio 将帮助添加适当的 using 语句至代码。

现在运行解决方案。如果设备已连接 Internet，则应启用搜索按钮。还可以在按钮文本中看到设备模型。如果按钮已启用，单击它，将看到与图 7 类似的内容。当然，具体结果根据应用运行的设备而异。

图 7 设备模型的搜索结果

Toast 通知 UWP 社区工具包的另一个功能是简化常见开发人员任务。Toast 通知是 UWP 应用中 UX 的重要部分，因为它会及时通知用户应用的状态。但是，Toast 通知 API 需要全面了解 XML。这会对新手级别的开发者造成困扰，甚至使经验丰富的开发人员受挫。UWP 社区工具包大大简化了创建 toast 通知的过程。

有关示例应用，将添加一个简单的 toast 通知来通知用户已返回搜索结果。这可能不会对示例应用有太多价值，因为 Bing 会立即返回结果。但是，这将有助于提醒用户完成一个长期运行的任务。

第一步是为项目添加 Microsoft.Toolkit.Uwp.Notifications NuGet 包。重复前面提到的步骤以将其添加至项目。 

下一步，将图 8 中的代码添加到 MainPage.xaml.cs 文件以创建 Toast 通知内容。它使用系统信息帮助程序类填写一些关于运行此应用程序的设备的详细信息。

图 8 创建示例 Toast 通知内容的代码

private ToastContent CreateDummyToast()
{
  return new ToastContent()
  {
    Launch = "action=viewEvent&eventId=1983",
    Scenario = ToastScenario.Default,
    Visual = new ToastVisual()
    {
      BindingGeneric = new ToastBindingGeneric()
        {
          Children =
            {
              new AdaptiveText()
                {Text = $"Bing search results returned for
                  {SystemInformation.DeviceModel}"},
              new AdaptiveText()
                {Text = $"Available Memory {SystemInformation.AvailableMemory}"},
              new AdaptiveText(){Text =
                $"Running {SystemInformation.OperatingSystem}
                {SystemInformation.OperatingSystemVersion}
                ({SystemInformation.OperatingSystemArchitecture})"}
             }
          }
        }
      };
    }

仔细查看代码，你会发现 UWP 社区工具包添加了一个关于 Toast 通知 API XML 格式的对象模型。这将简化创建 toast 通知内容的过程。开发人员可以享受开放式格式的强大功能和灵活性，同时获得一个对象模型（和 IntelliSense）来编写代码。

现在添加以下方法：

private void PopToast()
{
  ToastContent toastContent = CreateDummyToast();
  ToastNotificationManager.CreateToastNotifier()
    .Show(new ToastNotification(toastContent.GetXml()));
}

第一行调用 CreateDummyToast 方法来构建 toast 通知内容并将该内容分配给 ToastContent 对象。第二行使用 GetXml 方法将对象模型转换为 Toast 通知 API 期望的 XML 格式。 

现在剩下要做的是，从 Bing 中的 btnSearch_Click 事件处理程序返回搜索结果后立即调用 PopToast 方法。运行解决方案，然后像之前一样单击“搜索”按钮。很快你便会看到与图 9 类似的通知出现。

图 9 返回的 Toast 通知

总结

UWP 社区工具包提供必要资源来创建吸引人的丰富 UWP 应用。从新控件到云服务 API 库，它使开发人员能够轻松创建连接到云服务的应用，而不必处理 REST API 的低水平探测问题。最重要的是，得益于开发者社区的付出，UWP 社区工具包正变得越来越强大。功能集在不断地增长，团队接受投稿。这正是由社区为社区打造的成果。

Frank La Vigne 是一名独立顾问，他致力于帮助客户利用技术来创造一个更好的社区。他定期在 FranksWorld.com 上发表博客，并且拥有一个名为“Frank’s World TV”(FranksWorld.TV) 的 YouTube 频道。

衷心感谢以下技术专家对本文的审阅： David Catuhe