現代化應用程式

對 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 存儲的應用程式。添加搜索功能不僅可以使您的應用程式更健壯，但它為使用者提供易於訪問重要和最常用的功能。在保持介意你可以搜索全域和本地資料。

Don忘了審查，並遵循的準則，概述在這篇文章和微軟在描述的 bit.ly/1BQ5fGZ 在您的應用程式中執行搜索時。

Rachel Appel 是 20 多年的經驗，在 IT 行業顧問、作者、導師和前微軟員工。她說話在一流的行業會議，如Visual Studio活！，DevConnections，混合和更多。她的專長在於內開發對齊業務和技術集中在微軟開發堆疊上，打開 Web 的解決方案。阿佩爾的更多資訊，請訪問她的網址 rachelappel.com。

感謝以下的微軟技術專家對本文的審閱：FrankLa 墓葬