新型应用程序

在 Windows 应用商店和 Windows Phone 应用商店应用中实现搜索

Rachel Appel 搜索是我们数字生活的有机组成部分。数以百万计的人使用 Bing 和谷歌等网站查找信息每一天。数以百万计更多通过 Web、应用程序和专有数据的搜索商店一样。因为搜索可以说是最常用的数字特征，明智之举是帮助的用户更轻松地搜索与您的应用程序。

Windows 如何方便搜索

由于个人电脑、平板电脑和笔记本电脑的物理形态的因素差异，Windows 操作系统提供搜索行为相应的 Ui。例如，Windows Phone 8.1 使用柯塔娜来搜索（阅读更多关于柯塔娜在 bit.ly/1nFGMxG)。应用程序可以执行自定义搜索从内有或无柯塔娜的应用 Windows Phone 商店应用程序。Windows Phone 基于设备有一个特殊的硬件按钮进行搜索，位于右下角的手机本身，旁边的窗口（中心）和背（左）按钮。

你可以做很多事情要调用 Windows 8 的搜索。最简单的方法是到刚开始键入当你在 Windows 启动屏幕上。那序幕全局搜索，跨设备和互联网。使用刷卡点触摸手势是另一种方式来调用搜索启用触摸设备。你还可以要开始搜索的屏幕的右上角或右下角的角落里果酱鼠标。

最后，如果你生生死死的快捷键，您还可以使用 Windows + S 显示 Windows 搜索魅力。影像学并不需要改变形式因素。当用户将看到一个放大镜时，他知道它总是意味着搜索。

Microsoft 建议使用搜索框内键入控制，虽然它的罚款要搜索魅力（也称为搜索契约）用于向后兼容性。你可以阅读更多关于在 bit.ly/1xkqwXN。当使用的搜索框内键入控件，可以将它添加到您的应用程序的画布或在应用程序栏中显示它。如果搜索是与您的应用程序进行交互的主要方法之一，它是最好地呈现它一贯整个应用程序 UI。

一个好的位置是在任何地方很容易发现在画布上的应用程序，通常右上角。处理新闻、电影、体育、学术论文和财务报告的应用程序都需要一个突出搜索框的应用程序很好的例子。有时用户想浏览懒洋洋地，但更经常，他们知道他们想要什么，并倾向于直接导航至该通过搜索。

用占用了太多的屏幕房地产在搜索框中，您可能会关注。这是一个有效的问题。使用一个暴露的搜索图标是途径之一，显示一个小型的但是明显的视觉搜索指标。用户单击或水龙头上揭示搜索标志符号后，搜索框内键入显露自己这样他们就可以输入搜索字符串并查看结果。

可以使用搜索框内键入要查找的数据，本地或全球范围内。正如你可能期望，全局搜索时，您的应用程序正在访问该应用程序本身之外的数据。这可能是一种可移动设备、网络或 Internet 上。如果你做搜索通过文件（如音乐或图片在设备上，别忘了设置该程序的清单中的能力。

执行搜索与搜索框内键入控件

可以合并到您的应用程序使用 XAML 或 HTML 为 Windows 应用商店和 Windows Phone 存储应用程序的搜索框。在概念上的控件和 API 调用工作相同跨语言，但自然地与不同的语法。编码搜索搜索魅力也是大致相同的复杂性而言。代码必须执行相同的基本步骤，并且相同的 UX 准则的申请，无论哪种语言。

图 1 演示 XAML 的搜索框内键入。你可以把这 StackPanel 等的任何容器控件内的控件。与其他控件一样，您必须电汇中响应用户调用搜索火警的事件。您使用的搜索框内键入控件，时无需设置的搜索图标。你可能会想要将 FocusOnKeyboardInput 设置为 True。允许用户简单地开始打字集中控制给搜索，这使得更容易的搜索体验。

图 1 使用 XAML 和 C# 的建议搜索

<SearchBox x:Name="SearchBox" Height="35"
  HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
  SuggestionsRequested="SearchBoxEventsSuggestionsRequested"  
  QuerySubmitted="SearchBoxEventsQuerySubmitted"
  FocusOnKeyboardInput="True"/>
