Windows Dev Center

Language: HTML | XAML

Schnellstart: Hinzufügen von Suchfunktionen zu einer App (XAML)

Die meisten Benutzer verwenden die Suchfunktion, wenn sie etwas suchen. Wenn mit der App beispielsweise Mediendateien wiedergegeben werden, erwarten Benutzer, dass sie nach einem bestimmten Song oder Video suchen können. Bei einer Koch-App wird erwartet, dass nach bestimmten Rezepten oder Zutaten gesucht werden kann.

Mit etwas Planung ist es nicht schwierig, der App die Suchfunktion hinzuzufügen. Sie benötigen Folgendes:

  • Eine zu durchsuchende Datenquelle: Sie benötigen einen Katalog oder Bestand von Elementen, nach denen Benutzer suchen können. Je aussagekräftiger Sie diesen Bestand gestalten, desto bessere Suchergebnisse ergeben sich.
  • Ein Steuerelement zur Eingabe von Suchabfragen: Windows verfügt über ein SearchBox-Steuerelement, das von der App verwendet werden kann. Das SearchBox-Steuerelement bietet einen Eingabebereich zum Eingeben von Abfragen, eine Suchschaltfläche zum Ausführen der Suche und Ereignisse zum Behandeln von Suchabfragen. Außerdem werden automatisch einige Suchvorschläge bereitgestellt.
  • Eine Seite zum Anzeigen von Suchergebnissen. In Microsoft Visual Studio wird die Vorlage Suchergebnisseite bereitgestellt, mit der Sie einen Großteil des Codes erstellen können, den Sie zum Behandeln von Suchabfragen und Anzeigen von Ergebnissen benötigen.

In dieser Schnellstartanleitung erfahren Sie, wie Sie diese Elemente verwenden, um der App Suchfunktionen hinzuzufügen.

In unserer Serie App-Features von A bis Z können Sie dieses Feature in Aktion sehen.:  Windows Store-App-Benutzeroberfläche von A bis Z.

Voraussetzungen

Einrichten der Daten

Wenn Benutzer eine Suchabfrage eingeben, sucht die App nach Elementen, die für Benutzer ggf. interessant sind. Die von der App durchsuchten Daten können unterschiedlicher Art sein: eine XML-Datei, JavaScript Object Notation (JSON)-Daten, eine Datenbank, ein Webdienst oder Dateien im Dateisystem.

In den Beispielen dieser Schnellstartanleitung werden die Beispieldaten verwendet, die beim Erstellen eines neuen Projekts in Microsoft Visual Studio bereitgestellt werden.

Wenn Sie Visual Studio zum Erstellen einer neuen Grid-App, Hub-App oder Split-App verwenden, wird ein Ordner mit dem Namen DataModel erstellt. Dieser Ordner enthält eine JSON-Datei mit Beispieldaten und eine Codedatei mit Objekten zum Zugreifen auf die JSON-Daten.

Beispieldaten in einem neuen Hub-App-Projekt

Die Codedateien definieren drei Klassen:

  • SampleDataItem: Individuelles Datenelement.
  • SampleDataGroup: Gruppe von SampleDataItem-Objekten.
  • SampleDataSource: Eine Auflistung von SampleDataGroup-Objekten.

Die eigentlichen Daten sind in der JSON-Datei definiert und nach Gruppen und Elementen unterteilt. Hier ist ein Beispiel für die Daten angegeben:


{"Groups":[
  {
    "UniqueId": "Group-1",
    "Title": "Group Title: 1",
    "Subtitle": "Group subtitle: 1",
    "ImagePath": "Assets/DarkGray.png",
    "Description" : "Group Description: Lorem ipsum dolor sit amet...",
    "Items":
    [
      {
        "UniqueId": "Group-1-Item-1",
        "Title": "Item Title: 1",
        "Subtitle": "Item Subtitle: 1",
        "ImagePath": "Assets/LightGray.png",
        "Description" : "Item Description: Pellentesque porta, mauris... neque tortor ac erat.",
        "Content" : "Curabitur class..."
      },
      {
        "UniqueId": "Group-1-Item-2",
        "Title": "Item Title: 2",
        "Subtitle": "Item Subtitle: 2",
        "ImagePath": "Assets/DarkGray.png",
        "Description" : "Item Description: Pellentesque porta, mauris... neque tortor ac erat.",
        "Content" : "Curabitur class..."
      },

(Weitere Informationen zum Umgang mit Daten finden Sie unter Hinzufügen von Daten zu einer Projektvorlage.)

Sie möchten beim Implementieren der Suche in der App natürlich Ihre eigenen Daten nutzen. Die Erstellung einer ersten Version, für die diese Beispieldaten verwendet werden, kann aber hilfreich sein, um sich mit der Suche vertraut zu machen. Außerdem erhalten Sie vielleicht einige Ideen in Bezug auf die Strukturierung Ihrer eigenen Daten, damit diese gut durchsucht werden können.

Hinzufügen einer Suchergebnisseite

Auf der Suchergebnisseite werden Suchabfragen verarbeitet und die Ergebnisse angezeigt. Wir fügen Ihrem Projekt nun solch eine Seite hinzu.

Hh868180.wedge(de-de,WIN.10).gifHinzufügen des Elements "Suchergebnisseite"

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektknoten, um das Kontextmenü zu öffnen, und klicken Sie dann auf Hinzufügen > Neues Element. Das Dialogfeld Neues Element hinzufügen wird geöffnet.
  2. Klicken Sie im mittleren Bereich des Dialogfelds Neues Element hinzufügen auf Suchergebnisseite. Ändern Sie den Namen für dieses Beispiel in SearchResultsPageExample.xaml.
  3. Klicken Sie auf die Schaltfläche Hinzufügen. (Unter Umständen wird eine Benachrichtigung angezeigt, dass Visual Studio einige Dateien hinzufügen muss. Klicken Sie auf Ja, um dem automatischen Hinzufügen zuzustimmen.)

Visual Studio erstellt die Datei SearchResultsPageExample.xaml und die zugehörige CodeBehind-Datei SearchResultsPageExample.xaml.cs.

Sehen wir uns die Datei SearchResultsPageExample.xaml einmal näher an. Dies sind einige wichtige Elemente, die darin enthalten sind:

  • resultsViewSource, eine CollectionViewSource-Ressource, deren Source-Element an die "Results"-Eigenschaft von DefaultViewModel gebunden ist. (DefaultViewModel ist auf jeder Seite definiert. Weitere Informationen finden Sie unter Hinzufügen von Daten zu einer Projektvorlage.) Zum Anzeigen der Ergebnisse legen wir DefaultViewModel["Results"] auf eine Liste fest, die die Ergebnisse enthält.
  • filtersViewSource, eine CollectionViewSource-Ressource, deren Source-Element an die "Filters"-Eigenschaft von DefaultViewModel gebunden ist.
  • filtersItemsControl, ein ItemsControl-Element, das an filtersViewSource gebunden ist. Dieses ItemsControl-Element zeigt Ihre Suchfilter an.
  • resultsGridView, ein GridView-Element, das an resultsViewSource gebunden ist. Dieses GridView-Element zeigt Ihre Suchergebnisse an.
  • Ein VisualStateManager-Element mit zwei VisualState-Definitionen: eine für "ResultsFound" und eine für "NoResultsFound". Wenn der Ansichtszustand auf "NoResultsFound" festgelegt ist, blendet VisualStateManager das resultsGridView-Steuerelement aus und zeigt stattdessen den Text "Es stimmen keine Suchergebnisse mit Ihrer Suche überein." an.

Die Datei SearchResultsPageExample.xaml.cs enthält zwei Methoden, die wir ändern: navigationHelper_LoadState und Filter_Checked.

Hinzufügen eines SearchBox-Steuerelements

Für die Suchergebnisseite sind noch weitere Schritte erforderlich, aber zuerst fügen wir der App ein SearchBox-Steuerelement hinzu. Die Nutzung eines SearchBox-Steuerelements erleichtert das Testen der Suchergebnisseite während der Implementierung.

Mit einem SearchBox-Steuerelement können Benutzer Abfragen eingeben. Es kann auch Vorschläge anzeigen.

Fügen Sie einer XAML-Seite zum Hinzufügen eines SearchBox-Steuerelements zur App einfach diesen Markupcode hinzu:


<SearchBox
    Height="35" Width="270"
    Margin="0, 25, 25, 0" />

(Sie müssen Height, Width und Margin nicht auf diese Werte festlegen, aber diese Einstellungen sind für die meisten Apps gut geeignet.)

Wo sollte das Suchfeld platziert werden? Wir empfehlen Ihnen, auf jeder Seite der App ein Suchfeld anzuordnen, damit Benutzer jederzeit leicht eine Suche durchführen können. Falls der Platz knapp ist, können Sie das Suchfeld in eine App-Leiste am oberen Bildschirmrand einfügen.

Die beste Position für das SearchBox-Steuerelement ist in der Regel die obere rechte Ecke der Seite. Die meisten Seiten, die Sie aus einer Visual Studio-Vorlage erstellen (z. B. aus der Vorlage Standardseite), enthalten ein Grid-Element mit dem Seitentitel und einer Schaltfläche "Zurück":


<!-- Back button and page title -->
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="120"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="backButton" Margin="39,59,39,0" 
                Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                Style="{StaticResource NavigationBackButtonNormalStyle}"
                VerticalAlignment="Top"
                AutomationProperties.Name="Back"
                AutomationProperties.AutomationId="BackButton"
                AutomationProperties.ItemType="Navigation Button"/>
    <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                IsHitTestVisible="false" TextWrapping="NoWrap" 
                VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>

Fügen Sie dem Grid-Steuerelement eine dritte Spalte hinzu, legen Sie Width auf Auto fest, fügen Sie Ihr SearchBox-Steuerelement hinzu, und legen Sie dessen Grid.Column-Element auf "2" fest:


<!-- Back button and page title -->
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="120"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="backButton" Margin="39,59,39,0" 
                Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                Style="{StaticResource NavigationBackButtonNormalStyle}"
                VerticalAlignment="Top"
                AutomationProperties.Name="Back"
                AutomationProperties.AutomationId="BackButton"
                AutomationProperties.ItemType="Navigation Button"/>
    <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                IsHitTestVisible="false" TextWrapping="NoWrap" 
                VerticalAlignment="Bottom" Margin="0,0,30,40"/>
    <SearchBox
        Grid.Column="2"
        Height="35" Width="270"  Margin="0,25,25,0" />
</Grid>

Standardseite mit SearchBox

In den Beispielen dieser Schnellstartanleitung wird die Vorlage "Hub-App" verwendet. Als Nächstes sehen wir uns das Hinzufügen eines SearchBox-Elements zu einer Hubseite genauer an.

Hh868180.wedge(de-de,WIN.10).gifHinzufügen eines SearchBox-Steuerelements zu einer Hubseite

  1. Öffnen Sie die XAML-Datei für Ihre Hubseite, und navigieren Sie zu dem Markupcode, der das Hub-Steuerelement definiert (diese Seite hat normalerweise den Namen HubPage.xaml).
  2. Legen Sie HorizontalContentAlignment für das Hub-Steuerelement auf Stretch fest.
    
    <Hub SectionHeaderClick="Hub_SectionHeaderClick" HorizontalContentAlignment="Stretch">
    
    
  3. Im Header des Hub-Steuerelements:

    1. Fügen Sie dem Grid eine dritte Spalte hinzu, und legen Sie Width auf Auto fest.
    2. Fügen Sie ein SearchBox hinzu.

      • Legen Sie die Grid.Column-Eigenschaft des SearchBox auf "2" fest.
      • Geben Sie ihm einen Namen. In diesem Beispiel wird "mySearchBox" verwendet.
      • Legen Sie die Height auf 35 Pixel und die Width auf 200 Pixel fest.
      • Legen Sie den PlaceholderText auf "Search" fest.
      • Legen Sie das QuerySubmitted-Ereignis auf "SearchBox_QuerySubmitted" fest.
    
    
                <Hub.Header>
                    <!-- Back button and page title -->
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Button  x:Name="backButton" Style="{StaticResource NavigationBackButtonNormalStyle}"
                            Margin="-1,-1,39,0" 
                            VerticalAlignment="Top"
                            Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                            AutomationProperties.Name="Back"
                            AutomationProperties.AutomationId="BackButton"
                            AutomationProperties.ItemType="Navigation Button"/>
                        <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                            VerticalAlignment="Top" IsHitTestVisible="false" TextWrapping="NoWrap" />
                        <SearchBox
                            x:Name="mySearchBox"
                            Grid.Column="2"
                            Height="35" Width="270"
                            PlaceholderText="Search" 
                            QuerySubmitted="SearchBox_QuerySubmitted"/>
                    </Grid>
                </Hub.Header>
    
    

Hh868180.wedge(de-de,WIN.10).gifBehandeln des QuerySubmitted-Ereignisses

  1. Öffnen Sie die CodeBehind-Datei (HubPage.xaml.cs) der Hubseite. Erstellen Sie einen QuerySubmitted-Ereignishandler für das SearchBox-Steuerelement, und geben Sie ihm den Namen SearchBox_QuerySubmitted.
    
            private void SearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
            {
    
            }
    
    
  2. Verwenden Sie den Ereignishandler zum Navigieren zur neuen Suchergebnisseite.
    
            private void SearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
            {
                 this.Frame.Navigate(typeof(SearchResultsPageExample), args.QueryText);
            }
    
    

Die Hubseite sollte wie folgt aussehen:

Hubseite mit SearchBox

Lassen Sie es uns ausprobieren. Geben Sie eine Testabfrage in das SearchBox-Steuerelement ein, und drücken Sie die EINGABETASTE.

Testabfrage

Der QuerySubmitted-Ereignishandler, den Sie geschrieben haben, navigiert zur Suchergebnisseite und übergibt die von Ihnen eingegebene Abfrage.

Ergebnisse der Testabfrage

Es werden keine Suchergebnisse angezeigt, aber unsere Suchergebnisseite funktioniert. Mit den nächsten Schritten aktualisieren wir die Seite, damit die Daten auch tatsächlich nach Treffern durchsucht werden. Vorher wechseln wir aber zurück zum Suchfeld und geben die Abfrage erneut ein. Bevor Sie die zweite Eingabe der Abfrage beendet haben, müsste diese als Vorschlag angezeigt werden:

Testabfrage

Eines der nützlichen Features des SearchBox-Steuerelements ist die automatische Verwendung des Suchverlaufs zur Bereitstellung von Vorschlägen. In einem späteren Schritt erhalten Sie weitere Informationen zur Anpassung der Vorschläge.

Durchsuchen der Daten

Nun wechseln wir zurück auf die Suchergebnisseite. Auf der Suchergebnisseite werden Suchabfragen verarbeitet und die Ergebnisse angezeigt. In diesem Schritt schreiben Sie Code zur Verarbeitung eingehender Abfragen und Vorbereitung einer Liste mit Ergebnissen.

Hh868180.wedge(de-de,WIN.10).gifImportieren der Daten und Definieren der Suchergebnisse

  1. Öffnen Sie die Datei SearchResultsPageExample.xaml.cs. Dies ist die CodeBehind-Datei für die Suchergebnisseite.
  2. Fügen Sie oben auf der Seite einen Verweis auf Ihre Datenklassen hinzu. Wie bereits erwähnt, werden in den Beispielen die Beispieldaten genutzt, die von Visual Studio beim Erstellen einer neuen App bereitgestellt werden. Diese Klassen gehören dem <ApplicationNamespace>.Data-Namespace an.
    
    
    // Change this to <YourApplicationNamespace>.Data
    using SearchBoxAndPageExample.Data;
    
    
    
  3. Erstellen Sie in der SearchResultsPageExample-Klasse eine Eigenschaft zum Speichern und Anzeigen von Ergebnissen. In diesem Beispiel wird ein Dictionary-Element zum Speichern der Ergebnisse verwendet.
    
    public Dictionary<String, IEnumerable<SampleDataItem>> AllResultsCollection { get; set; }
    
    
    

Wenn die App auf die Suchergebnisseite navigiert, wird die navigationHelper_LoadState-Methode der Seite aufgerufen. Diese Methode wurde von Visual Studio für Sie erstellt. Zu diesem Zeitpunkt bewirkt der Code noch nicht viel. In den nächsten Schritten ersetzen Sie ihn durch Ihren eigenen Code zum Durchsuchen der Daten.

Hh868180.wedge(de-de,WIN.10).gifImplementieren der Suchlogik

  1. Navigieren Sie in der Datei SearchResultsPageExample.xaml.cs zur navigationHelper_LoadState-Methode, und löschen Sie den darin enthaltenen Code.
  2. Machen Sie die navigationHelper_LoadState-Methode asynchron, indem Sie das Schlüsselwort async hinzufügen.
    
            private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
            {
    
    
  3. Wenn die App zur Suchergebnisseite navigiert, wird die Suchabfrage als Navigationsparameter übergeben. Rufen Sie den Abfragetext aus der NavigationParameter-Eigenschaft des LoadStateEventArgs-Parameters e ab. (Die LoadStateEventArgs-Klasse ist in NavigationHelper.cs definiert. Dies ist eine der Hilfsdateien, die im Projekt enthalten sind, wenn Sie eine Grid-, Hub- oder Split-App erstellen.)
    
    
                var queryText = e.NavigationParameter as String;
    
    
  4. Initialisieren Sie die Ergebnisliste, und erstellen Sie eine Variable zum Nachverfolgen der Gesamtzahl übereinstimmender Elemente.
    
    
                // Initialize the results list.
                AllResultsCollection = new Dictionary<string, IEnumerable<SampleDataItem>>();
    
                // Keep track of the number of matching items. 
                var totalMatchingItems = 0;
    
    
    
  5. Jedes Mal, wenn ein übereinstimmendes Element gefunden wird, fügen wir die Gruppe des übereinstimmenden Elements einer Liste mit Filtern hinzu. Die Vorlage Suchergebnisseite erstellt eine Filter-Klasse für Sie. Als Nächstes erstellen wir ein List-Element mit Filter-Objekten. Wenn wir übereinstimmende Elemente finden, fügen wir die Gruppen dieser Elemente der Filterliste hinzu.
    
    
                var filterList = new List<Filter>();
    
    
    
  6. Danach durchsuchen wir die Daten und speichern die Ergebnisse. Erfassen Sie zuerst alle Gruppen, in denen Ihre Daten enthalten sind.
    
                          
                var groups = await SampleDataSource.GetGroupsAsync();
    
    
    

  7. Erstellen Sie anschließend eine foreach-Schleife zum Durchlaufen der einzelnen Gruppen, damit Sie deren Elemente auf Übereinstimmungen überprüfen können.

    
    
                foreach (var group in groups)
                {
    
    
    
  8. In der foreach-Schleife:

    1. Jede Gruppe in unserer Datenklasse (SampleDataGroup) enthält eine Items-Eigenschaft, die ein ObservableCollection-Element mit SampleDataItem-Objekten zurückgibt. Sie können die Where-Methode verwenden, um diese Auflistung nach Übereinstimmungen zu durchsuchen.

      In diesem Beispiel wird unter Beachtung der Groß-/Kleinschreibung eine Suche nach Elementen durchgeführt, deren Titel den Abfragetext enthält. Die zurückgegebene Auflistung mit den übereinstimmenden Elementen wird in einer Variablen mit dem Namen matchingItems gespeichert. In diesem Beispiel wird nur der Titel jedes Elements überprüft. Es ist auch möglich, weitere Daten wie den Untertitel oder die Beschreibung zu überprüfen.

      
      
      
                      var matchingItems = group.Items.Where(
                          item => 
                              item.Title.IndexOf(
                                  queryText, StringComparison.CurrentCultureIgnoreCase) > -1); 
      
      
      
      

      In diesem Beispiel wird die IndexOf(String, StringComparison)-Methode zum Durchführen des Zeichenfolgenvergleichs verwendet. Wir nutzen diese Überladung, um eine kulturbezogene Suche ohne Berücksichtigung der Groß-/Kleinschreibung bereitstellen zu können. Wenn Sie darauf achten, die Suche kulturbezogen zu gestalten, funktioniert Ihr Code besser für eine größere Zahl von Sprachen.

      Tipp  

      In diesem Beispiel wird nur ein Feld der Daten auf Übereinstimmungen mit der Abfrage überprüft, nämlich das Titelfeld. In einer echten App können auch mehrere Felder nach Übereinstimmungen durchsucht werden, z. B. ein Untertitel oder die Beschreibung.

      Tipp  

      Eine Möglichkeit zur Verbesserung der Benutzerfreundlichkeit ist die Nachverfolgung der Relevanz von Suchanfragen und das Sortieren der Ergebnisse nach Relevanz. Beispielsweise können Sie jedem übereinstimmenden Element je nach Qualität der Übereinstimmung eine bestimmte Anzahl von Punkten zuweisen: 5 Punkte für eine Übereinstimmung im Titelfeld, 2 Punkte für eine Übereinstimmung im Untertitelfeld und 1 Punkt für eine Übereinstimmung im Beschreibungsfeld. Sortieren Sie die Elemente vor dem Präsentieren der Ergebnisse so, dass die Elemente mit der höchsten Punktzahl zuerst angezeigt werden.

    2. Ermitteln Sie, wie viele Übereinstimmungen sich ergeben. Falls Übereinstimmungen vorhanden sind, fügen Sie die übereinstimmenden Elemente der Ergebnisliste und die Gruppe der Filterliste hinzu.

      
      
      
                      int numberOfMatchingItems = matchingItems.Count();
                      totalMatchingItems += numberOfMatchingItems;
                      if (numberOfMatchingItems > 0)
                      {
                          AllResultsCollection.Add(group.Title, matchingItems);
                          filterList.Add(new Filter(group.Title, numberOfMatchingItems));
                      }
                  }
      
      
  9. Die Funktion zum Filtern nach der Gruppe ist nützlich, aber es kann auch sein, dass Benutzer alle Suchergebnisse auf einmal angezeigt bekommen möchten. Fügen Sie am Anfang der Filterliste einen Eintrag für "Alle" hinzu.
    
    
                // Create an entry for "All" for viewing all search results. 
                filterList.Insert(0, new Filter("All", totalMatchingItems, true));
    
    
    
  10. Die Beispielergebnisseite weist eine DefaultViewModel-Eigenschaft auf, die an das DataContext-Standardelement der Seite gebunden ist. DefaultViewModel ist ein Typ von Wörterbuch, das Sie zum Speichern von Objekten verwenden können, die sich auf die UI der Seite auswirken. Verwenden Sie diese Eigenschaft zum Anzeigen von Filtern und der ursprünglichen Abfrage: Legen Sie das "QueryText"-Element des DefaultViewModel-Objekts auf den ursprünglichen Abfragetext fest, legen Sie "Filters" auf Ihr "filterList"-Element fest, und legen Sie "ShowFilters" auf true fest.
    
    
                // Communicate results through the view model
                this.DefaultViewModel["QueryText"] = '\u201c' + queryText + '\u201d';
                this.DefaultViewModel["Filters"] = filterList;
                this.DefaultViewModel["ShowFilters"] = true;
            }
    
    

    Hier ist der vollständige Code für die aktualisierte Methode angegeben:

    
    
            private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
            {
                var queryText = e.NavigationParameter as String;
    
                // Initialize the results list.
                AllResultsCollection = new Dictionary<string, IEnumerable<SampleDataItem>>();
    
                // Keep track of the number of matching items. 
                var totalMatchingItems = 0;
    
                var filterList = new List<Filter>();
    
                var groups = await SampleDataSource.GetGroupsAsync();
                foreach (var group in groups)
                {
                    var matchingItems = group.Items.Where(
                        item => 
                            item.Title.IndexOf(
                                queryText, StringComparison.CurrentCultureIgnoreCase) > -1); 
                    int numberOfMatchingItems = matchingItems.Count();
                    totalMatchingItems += numberOfMatchingItems; 
                    if (numberOfMatchingItems > 0)
                    {
                        AllResultsCollection.Add(group.Title, matchingItems);
                        filterList.Add(new Filter(group.Title, numberOfMatchingItems));
                    }
                }
    
                // Create an entry for "All" for viewing all search results. 
                filterList.Insert(0, new Filter("All", totalMatchingItems, true));
    
                // Communicate results through the view model
                this.DefaultViewModel["QueryText"] = '\"' + queryText + '\"';
                this.DefaultViewModel["Filters"] = filterList;
                this.DefaultViewModel["ShowFilters"] = true;
    
            }
    
    

Führen Sie die App aus, und suchen Sie nach "Item". Die App zeigt die Anzahl der Treffer an, die für jede Gruppe gefunden wurde, aber keine Suchergebnisse:

Suchergebnisse

Anzeigen von Suchergebnissen

Die navigationHelper_LoadState-Methode sucht nach Elementen und speichert die übereinstimmenden Elemente und Filter. Für die eigentliche Anzeige der Ergebnisse ist aber der Filter_Checked-Ereignishandler zuständig. Wenn der Benutzer einen Filter auswählt, werden mit dieser Methode die Ergebnisse angezeigt, die für diesen Filter eine Übereinstimmung ergeben.

Hh868180.wedge(de-de,WIN.10).gifAktualisieren der Filter_Checked-Methode

  1. Navigieren Sie in der CodeBehind-Datei für die Suchergebnisseite zur Filter_Checked-Methode, und löschen Sie den darin enthaltenen Code, der von der Vorlage generiert wurde.
    
            void Filter_Checked(object sender, RoutedEventArgs e)
            {
    
            }
    
    
  2. Die Filterliste besteht aus einer Reihe von Optionsfeldern. Ermitteln Sie, welcher Filter gewählt wurde, indem Sie das DataContext-Element des Optionsfelds abrufen, von dem das Ereignis ausgelöst wurde.

    
    
            void Filter_Checked(object sender, RoutedEventArgs e)
            {
                var filter = (sender as FrameworkElement).DataContext as Filter;
    
    
    
  3. Die Datei SearchResultsPageExample.xaml enthält ein CollectionViewSource-Element mit dem Namen filtersViewSource. Diese Datenquelle ist an unsere Filterliste gebunden. Verwenden Sie die MoveCurrentTo-Methode, um den aktuellen Filter auszuwählen, wenn der Benutzer ein Optionsfeld aktiviert.

    
    
                // Mirror the change into the CollectionViewSource.
                if (filtersViewSource.View != null)
                {
                    filtersViewSource.View.MoveCurrentTo(filter);
                }
    
    
    
  4. Achten Sie darauf, dass der Filter nicht NULL ist, und legen Sie die zugehörige Active-Eigenschaft dann auf true fest. Unsere XAML-Datei bindet den IsChecked-Zustand des Optionsfelds an die Active-Eigenschaft des Filters. Durch das Aktualisieren dieser Eigenschaft wird also sichergestellt, dass die Aktivierung des Optionsfelds angezeigt wird.

    
    
                // Determine which filter was selected
                if (filter != null)
                {
                    // Mirror the results into the corresponding Filter object to allow the
                    // RadioButton representation used when not snapped to reflect the change
                    filter.Active = true;
    
    
    
  5. Mithilfe des Filters bestimmen wir, welche Elemente der Ergebnisauflistung angezeigt werden sollen. Wenn der Filter "all" ausgewählt wurde, werden alle Elemente angezeigt.

    
    
                    if (filter.Name.Equals("All"))
                    {
                        var tempResults = new List<SampleDataItem>();
    
                        // Add the items from each group to the temporary results
                        // list. 
                        foreach (var group in AllResultsCollection)
                        {
                            tempResults.AddRange(group.Value);
                       
                        }
                        // Display the items.
                        this.DefaultViewModel["Results"] = tempResults;
                    }
    
    
    
  6. Andernfalls zeigen wir die Elemente an, die zum gewählten Filter gehören.
    
    
                    else if (AllResultsCollection.ContainsKey(filter.Name))
                    {
                        this.DefaultViewModel["Results"] =
                          new List<SampleDataItem>(AllResultsCollection[filter.Name]);
                    }
    
    
    
  7. Überprüfen Sie, ob auch wirklich Ergebnisse anzuzeigen sind. Wenn ja, ändern wir den Zustand der Seite in den Zustand "ResultsFound". Andernfalls ändern wir den Zustand der Seite in "NoResultsFound".
    
                    // Ensure results are found
                    object results;
                    ICollection resultsCollection;
                    if (this.DefaultViewModel.TryGetValue("Results", out results) &&
                        (resultsCollection = results as ICollection) != null &&
                        resultsCollection.Count != 0)
                    {
                        VisualStateManager.GoToState(this, "ResultsFound", true);
                        return;
                    }
                }
    
                // Display informational text when there are no search results.
                VisualStateManager.GoToState(this, "NoResultsFound", true);
            }
    
    

Hier sehen Sie den vollständigen Code für die Filter_Checked-Methode.


        void Filter_Checked(object sender, RoutedEventArgs e)
        {
            // Retrieve the data context of the sender (the selected radio button).
            // This gives us the selected Filter object. 
            var filter = (sender as FrameworkElement).DataContext as Filter;

            // Mirror the change into the CollectionViewSource.
            // This is most likely not needed.
            if (filtersViewSource.View != null)
            {
                filtersViewSource.View.MoveCurrentTo(filter);
            }

            // Determine which filter was selected
            if (filter != null)
            {
                // Mirror the results into the corresponding Filter object to allow the
                // RadioButton representation used when not snapped to reflect the change
                filter.Active = true;

                // TODO: Respond to the change in active filter by setting this.DefaultViewModel["Results"]
                //       to a collection of items with bindable Image, Title, Subtitle, and Description properties

                if (filter.Name.Equals("All"))
                {
                    var tempResults = new List<SampleDataItem>();

                    // Add the items from each group to the temporary results
                    // list. 
                    foreach (var group in AllResultsCollection)
                    {
                        tempResults.AddRange(group.Value);

                    }

                    // Display the items.
                    this.DefaultViewModel["Results"] = tempResults;
                }
                else if (AllResultsCollection.ContainsKey(filter.Name))
                {
                    this.DefaultViewModel["Results"] =
                      new List<SampleDataItem>(AllResultsCollection[filter.Name]);
                }

                // Ensure results are found
                object results;
                ICollection resultsCollection;
                if (this.DefaultViewModel.TryGetValue("Results", out results) &&
                    (resultsCollection = results as ICollection) != null &&
                    resultsCollection.Count != 0)
                {
                    VisualStateManager.GoToState(this, "ResultsFound", true);
                    return;
                }
            }

            // Display informational text when there are no search results.
            VisualStateManager.GoToState(this, "NoResultsFound", true);
        }

Führen Sie die App aus, und suchen Sie nach "Item-1". (Suchen Sie bei Verwendung Ihrer eigenen Daten nach Text, für den sich auf jeden Fall Treffer ergeben.)

Suchergebnisse

(Optional) Aktualisieren des ItemTemplate-Elements für das GridView-Steuerelement

In SearchResultsPageExample.xaml wird eine GridView zum Anzeigen der Suchergebnisse verwendet. Der von der Vorlage generierte Code für das ItemTemplate-Element des GridView-Steuerelements ist für die Zusammenarbeit mit der Beispieldatenquelle ausgelegt, die Visual Studio für Sie erstellt. Für jedes Datenelement werden die folgenden Felder erwartet: "Image" (Bild), "Title" (Titel), "Subtitle" (Untertitel) und "Description" (Beschreibung).

Wenn Ihre Datenelemente über andere Felder verfügen, müssen Sie das ItemTemplate-Element ändern. Eine Anleitung zur Anpassung des ItemTemplate-Elements finden Sie unter Schnellstart: Hinzufügen von ListView- und GridView-Steuerelementen.

(Optional) Hinzufügen von Suchvorschlägen

Unterhalb des Suchfelds im Suchbereich werden Suchvorschläge angezeigt. Vorschläge sind wichtig, da sie den Benutzern Zeit sparen und wichtige Hinweise zu den Inhalten geben, nach denen die Benutzer in Ihrer App suchen können.

Die Vorschläge können aus verschiedenen Quellen stammen:

  • Sie können sie selbst definieren. Beispielsweise können Sie eine Liste von Autoherstellern erstellen.
  • Sie können von Windows stammen, wenn Ihre App lokale Dateien durchsucht.
  • Sie können sie von einem Webdienst oder -server abrufen.

Richtlinien für die Benutzeroberfläche zum Anzeigen von Vorschlägen finden Sie unter Richtlinien und Prüfliste für die Suchfunktion.

Mit LocalContentSuggestionSettings können Sie Vorschläge in nur wenigen Codezeilen basierend auf lokalen Dateien von Windows hinzufügen. Alternativ können Sie das SuggestionsRequested-Ereignis des SearchBox-Steuerelements registrieren und eine eigene Liste mit Vorschlägen erstellen, die aus einer anderen Quelle (z. B. einer lokal definierten Liste oder einem Webdienst) stammen. In dieser Schnellstartanleitung wird das Behandeln des SuggestionsRequested-Ereignisses veranschaulicht.

Codebeispiele, die das Hinzufügen von Suchvorschlägen veranschaulichen, finden Sie im SearchBox-Steuerelementbeispiel. Das Beispiel zeigt, wie Suchvorschläge mit allen drei möglichen Quellen hinzugefügt werden können. Das Hinzufügen von Vorschlägen für ostasiatische Sprachen mit dem Eingabemethoden-Editor (Input Method Editor, IME) mithilfe von alternativen Formen des Abfragetexts wird ebenfalls gezeigt. (Wir empfehlen Ihnen die Verwendung alternativer Abfragetexte, wenn Ihre App auch für japanische oder chinesische Nutzer bestimmt ist.)

Hh868180.wedge(de-de,WIN.10).gifBehandeln des SuggestionsRequested-Ereignisses

  1. Vermutlich verfügt Ihre App über mehrere SearchBox-Steuerelemente. Wir definieren daher in der Datei SearchResultsPageExample.xaml.cs einen zentralen statischen Ereignishandler, der von allen Steuerelementen verwendet werden kann. Fügen Sie diesen Code nach der Filter_Checked-Methode hinzu.
    
            public async static void SearchBox_SuggestionsRequested(
                SearchBox sender, 
                SearchBoxSuggestionsRequestedEventArgs args)
            {
    
    
  2. Wenn Sie asynchron auf das SuggestionsRequested-Ereignis reagieren möchten (das möchten wir hier), müssen Sie vor dem Bearbeiten der Vorschlagsliste ein SearchSuggestionsRequestDeferral-Objekt abrufen.
    
                // This object lets us edit the SearchSuggestionCollection asynchronously. 
                var deferral = args.Request.GetDeferral();
    
    
  3. Das System stellt automatisch einige Suchvorschläge bereit, z. B. vorherige Suchvorgänge des Benutzers. Wir fügen unsere Suchvorschläge den vom System bereitgestellten Vorschlägen hinzu.

    
                try { 
    
                    // Retrieve the system-supplied suggestions.
                    var suggestions = args.Request.SearchSuggestionCollection;
    
    
  4. Durchlaufen Sie alle Elemente Ihrer Daten, und führen Sie eine Überprüfung auf Übereinstimmungen durch. Wenn eine Übereinstimmung gefunden wird, hängen wir den Titel des übereinstimmenden Elements an die Auflistung mit den Suchvorschlägen an.

    
                    var groups = await SampleDataSource.GetGroupsAsync();
                    foreach (var group in groups)
                    {
                        var matchingItems = group.Items.Where(
                            item => item.Title.StartsWith(
                                args.QueryText, StringComparison.CurrentCultureIgnoreCase));
    
                        foreach (var item in matchingItems)
                        {
                            suggestions.AppendQuerySuggestion(item.Title);
                        }
                    }
            
    
    
  5. Die SearchBoxSuggestionsRequestEventArgs.LinguisticDetails.QueryTextAlternatives-Eigenschaft liefert zusätzliche Vorschläge für Benutzer, die Text über einen Eingabemethoden-Editor (Input Method Editor, IME) eingeben. Die Verwendung dieser Vorschläge verbessert das Sucherlebnis für Benutzer, die ostasiatische Sprachen nutzen. Als Nächstes überprüfen wir die Abfragetextalternativen für Zeichenfolgen, die die ursprüngliche Abfrage enthalten, und fügen sie unserer Liste mit den Suchvorschlägen hinzu.

    
                    foreach (string alternative in args.LinguisticDetails.QueryTextAlternatives)
                    {
                        if (alternative.StartsWith(
                            args.QueryText, StringComparison.CurrentCultureIgnoreCase))
                        {
                            suggestions.AppendQuerySuggestion(alternative); 
                        }
                    }
                }
    
    
  6. Informieren Sie schließlich mit der SearchSuggestionsRequestDeferral das System, dass wir mit dem Bearbeiten der Vorschlagsliste fertig sind.

    
                finally {
                    deferral.Complete();
                }
    
            }
    
    

    Dies ist der gesamte Code, den wir für unseren Ereignishandler für Suchvorschläge benötigen. Hier ist die vollständige SearchBox_SuggestionsRequested-Methode:

    
            public async static void SearchBox_SuggestionsRequested(
                SearchBox sender, 
                SearchBoxSuggestionsRequestedEventArgs args)
            {
    
                // This object lets us edit the SearchSuggestionCollection asynchronously. 
                var deferral = args.Request.GetDeferral();
    
                try { 
    
                    // Retrieve the system-supplied suggestions.
                    var suggestions = args.Request.SearchSuggestionCollection;
               
                    var groups = await SampleDataSource.GetGroupsAsync();
                    foreach (var group in groups)
                    {
                        var matchingItems = group.Items.Where(
                            item => item.Title.StartsWith(
                                args.QueryText, StringComparison.CurrentCultureIgnoreCase));
    
                        foreach (var item in matchingItems)
                        {
                            suggestions.AppendQuerySuggestion(item.Title);
                        }
                    }
                
                    foreach (string alternative in args.LinguisticDetails.QueryTextAlternatives)
                    {
                        if (alternative.StartsWith(
                            args.QueryText, StringComparison.CurrentCultureIgnoreCase))
                        {
                            suggestions.AppendQuerySuggestion(alternative); 
                        }
                    }
                }
                finally {
                    deferral.Complete();
                }
    
            }
    
    
  7. Nun registrieren wir das Ereignis beim SearchBox-Steuerelement.

    Da dieser Ereignishandler statisch ist, können wir den Ereignishandler nicht in XAML festlegen. Öffnen Sie stattdessen die CodeBehind-Datei für die Seite, die das SearchBox-Steuerelement enthält, und verwenden Sie den Konstruktor der Seite, um die Registrierung für das Ereignis durchzuführen.

    
            public HubPage()
            {
                this.InitializeComponent();
                this.navigationHelper = new NavigationHelper(this);
                this.navigationHelper.LoadState += navigationHelper_LoadState;
    
                // Register for the SuggestsRequested event.
                mySearchBox.SuggestionsRequested += SearchResultsPageExample.SearchBox_SuggestionsRequested;
        
            }
    
    

Implementieren des Vertrags für "Suche" (für vorherige Versionen von Windows)

In Betriebssystemen vor Windows 8.1 wurde von Apps zum Bereitstellen der In-App-Suche der Charm "Suche" verwendet. Entwickler haben den Vertrag "Suche" implementiert und die SearchPane-API genutzt, um Abfragen zu verarbeiten und Vorschläge und Ergebnisse zu erhalten.

Auch wenn der Vertrag "Suche" und die SearchPane-API von Windows 8 weiterhin vollständig unterstützt werden, empfehlen wir ab Windows 8.1 anstelle von SearchPane die Verwendung des SearchBox-Steuerelements. Für Apps, für die das SearchBox-Steuerelement verwendet wird, muss der Vertrag "Suche" nicht implementiert werden.

Sollten für eine App das SearchPane-Element und der Vertrag "Suche" überhaupt verwendet werden? Wenn Sie davon ausgehen, dass Benutzer in Ihrer App nicht viele Suchvorgänge durchführen, können Sie das SearchPane-Element und den Vertrag "Suche" nutzen. Wir empfehlen Ihnen die Nutzung einer Schaltfläche mit der Suchglyphe (Segoe UI Symbol 0xE0094, 15 Punkt) in der App, auf die Benutzer klicken können, um den Suchbereich zu aktivieren. Code, mit dem das SearchPane-Steuerelement und der Vertrag "Suche" implementiert werden, finden Sie im Beispiel für den Suche-Vertrag.

Zusammenfassung und nächste Schritte

Sie haben Ihrer App mithilfe des SearchBox-Steuerelements und der Suchergebnisseite eine Suchfunktion hinzugefügt.

Richtlinien zum Designen und Erstellen einer benutzerfreundlichen Suchfunktion finden Sie unter Richtlinien und Prüfliste für die Suchfunktion.

Verwandte Themen

SearchBox-Steuerelementbeispiel
Richtlinien und Prüfliste für Suchfunktionen

 

 

Anzeigen:
© 2015 Microsoft