Dieser Artikel wurde maschinell übersetzt.

Moderne Apps

Implementieren der Suche in Windows Store- und Windows Phone Store-Apps

Rachel Appel

Suche ist fester Bestandteil unseres digitalen Lebens. Millionen von Menschen nutzen Websites wie Bing und Google Informationen jeden Tag zu finden. Millionen suchen mehr über Web, apps und vertraulichen Daten speichert gleichermaßen. Da Suche ist wohl die am häufigsten verwendeten digitale Funktion, kluger Schachzug ist, damit die Benutzer, die mehr einfach suchen mit Ihren Anwendungen.

Wie erleichtert Windows Search

Aufgrund der physischen Form-Faktor-Unterschiede von PCs, Tablets und Laptops bieten die Windows-Betriebssysteme Suche UIs, die sich entsprechend verhalten. Beispielsweise verwendet Windows Phone 8.1 Cortana um zu suchen (Lesen Sie mehr über Cortana auf bit.ly/1nFGMxG). Apps können eine benutzerdefinierte Suche aus in ein Windows Phone Store-app mit oder ohne Cortana durchführen. Windows Phone-Geräte haben eine spezielle Taste für die Suche befindet sich auf unten rechts auf das Telefon selbst, neben den Fenstern (Mitte) und zurück (links) Buttons.

Eine Reihe von Dingen Suche mit Windows 8 aufrufen kann. Der einfachste Weg ist dem nur Start eingeben, während Sie auf dem Windows-Start-Bildschirm sind. Das startet die globale Suche über das Gerät und das Internet. Mit einem Schlag-Touch-Gesten ist eine weitere Möglichkeit zur Suche nach Touch-fähigen Geräte aufrufen. Sie könnte auch Marmelade die Maus in die Ecken oben rechts oder unten rechts des Bildschirms, um die Suche zu starten.

Schließlich, wenn Sie leben und von Tastenkombinationen sterben, können Sie auch Windows + S zum Anzeigen des Windows-Suche-Charme. Ikonographie muss nicht durch Formfaktoren zu ändern. Wenn ein Benutzer eine Lupe sieht, weiß er, dass es immer Suche bedeutet.

Microsoft empfiehlt die Verwendung des Steuerelements SearchBox obwohl es gut zu den Suche-Charme (auch genannt einen Search-Vertrag) aus Gründen der Abwärtskompatibilität zu bedienen ist. Lesen Sie mehr darüber auf bit.ly/1xkqwXN. Wenn das SearchBox-Steuerelement verwenden, können fügen Sie es Ihrer app Leinwand oder in der app-Leiste anzeigen. Wenn die Suche eine der primären Methoden zur Interaktion mit Ihrer app ist, empfiehlt es sich, es konsequent in die app UI zu präsentieren.

Eine gute Lage ist überall leicht auf die app-Leinwand, in der Regel der oberen rechten Ecke entdeckt. Apps, die sich mit Nachrichten, Filme, Sport, wissenschaftliche Arbeiten und Finanzberichte sind gute Beispiele für Anwendungen, die ein prominenter Suchfeld benötigen. Benutzer mögen manchmal träge durchsuchen, aber öfter sie wissen was sie wollen und es vorziehen, über die Suchfunktion direkt zu navigieren.

Sie könnten mit ein Suchfeld Aufnahme zuviel Bildschirmimmobilien betroffen sein. Das ist eine berechtigte Sorge. Mit einer aufschlussreichen Symbol Suche ist eine Möglichkeit, eine kleine aber deutliche Sichtsuche Indikator zu zeigen. Nachdem ein Benutzer klickt oder Hähne auf die Offenbarung Glyph suchen, offenbart sich die SearchBox, damit sie eine Zeichenfolge und Ansicht Suchergebnisse eingeben können.