public sealed partial class SearchBoxWithSuggestions :
  SDKTemplate.Common.LayoutAwarePage
{
  public SearchBoxWithSuggestions()
  {
    this.InitializeComponent();
  }
  private static readonly string[] suggestionList =
  {
    "ActionScript", "Ada", "Basic", "C", "C#", "C++", "Clipper",
      "Clojure", "COBOL", "ColdFusion", "Dart", "Delphi", "Erlang",
      "F#", "Haskell", "HTML", "Java", "JavaScript", "LISP",
      "Objective-C", "Pascal", "Perl", "PowerShell", "R", "Ruby",
      "Rust", "RPG", "SQL", "SmallTalk", "Small Basic", "Swift",
      "TypeScript", "Turbo C", "Visual Basic"
  };
  private void SearchBoxEventsSuggestionsRequested(
    object sender, SearchBoxSuggestionsRequestedEventArgs e)
  {
    string queryText = e.QueryText;
    if (!string.IsNullOrEmpty(queryText))
    {
      Windows.ApplicationModel.Search.
        SearchSuggestionCollection suggestionCollection =
        e.Request.SearchSuggestionCollection;
      int n = 0;
      foreach (string suggestion in suggestionList)
      {
        if (suggestion.StartsWith(queryText,
          StringComparison.CurrentCultureIgnoreCase))
        {
          Uri uri = new Uri("ms-appx:///Assets/laptop1.png");
          RandomAccessStreamReference imageSource =
            RandomAccessStreamReference.CreateFromUri(uri);
          suggestionCollection.AppendResultSuggestion(
            suggestion, "", n.ToString(), imageSource, suggestion);
        }
      }
    }
  }
  private void SearchBoxEventsQuerySubmitted(
    object sender, SearchBoxQuerySubmittedEventArgs e)
  {
    SearchListView.Items.Add(e.QueryText);
  }
}

在 XAML 中，SearchBoxEventsSuggestionsRequested 和 SearchBoxEventsQuerySubmitted 的事件是两个主事件线所 ups，你需要。SearchBoxEventsSuggestionsRequested 为每一次击键输入捕获击键在真正的时间触发一次。如其名称所示，当用户按下 enter 键，单击，点击搜索图标或否则触发搜索，就会发生 SearchBoxEventsQuerySubmitted。SearchBoxEventsQuerySubmitted 事件，您可添加代码来执行实际的搜索。图 1 显示这两个事件中的行动。

在 C# 中，你需要做的第一件事是，提供的搜索字符串，使用作为建议名单。图 1 显示一个名为 suggestionList 的字符串数组。该列表包含几种编程语言的名称。中的代码图 1 演示与 SearchSuggestionCollection 的搜索实现。当 SearchBoxEventsSuggestions请求事件触发，它名为"e"的参数包括的 SearchSuggestionCollection，你可以追加查询。这一点反映在图 1 当 suggestionCollection 变量，并设置。

通过 AppendQuerySuggestion、 AppendQuerySuggestions、 AppendSearchSuggestion 或 AppendResultSuggestion 方法，您可以向 SearchSuggestionCollection 追加查询。结果建议出现在相同的表的查询的建议，但他们让你进入的额外数据（如图像搜索框内键入。

尽管 XAML 具有资源设置样式和审美特征的概念，HTML 使用 CSS 来执行这些任务。作为一个例子，因为<div>元素在图 2 包含没有引用任何样式，它将使用默认 Windows 库是 WinJS 基地 CSS 的一部分的 JavaScript （WinJS）.win 搜索类。

图 2 使用 HTML 和 JavaScript 的建议搜索

<div id="searchBox" data-win-control="WinJS.UI.SearchBox"></div>
(function () {
"use strict";
var suggestionList = ["ActionScript", "Ada", "Basic", "C", "C#", "C++", "Clipper",
  "Clojure", "COBOL", "ColdFusion", "Dart", "Delphi", "Erlang", "F#", "Haskell",
  "HTML", "Java", "JavaScript", "LISP", "Objective-C", "Pascal", "Perl",
  "PowerShell", "R", "Ruby", "Rust", "RPG", "SQL", "SmallTalk",
  "Small Basic", "Swift", "TypeScript", "Turbo C", "Visual Basic"];
var page = WinJS.UI.Pages.define("/html/S1-SearchBoxWithSuggestions.html", {
    ready: function (element, options) {
      var searchBox = document.getElementById("searchBox");
      searchBox.addEventListener("suggestionsrequested",
        suggestionsRequestedHandler);
      searchBox.addEventListener("querysubmitted", querySubmittedHandler);
      searchBox.winControl.focusOnKeyboardInput = true;
    }
  });
function suggestionsRequestedHandler(eventObject) {
    var queryText = eventObject.detail.queryText,
      query = queryText.toLowerCase(),
      suggestionCollection = eventObject.detail.searchSuggestionCollection;
    if (queryText.length > 0) {
      for (var i = 0, len = suggestionList.length; i < len; i++) {
        if (suggestionList[i].substr(0, query.length).toLowerCase() === query) {
          suggestionCollection.appendQuerySuggestion(suggestionList[i]);
        }
      }
    }
  }
function querySubmittedHandler(eventObject) {
    var queryText = eventObject.detail.queryText;
    WinJS.log && WinJS.log(queryText, "sample", "status");
  }
})();

图 3 显示的任何运行时结果图 1 或图 2。

图 3 台下与查询和结果的建议

注意到在台下图 3 显示筛选的建议基于用户的输入。这是一个伟大的功能。幸运的是，它是搜索框内键入控件为您自动完成 XAML 或 HTML 中的东西。然而，你必须自己来执行实际的搜索中查询提交事件。这意味着它是您要读取的文件、访问数据库和 Web 服务或 Web 搜索。

