---

2017 年 2 月

第 32 卷，第 2 期

此文章由机器翻译。

新式应用 - Twitter 搜索实用工具

通过Frank La La

在我的专栏上个月，我探讨了很好通用 Windows 平台 (UWP) 社区工具包，一个专为社区构建的社区的开放源代码工具包。但是，只被简单可以执行的操作图的面。UWP 社区 Toolkit 可构建高度抛光、 功耗云 UWP 应用程序更轻松、 快捷。在本月的专栏中，我将讨论如何构建 Twitter 搜索应用程序使用 Twitter 服务和边栏选项卡控件来演示使用是多么容易。

目前，我管理的推文中的源内容标有某些哈希标记的多个 YouTube 频道。例如，#DCTech 分钟重点介绍在 DC 区域中启动和技术场景中发生的事件。我发现内容以重点介绍基于使用 DCTech 哈希标记的推文。有关 #Node.js 分钟，我执行相同的操作与使用 #Node.js 标记的推文。目前，我做大量的剪切和粘贴之间 Twitter 和 OneNote 的手册。那就太棒具有的 UWP 应用程序可以搜索所有的关键短语我需要全部放在一个窗口，并更轻松地请求内容推文的 Twitter。

建立项目

通过从“文件”菜单中选择新项目，在 Visual Studio 中创建新的空白 UWP 项目。展开安装的模板 |Windows |空白应用 (通用 Windows)。将项目 TagSearcherUWP 命名，然后单击确定。之后，将出现一个对话框，询问您的 Windows 应用程序应为目标的版本。最低限度上，您将需要选择 Windows 10 周年版 (10.0;生成 14393）。这是最新版本。因此，目标版本和最小版本将两者为目标相同的版本，如中所示图 1。如果看不到这两个下拉列表中的此特定版本，请确保已在系统上安装了相应软件。Microsoft.Toolkit.Uwp.UI.Controls NuGet 程序包添加到项目后，无法选择正确的版本会产生运行时错误。 

图 1 以正确的 Windows 版本为目标

解决方案加载后，浏览到解决方案资源管理器，然后右键单击引用并从上下文菜单以显示 NuGet 程序包管理器中选择管理 NuGet 包。在搜索框中，键入"Microsoft.Toolkit.Uwp"以打开与 UWP 社区工具包相关联的所有 NuGet 包。此项目将使用的包 Microsoft.Toolkit.Uwp.Services 和 Microsoft.Toolkit.Uwp.UI.Controls 包。安装这两个将它们添加到项目。如果出现一个对话框，查看更改提示，查看所做的更改，然后单击确定以接受。您将看到每个包许可证接受对话框。单击"我接受"以接受许可条款。单击"我拒绝"将取消安装。

Twitter 设置

现在，项目已使用适当的 NuGet 程序包，设置了其将应用程序连接到 Twitter 服务的时间。转到apps.twitter.com并使用你的 Twitter 帐户登录。如果你没有 Twitter 帐户，您应该先创建一个现在。如果尚未创建 Twitter 应用程序，您需要单击创建新的应用程序以注册新应用程序。

您将需要填写有关应用程序中，如名称、 描述、 网站和回调 URL 的详细信息。您可以根据需要，在字段中填充。对于名称中，我将选择 MSDNTagSearchUWPApp。登录时，因此最好以使其简短且具有说明性的最终用户将看到说明文本。请参阅图 2有关的指南。对于 Web 站点和回调字段，我将放入我的网站 URL。于 UWP 应用对于回调 URL 不必是工作的 URL。如您稍后需要登录到服务时，请记下的 url。检查开发人员协议旁边的复选框并单击创建 Twitter 应用程序按钮。

图 2 创建新的 Twitter 应用程序

创建应用程序后，单击密钥和访问令牌选项卡上，并记下的使用者密钥 （API 密钥） 和使用者机密 （API 密钥） 字段中所示图 3。你将稍后使用它们。

图 3 使用者密钥和访问令牌选项卡

创建 UI

打开 MainPage.xaml 文件并添加中的 XAML图 4。请注意，控件 UWP 社区工具包中添加的命名空间。这是 BladeView 控件所在的位置︰

图 4 XAML 代码来创建界面

<Page
  x:Class="TagSearcherUWP.MainPage"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:TagSearcherUWP"
  xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
  xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
      <RowDefinition Height="56*"/>
      <RowDefinition Height="35*"/>
      <RowDefinition Height="549*"/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
      <TextBlock FontSize="24" Margin="5">Twitter Tag Searcher</TextBlock>
      <Button Name="btnLogin" Click="btnLogin_Click" >Log In</Button>
    </StackPanel>
    <StackPanel Name="splSearch" Grid.Row="1"  Orientation="Horizontal"
      VerticalAlignment="Center" Visibility="Collapsed">
      <TextBox Name="txtSearch" Margin="5,0,5,0"  MinWidth="140" Width="156" />
      <Button Name="btnSearch" Click="btnSearch_Click">Search</Button>
    </StackPanel>
    <controls:BladeView Name="bladeView" Grid.Row="2" Margin="12"
      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
      <controls:BladeItem x:Name="DummyBlade" IsOpen="False" />
    </controls:BladeView>
  </Grid>
</Page

引入 BladeView 控件

BladeView 控件看起来熟悉的 Azure 门户网站的用户 (portal.azure.com)。如果您不熟悉它，BladeView 控件到主机"刀片"或图块提供一个容器。中的 XAML图 4包括"DummyBlade"，以防止发生故障的 XAML 设计器视图。如果遇到而无需任何 BladeItems BladeView，它将引发异常。因为 IsOpen 属性设置为 False，则用户将永远不会看到 BladeItem。

Twitter 登录

接下来，通过添加以下事件处理程序 btnLogin_Click 事件连接到 Twitter API 的应用程序︰

private async void btnLogin_Click(object sender, RoutedEventArgs e)
  {
    string apiKey = "pkfAUvqfMAGr53D4huKOzDYDP";
    string apiSecret =
      "bgJCH9ESj1wraCoHBI5OqEqhkac1AOZxujqvnCWKNRJgBMhyPG";
    string callbackUrl = "http://www.franksworld.com";
    TwitterService.Instance.Initialize(apiKey, apiSecret, callbackUrl);
    if (await TwitterService.Instance.LoginAsync())
    {
      splSearch.Visibility = Visibility.Visible;
    }
  }

代码将使用 API 密钥、 API 密钥和回调 URL 字段，并在 TwitterService.Instance 的 Initialize 方法的参数中使用它们。TwitterService.Instance 是将保持在整个应用程序的状态的单一实例。调用 LoginAsync 方法启动到 Twitter API 的调用。如果登录成功，则该方法返回 true。在这种情况下，应使 StackPanel 使用搜索控件可见。

显示搜索结果

与设置的 Twitter API 调用，就可以创建一个位置以便搜索结果将会显示。若要执行此操作，您将创建一个用户控件。用户控件将包含代码可以执行 Twitter API 搜索，并承载所需的控件以显示搜索结果。

若要开始，右键单击该项目并选择添加 |在上下文菜单中的新项。在下列对话框中，查找用户控件。将用户控件 SearchResults，然后单击添加，如中所示图 5。

图 5 向项目中添加新的用户控件

修改 SearchResults.xaml 文件以添加在中找到 XAML图 6。

图 6 SearchResults 用户控件的 XAML

<Grid>
  <ListView Name="lvSearchResults" Width="350" >
  <ListView.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,4,4,0">
        <Image Source="{Binding User.ProfileImageUrl}" Width="64"
          Margin="8"  ></Image>
          <StackPanel Width="240">
            <TextBlock Text="{Binding Text}"
              TextWrapping="WrapWholeWords"></TextBlock>
            <TextBlock Text="{Binding CreationDate}"
              FontStyle="Italic" ></TextBlock>
            <TextBlock Text="{Binding User.ScreenName}"
              Foreground="Blue"></TextBlock>
            <TextBlock Text="{Binding User.Name}"></TextBlock>
          </StackPanel>
        </StackPanel>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</Grid>

XAML 包含 ListView 和必要的 DataTemplate 以显示 Twitter 搜索结果。打开 SearchResults.xaml.cs 文件并将以下属性添加到搜索结果类︰

public string SearchTerm { get; private set; }

然后，修改要添加针对搜索词的字符串参数的构造函数︰

public SearchResults(string searchTerm)
{
  this.InitializeComponent();
  this.SearchTerm = searchTerm;
  Search();
}

现在添加以下方法：

private async void Search()
  {
    lvSearchResults.ItemsSource = await  
    TwitterService.Instance.SearchAsync(this.SearchTerm, 50);
  }

Search 方法调用 SearchAsync 具有两个参数︰ 搜索词和限制要返回的结果。所有基础 REST API 探测工作是通过 UWP 社区工具包。  

现在，准备就绪后 SearchResults 用户控件，就可以将代码添加到 MainPage.xaml.cs 文件，以完成应用程序。添加下面的事件处理程序 btnSearch 按钮控件︰

private void btnSearch_Click(object sender, RoutedEventArgs e)
  {
    BladeItem bi = new BladeItem();
    bi.Title = txtSearch.Text;
    bi.Content = new SearchResults(txtSearch.Text);
    bladeView.Items.Add(bi);
  }

BladeView 控件可以包含任意数量的 BladeItems。上一个代码段创建 BladeItem 控件，并从搜索文本框中的文本设置 BladeItem 的标题。接下来，它将 BladeItem 控件的内容设置为 SearchResults 用户控件，将搜索字词传递给构造函数的新实例。最后，它将 BladeItem 添加到 BladeView。

现在运行解决方案。单击登录按钮。出现提示时，输入你的 Twitter 凭据，并授予该应用程序要求的权限。将关闭此窗口和搜索面板将可见。输入后几个搜索词，您的屏幕应如下所示图 7。

图 7 中操作的标记搜索应用程序

添加复制功能

现在，已按边栏选项卡巧妙地组织您感兴趣的所有推文，需要一种方法来获取的数据为文本格式。理想情况下，您将能够用鼠标右键单击 （或点击，如果某一触摸屏设备） 等说 tweet 的内容复制到剪贴板。添加此功能需要 SearchResults 用户控件的 XAML 和代码进行一些修改。

在 SearchResults.xaml 文件中，您想要将弹出菜单添加到 ListView 控件。ListView 标记内添加以下 XAML 以创建 MenuFlyout 为 ListView 控件内的资源︰

<ListView.Resources>
  <MenuFlyout x:Name="mfCopyMenu">
    <MenuFlyout.Items>
      <MenuFlyoutItem Name="mfiCopy" Text="Copy" Click="mfiCopy_Click"/>
    </MenuFlyout.Items>
  </MenuFlyout>
</ListView.Resources>

在仍 SearchResults.xaml 文件中，而向 ListView 控件来检测用鼠标右键单击或点击 ListView 时添加以下事件处理程序︰

RightTapped="lvSearchResults_RightTapped"

现在在 SearchResults.xaml.cs 文件中添加以下事件处理程序代码︰

private void lvSearchResults_RightTapped(object sender, 
  RightTappedRoutedEventArgs e)
{
  var tweet = ((FrameworkElement)e.OriginalSource).DataContext;
  mfiCopy.Tag = tweet;
  mfCopyMenu.ShowAt(lvSearchResults, 
    e.GetPosition(lvSearchResults));
}

此代码的用途是捕获来自 DataContext 的推文对象并将其存储到 MenuFlyoutItem Tag 属性。Tag 属性从 FrameworkElement 中继承，并且应存储的对象有关的自定义信息。一旦所选的 tweet 对象存储在 MenuFlyoutItem 的 Tag 属性，它是时间才会显示弹出菜单。用户希望他们单击或点击屏幕上显示的上下文菜单。这就是为什么该代码将事件的位置信息发送到 ShowAt 方法。

现在就可以添加事件处理程序 MenuFlyoutItem 控件和代码以将 tweet 的内容复制到剪贴板。将以下事件处理程序添加到 SearchResults.xaml.cs 文件︰

private void mfiCopy_Click(object sender, RoutedEventArgs e)
{
  var menuFlyoutItemSender = (MenuFlyoutItem)sender;
  var tweet = menuFlyoutItemSender.Tag as Tweet;
  DataPackage dataPackage = new DataPackage();
  dataPackage.RequestedOperation = DataPackageOperation.Copy;
  dataPackage.SetText($"@{tweet.User.ScreenName} {tweet.Text} ");
  Clipboard.SetContent(dataPackage);
}

前两行代码从 MenuFlyoutItem 的 Tag 属性检索推文数据。一旦获得的就可以将数据发送到剪贴板。在 UWP 应用的这是通过使用 DataPackage 类。DataPackage 类的完整探讨已超出了本专栏; 范围但是，如果您有兴趣了解更多，我建议您阅读的"复制和粘贴"文档页，在bit.ly/2h54IK0。"DataPackage 类"文档页位于bit.ly/2hpo2Fc。

剪贴板可以处理可靠格式文本和图像。但是，为本专栏中，我希望仅推文和进行它的人员的 Twitter 句柄的文本内容中。UWP 社区工具包将存储，为 ScreenName 深入了解用户对象。最后，我对 DataPackage 对象设置剪贴板的内容。

现在运行解决方案，登录，并输入搜索词。查找你想要复制，用鼠标右键单击或点击以查看上下文菜单中，作为 shownin tweet图 8。单击复制。

图 8 测试示例 Tweet 的复制上下文菜单函数

现在，运行记事本或您喜爱的文本编辑器，并选择编辑 |粘贴或使用 Ctrl + V。您应该看到该文本自推文︰ @AndyLeonard 通过我的兄弟和友元，Frank La Vigne 读取"将无赖"。:{> https://t.co/JnuAzqO6m5。

总结

如您所见，UWP 社区工具包便于快速开发云连接于 UWP 应用。只需要一行代码能够登录到 Twitter。搜索 Twitter 时同样尽可能简单。大部分代码有更多地表示法的数据以及用户如何与之交互。UWP 社区工具包提供了丰富的 UI 控件，以及访问常用云 Api，如 Twitter 的简便方式。低级别的 REST API 和身份验证机制都迎刃而解干净启用智能感知的 api。这使开发人员可以专注于用户如何与数据，而不是获取数据交互。UWP 社区工具包可以使任何 UWP 应用程序更好和更轻松地连接到社交媒体和其他云服务。

---

Frank La Vigne 是一名独立顾问，他致力于帮助客户利用技术来创造一个更好的社区。定期在他的博客FranksWorld.com并且具有了 YouTube 频道调用的 Frank 世界电视 (FranksWorld.TV)。

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