Die SearchBox können Daten lokal oder global zu finden. Wie zu erwarten, sind globale suchen, wenn Ihre app Zugriff auf Daten außerhalb der app selbst ist. Dies kann auf einem Wechselmedium, Netzwerk oder das Internet sein. Wenn Sie die Suche durch Dateien wie Musik oder Bilder auf dem Gerät zu tun, vergessen Sie nicht, die Funktionen des Programms Manifest festgelegt.

Suche mit dem SearchBox-Steuerelement implementieren

Suchfelder können Sie in Ihre Anwendungen mit XAML oder HTML für Windows Informationsspeicher und Windows Phone-Anwendungen einbinden. Die Steuerelemente und die API-Aufrufe funktionieren konzeptionell sprachübergreifend, aber natürlich mit unterschiedlichen Syntax. Codierung suchen den Suche-Charme ist auch ungefähr das gleiche Komplexität angeht. Der Code muss die gleichen grundlegenden Schritte ausführen, und die gleichen UX-Richtlinien gelten, unabhängig von der Sprache.

Abbildung 1 zeigt ein XAML-SearchBox. Sie können dieses innerhalb jedes Containersteuerelement z. B. ein StackPanel-Steuerelement einfügen. Genau wie bei anderen Steuerelementen müssen Sie Ereignisse verbinden, die als Reaktion auf den Aufruf Suche Benutzer ausgelöst. Wenn Sie das Steuerelement SearchBox verwenden, gibt es keine Notwendigkeit, das Suchsymbol legen. Sie wollen wahrscheinlich die FocusOnKeyboardInput auf True festgelegt. Durch den Benutzer starten Sie einfach die Eingabe, um die SearchBox Fokuskontrolle verleihen die für eine einfachere Suche Erfahrung macht.

Abbildung 1 die SearchBox mit Vorschlägen, die mithilfe von XAML und 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);
  }
}

In XAML sind die SearchBoxEventsSuggestionsRequested und SearchBoxEventsQuerySubmitted-Ereignisse der zwei primäre Ereignis-Draht-Ups, die Sie benötigen. SearchBoxEventsSuggestionsRequested wird ausgelöst, einmal für jede Tastatureingabe eingegeben um die Tastatureingaben in Echtzeit zu erfassen. Wie der Name andeutet, SearchBoxEventsQuerySubmitted geschieht, wenn der Benutzer die EINGABETASTE drückt, klickt, auf das Suchsymbol tappt oder andernfalls eine Suche löst. Das SearchBoxEventsQuerySubmitted-Ereignis ist, wo Sie Code zum Ausführen der der eigentlichen Suche hinzufügen. Abbildung 1 zeigt beide Ereignisse in Aktion.

In c# ist das erste, was, das Sie tun müssen, geben Sie eine Liste der verwendeten Suchzeichenfolgen als Anregungen verwenden. Abbildung 1 zeigt ein Array von Zeichenfolgen, die mit dem Namen SuggestionList. Die Liste enthält die Namen der Programmiersprachen. Der Code in Abbildung 1 veranschaulicht eine Suche-Implementierung mit der SearchSuggestionCollection. Wenn die SearchBoxEventsSuggestions­ersuchte-Ereignis ausgelöst, das Argument mit dem Namen "e" enthält die SearchSuggestionCollection, Sie können Anfügeabfragen. Dies spiegelt sich Abbildung 1 wann die SuggestionCollection-Variable deklariert und eingestellt.

Sie können Abfragen an den SearchSuggestionCollection über die Methoden AppendQuerySuggestion, AppendQuerySuggestions, AppendSearchSuggestion oder AppendResultSuggestion anhängen. Ergebnis-Vorschläge in der gleichen Liste als Abfrage Vorschläge angezeigt, aber sie können Sie zusätzliche Daten z. B. ein Bild in der SearchBox übergeben.