当您将项目附加到 SuggestionCollection 时，AppendResultSuggestion 方法允许您供应比 AppendQuerySuggestion 方法的详细信息。通过在文本、说明、图像和替代文本，将列表中的项目中的代码作为应用图 4 揭示了。图 5 说明了运行时的屏幕截图中的代码图 4 将创建。

图 4 的代码，以将图像添加到建议

private void SearchBoxEventsSuggestionsRequested(object sender,
  SearchBoxSuggestionsRequestedEventArgs e)
{
  string queryText = e.QueryText;
  if (!string.IsNullOrEmpty(queryText))
  {
    Windows.ApplicationModel.
      Search.SearchSuggestionCollection suggestionCollection =
      e.Request.SearchSuggestionCollection;
    int n = 0;
    foreach (string suggestion in suggestionList)
    {
      if (suggestion.StartsWith(queryText,
        StringComparison.CurrentCultureIgnoreCase))
      {
        Uri uri = new Uri("ms-appx:///Assets/laptop.png");
        RandomAccessStreamReference imageSource =
          RandomAccessStreamReference.CreateFromUri(uri);
        suggestionCollection.AppendResultSuggestion(
          suggestion, "", n.ToString(), imageSource, suggestion);
      }
    }
  }

图 5 搜索结果建议与图像

传递给 AppendResultSuggestions 类的图像参数是 IRandomAccessStreamReference 类型从 Windows.Stor年龄。溪流命名空间。如果您使用 JavaScript，必须创建一个使用相同的 CreateFromUri 方法的 Uri。这是对比与 src 属性在 HTML 中设置图像的惯常方式。

在这一点上，你有搜索框内键入工作和建议的文本和图像。下一步是显示搜索结果。在 XAML 和 HTML，您可以添加预定义的搜索结果页面用来显示和相互作用的结果。Visual Studio 提供页面模板（含代码显示搜索结果的筛选列表与您提供的数据。由于这些页面是可自定义，您可以显示结果如何你想要。

当您在 Visual Studio 中的新文件对话框中添加了 SearchResultsPage 时，它创建一个页与列表视图用于显示搜索结果。有关使用列表视图的详细信息，请参阅我 2013 年 12 月的专栏文章，"一切你需要到知道关于 ListView 控件"（msdn.microsoft.com/magazine/dn532209)。当然，它不是强制您使用的搜索结果页面模板 — — 可以在用户界面中，道理的是最容易为用户在任何地方纳入搜索结果。当你这样做时，请确保您首先签出用户体验指南。

搜索用户体验指南

如果用户找不到任何东西，或有困难寻找，他会更倾向于增长率您的应用程序存储区中的不佳。更糟糕的是当用户不会买你的应用程序，因为搜索试用版中的不起作用。

因为搜索是一个常用的功能，花时间去都支付权利和审判程序。这里有一些关于如何在您的应用程序中执行搜索和提高这些评级的建议：

如果搜索是您的应用程序频繁使用的功能，把它的用户可以立即找到并使用它。
帮助用户提供查询和结果的建议。用户依赖，很快整个应用程序中导航和执行行动的建议。
显示结果，所以他们很容易脱脂。聚合信息是您和用户的朋友。搜索点是向用户显示信息，以便他们能够做出选择是追求什么细节。
确保搜索框中的触摸键盘，随着物理键盘。
支持在您的应用程序（仅限 Windows）中查找文本的键盘快捷方式 Ctrl + F。

很多这些观点是审美的性质。如果有的话，Windows 用户体验指南宁可呈现更少但更重要的信息段。用户应该能够从搜索结果通过后退按钮导航回到他原来的位置。要赶上或刷新你的知识，在 Windows 应用商店应用程序中导航，请阅读我的 2013 年 8 月专栏，"导航要素在 Windows 应用商店应用程序"(msdn.microsoft.com/magazine/dn342878)。

你总是应该提供搜索建议，尤其是在电话上。没有用户想要输入一个搜索查询和中得到进一步的帮助。它也是很难在小型设备上键入快速、准确。手机用户有的投入较少的或受限制的方法。不得不敲出整个单词只是使您的应用程序更难使用，让用户感到沮丧。

寻找结论

正如你所看到的执行一个令人愉快的搜索体验是容易做到的 Windows 应用商店和 Windows Phone 存储的应用程序。添加搜索功能不仅可以使您的应用程序更健壮，但它为用户提供易于访问重要和最常用的功能。在保持介意你可以搜索全局和本地数据。

别忘了检讨和遵循的准则，概述在这篇文章和微软在描述的 bit.ly/1BQ5fGZ 在您的应用程序中执行搜索时。

Rachel Appel 是 20 多年的经验，在 IT 行业顾问、作者、导师和前微软员工。她说话等视觉工作室住一流的行业会议上!，DevConnections，混合和更多。她的专长在于内开发对齐业务和技术集中在微软开发堆栈上，打开 Web 的解决方案。阿佩尔的更多信息，请访问她的网址 rachelappel.com。

衷心感谢以下 Microsoft 技术专家对本文的审阅：弗兰克 La 墓葬

通过