Während XAML die Vorstellung einer Ressource um Formate und ästhetische Funktionen festzulegen hat, verwendet HTML CSS für diese Aufgaben. Als Beispiel weil die <Div> Element im Abbildung 2 enthält keinen Hinweis Formatvorlagen, wird es die Standard-Windows-Library für JavaScript (WinJS)-.win-Searchbox-Klasse, die Bestandteil des WinJS-Basis-CSS verwenden.

Abbildung 2 die SearchBox mit Vorschlägen, die mit HTML und 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");
  }
})();

Abbildung 3 zeigt die Common Language Runtime-Ergebnisse der beiden Abbildung 1 oder Abbildung 2.

Abbildung 3 SearchBoxes mit Abfrage und Ergebnis-Vorschläge

Beachten Sie die SearchBoxes in Abbildung 3 Zeige gefilterten Vorschläge basierend auf was der Benutzer eingibt. Dies ist ein großartiges Feature. Glücklicherweise ist es etwas, was das SearchBox-Steuerelement automatisch für Sie in XAML oder HTML tut. Jedoch müssen Sie die eigentliche Suche selbst in die Abfrage-Vorlage-Veranstaltung durchführen. Das heißt, es liegt an Ihnen, Dateien lesen, die Datenbanken und Webdienste zugreifen oder Durchsuchen Sie das Web.

Wenn Sie Elemente an die SuggestionCollection anfügen, können Sie die AppendResultSuggestion-Methode mehr Informationen als die AppendQuerySuggestion-Methode geben. Übergeben Sie den Text, Beschreibung, Bild und Alternativtext zuweisen Elemente in der Liste, wie der Code in Abbildung 4 offenbart. Abbildung 5 zeigt dem Common Language Runtime-Screenshot der Code in Abbildung 4 erstellt.

Abbildung 4-Code Vorschläge Bilder hinzu

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);
      }
    }
  }

Abbildung 5 SearchBox mit Ergebnis-Vorschläge und Bilder

Bild an der übergebene Argument der AppendResultSuggestions-Klasse ist ein IRandomAccessStreamReference Typ von der Windows.Stor­Alter.Streams-Namespace. Wenn Sie JavaScript verwenden, müssen Sie einen Uri mit der gleichen CreateFromUri-Methode zu erstellen. Dies steht im Gegensatz zu der üblichen Art und Weise ein Bild in HTML mit dem Src-Attribut festlegen.

Zu diesem Zeitpunkt haben Sie eine funktionierende SearchBox und Anregungen mit Text und Bildern. Der nächste Schritt ist, um die Suchergebnisse anzuzeigen. In XAML und HTML können Sie eine vordefinierte Suchergebnisseite für die Anzeige und Interaktion mit den Ergebnissen hinzufügen. Visual Studio zufolge Seitenvorlagen mit Code zeigt Ergebnisse mit einer gefilterten Liste von Daten suchen, die Sie bereitstellen. Da diese Seiten angepasst werden, zeigen die Ergebnisse Ihnen genau, wie Sie wollen.

Wenn Sie eine SearchResultsPage aus dem neuen Datei-Dialog in Visual Studiohinzufügen, erstellt es eine Seite mit ein ListView-Steuerelement für die Anzeige der Suchergebnisse. Weitere Informationen zur Verwendung der ListView, finden Sie unter meinem Artikel vom Dezember 2013, "Alles Sie brauchen an Wissen über das ListView Steuerelement" (msdn.microsoft.com/magazine/dn532209). Natürlich ist es nicht zwingend, Sie verwenden die Suche Ergebnisse Seitenvorlage — Sie können Suchergebnisse an einer beliebigen Stelle in der Benutzeroberfläche, die macht Sinn und ist für den Benutzer am einfachsten integrieren. Wenn Sie tun, stellen Sie sicher, dass Sie zunächst die UX-Leitlinien überprüfen.

Suche UX Guidelines

Wenn der Benutzer niemals irgendetwas finden kann oder hat Schwierigkeiten zu suchen, wird er eher geneigt, Ihre app schlecht im Speicher zu bewerten sein. Noch schlimmer ist, wenn ein Benutzer Ihre Anwendung Familienglück nicht akzeptiert, weil Suche in der Demo-Version nicht funktioniert.

Da Suche solche eine häufig verwendete Funktion ist, nehmen Sie sich Zeit um es zu Recht in beiden bezahlt und trial apps bekommen. Hier sind einige Vorschläge zur Suche in Ihren Anwendungen zu implementieren und die Bewertungen zu erhöhen:

• Wenn die Suche eine häufig verwendete Funktion Ihrer APP ist, platzieren sie wo Benutzer können sofort finden und verwenden.
• Helfen Sie Benutzer mit Abfrage und Ergebnis-Vorschläge. Anwender verlassen sich auf Vorschläge zum schnellen Navigieren in die app und Aktionen.
• Zeigen Sie Ergebnisse an, so dass sie leicht zu überfliegen. Gesamtinformation ist der Freund von dir und dem Benutzer. Die Suche ist, Informationen an Benutzer zu präsentieren, so können sie entscheiden, welche Details zu verfolgen.
• Stellen Sie sicher, dass das Suchfeld mit einer Touch-Tastatur als auch physischen Tastaturen funktioniert.
• Unterstützen Sie STRG + F, als die Tastenkombination zum Suchen von Text in Ihrer Anwendung (nur Windows).

Viele dieser Punkte sind ästhetischer Natur. Wenn überhaupt, äh Windows UX Leitlinien auf der Seite weniger, dafür aber umso wichtiger Stücke von Informationen präsentieren.  Ein Benutzer sollte in der Lage, zurück zu seiner vorherigen Position in den Suchergebnissen durch eine Schaltfläche "zurück" zu navigieren. Um aufzuholen oder Ihr Wissen über Navigation im Windows Store apps zu aktualisieren, lesen Sie meine August 2013 Spalte, "Navigation Essentials in Windows Store Apps" (msdn.microsoft.com/magazine/dn342878).

Sie sollten immer Suchvorschläge, besonders am Telefon bereitstellen. Kein Benutzer will geben eine Suchanfrage und keine weitere Hilfe zu erhalten. Es ist auch viel schwieriger zu schnell und richtig auf kleinen Geräten geben. Handy-Nutzer verfügen über weniger oder eingeschränkten Methoden der Eingabe. Müssend nur ganze Wörter tippen erschwert Ihre app zu verwenden und den Benutzer frustriert.

Suche nach Abschluss

Wie Sie sehen können, ist die Umsetzung ein angenehmes Sucherlebnis einfach für Windows Speicher und Windows Phone Store apps zu tun. Hinzufügen von Suchfunktionen macht nicht nur Ihre Anwendung robuster, aber es bietet einfachen Zugriff auf eine wichtige und häufig verwendete Funktion. Denken Sie können wohlgemerkt globale und lokale Daten suchen.

Don' t vergessen, lesen und befolgen die Richtlinien in diesem Artikel und Microsoft beschreibt, bei denen bit.ly/1BQ5fGZ beim Suchen in Ihrer Anwendung zu implementieren.

---

Rachel Appel ist ein Berater, Autor, Mentor und ehemaligen Microsoft-Mitarbeiter mit mehr als 20 Jahre Erfahrung in der IT-Branche. Sie spricht auf Top Branchenkonferenzen wie Visual Studio Live!, DevConnections, MIX und vieles mehr. Ihre Expertise liegt im Entwickeln von Lösungen, die Business und Technologie konzentriert sich auf die Microsoft-Dev-Stapel ausrichten und Web öffnen. Weitere Informationen über Appel, ihre Website unter rachelappel.com.

Unser Dank gilt dem folgenden technischen Experten von Microsoft für die Durchsicht dieses Artikels: Frank La Vigne