Ermöglichen der Suche nach Informationen in Ihrer Windows Store-App (C#/VB/C++ und XAML)

Artikel
04/30/2014

Um Benutzern das Suchen nach Informationen in Ihrer App zu ermöglichen, fügen Sie Ihrem Projekt ein Element Suchergebnisseite hinzu. Fügen Sie anschließend einer beliebigen Seite in der App SearchBox-Steuerelemente hinzu. Benutzer verwenden diese Steuerelemente, um in Ihrer App nach Informationen zu suchen. Führen Sie die folgenden Schritte aus, um Benutzern das Suchen nach Informationen in Ihrer App zu ermöglichen:

Fügen Sie das Element "Suchergebnisseite" hinzu.
Ändern Sie den Code im Element "Suchergebnisseite".
Fügen Sie einer Seite ein SearchBox-Steuerelement hinzu.
Ermöglichen Sie Benutzern das Öffnen der in den Suchergebnissen angezeigten Elemente.
Testen Sie die Suchfunktion in Ihrer App.

JJ655408.wedge(de-de,WIN.10).gif Hinzufügen des Elements "Suchergebnisseite"

Klicken Sie in Visual Studio-Menü auf Datei > Neues Projekt.
Erweitern Sie im linken Bereich des Dialogfelds Neues Projekt den Knoten Visual C#, Visual Basic oder Visual C++.
Klicken Sie im mittleren Bereich auf Grid App.
Geben Sie SearchPageExample in das Feld Name ein, und klicken Sie anschließend auf OK.

Die Projektmappe wird erstellt, und die Projektdateien werden im Projektmappen-Explorer angezeigt. Ausführlichere Informationen zu den Projektdateien finden Sie unter C#-, VB- und C++-Projektvorlagen für Windows Store-Apps.

Wichtig Wenn Sie Visual Studio zum ersten Mal ausführen, werden Sie auf die Entwicklerlizenz hingewiesen. Weitere Informationen finden Sie unter Anfordern einer Entwicklerlizenz.
Öffnen Sie im Projektmappen-Explorer das Kontextmenü des Projektknotens, und klicken Sie dann auf Hinzufügen > Neues Element.
Klicken Sie im mittleren Bereich des Dialogfelds Neues Element hinzufügen auf Suchergebnisseite. Behalten Sie für dieses Beispiel den im Feld Name angezeigten Standardnamen SearchResultsPage1.xaml bei.
Klicken Sie auf die Schaltfläche Hinzufügen.

Der Code für die neue Datei wird angezeigt

JJ655408.wedge(de-de,WIN.10).gif Ändern des Codes im Element "Suchergebnisseite"

Fügen Sie in der Codedatei "SearchResultsPage1" die folgende Anweisung am Anfang der Datei hinzu, um auf die Beispieldatenklassen zu verweisen:
```
using SearchResultsExample.Data;
```
```
Imports SearchResultsExample.Data
```

Fügen Sie die folgende Eigenschaft hinzu:

public Dictionary<String, IEnumerable<SampleDataItem>> Results { get; set; }

Public Property Results() As Dictionary(Of [String], IEnumerable(Of SampleDataItem))
    Get
        Return m_Results
    End Get
    Set(value As Dictionary(Of [String], IEnumerable(Of SampleDataItem)))
        m_Results = Value
    End Set
End Property
Private m_Results As Dictionary(Of [String], IEnumerable(Of SampleDataItem))

Aktualisieren Sie den ersten TODO-Kommentar, indem Sie

// TODO: Application-specific searching logic.  The search process is responsible for
//       creating a list of user-selectable result categories:
//
//       filterList.Add(new Filter("<filter name>", <result count>));
//
//       Only the first filter, typically "All", should pass true as a third argument in
//       order to start in an active state.  Results for the active filter are provided
//       in Filter_SelectionChanged below.
var filterList = new List<Filter>();
filterList.Add(new Filter("All", 0, true));

' TODO: Application-specific searching logic.  The search process is responsible for
'       creating a list of user-selectable result categories:
'
'       filterList.Add(new Filter("<filter name>", <result count>));
'
'       Only the first filter, typically "All", should pass true as a third argument in
'       order to start in an active state.  Results for the active filter are provided
'       in Filter_SelectionChanged below.

Dim filterList As New List(Of Filter)()
filterList.Add(New Filter("All", 0, True))

ersetzen

durch

var filterList = new List<Filter>();
var totalMatchingItems = 0;
Results = new Dictionary<string, IEnumerable<SampleDataItem>>();
var groups = await SampleDataSource.GetGroupsAsync();
foreach (var group in groups)
    {
        var matchingItems = group.Items.Where(item => item.Title.Contains(queryText));
        int numberOfMatchingItems = matchingItems.Count();
        if (numberOfMatchingItems > 0)
        {
            Results.Add(group.Title, matchingItems);
            filterList.Add(new Filter(group.Title, numberOfMatchingItems));
        }
    }
filterList.Insert(0, new Filter("All", totalMatchingItems, true));

Dim filterList = New List(Of Filter)()
Dim totalMatchingItems = 0
Results = New Dictionary(Of String, IEnumerable(Of SampleDataItem))()
Dim groups As IEnumerable(Of Data.SampleDataGroup) = Await Data.SampleDataSource.GetGroupsAsync()
For Each group In groups
    Dim matchingItems = group.Items.Where(Function(item) item.Title.Contains(queryText))
    Dim numberOfMatchingItems As Integer = matchingItems.Count()
    If numberOfMatchingItems > 0 Then
        Results.Add(group.Title, matchingItems)
        filterList.Add(New Filter(group.Title, numberOfMatchingItems))
    End If
Next
filterList.Insert(0, New Filter("All", totalMatchingItems, True))

Aktualisieren Sie den nächsten TODO-Kommentar, indem Sie

// 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

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

ersetzen

durch

if (selectedFilter.Name.Equals("All"))
{
    var tempResults = new List<SampleDataItem>();
    foreach (var group in Results)   
    {
        tempResults.AddRange(group.Value);
        this.DefaultViewModel["Results"] = tempResults;
    }
}
else if (Results.ContainsKey(selectedFilter.Name))
{
    this.DefaultViewModel["Results"] = 
      new List<SampleDataItem>(Results[selectedFilter.Name]);
}

If selectedFilter.Name.Equals("All") Then
Dim tempResults = New List(Of SampleDataItem)()
For Each group In m_Results
    tempResults.AddRange(group.Value)
    Me.DefaultViewModel("Results") = tempResults
Next
ElseIf m_Results.ContainsKey(selectedFilter.Name) Then
    Me.DefaultViewModel("Results") = New List(Of SampleDataItem)(m_Results(selectedFilter.Name))
End If

JJ655408.wedge(de-de,WIN.10).gif Hinzufügen eines SearchBox-Steuerelements zu einer Seite

Doppelklicken Sie im Projektmappen-Explorer auf die Seite, der Sie ein Suchfeld hinzufügen möchten (z. B. "GroupItemsPage.xaml").

Die Seite wird im Designer geöffnet.
Ziehen Sie aus der Toolbox ein SearchBox-Steuerelement in die Seite.
Klicken Sie im Fenster Eigenschaften auf die Registerkarte "Ereignisse", geben Sie SearchBox_QuerySubmitted in das Feld QuerySubmitted ein, und drücken Sie dann die EINGABETASTE.

Der SearchBox_QuerySubmitted-Ereignishandler wird im Code-Editor geöffnet.

Ersetzen Sie den SearchBox_QuerySubmitted-Ereignishandler durch den folgenden Code:

private void SearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
{
    this.Frame.Navigate(typeof(SearchResultsPage1), args.QueryText);
}

Private Sub SearchBox_QuerySubmitted(sender As SearchBox, args As SearchBoxQuerySubmittedEventArgs)
    Me.Frame.Navigate(GetType(SearchResultsPage1), args.QueryText)
End Sub

JJ655408.wedge(de-de,WIN.10).gif Ermöglichen des Öffnens der in den Suchergebnissen angezeigten Elemente

Öffnen Sie SearchResultsPage1.xaml im Designer.
Klicken Sie im Panel Dokumentgliederung auf resultsGridView.
Klicken Sie im Fenster Eigenschaften auf die Registerkarte "Ereignisse", und geben Sie dann ItemClick in das Feld ItemClick ein.

Fügen Sie dem neuen Ereignishandler die beiden folgenden Codezeilen hinzu:

private void ItemClick(object sender, ItemClickEventArgs e)
{
    var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
    this.Frame.Navigate(typeof(ItemDetailPage), itemId);
}

Private Sub ItemClick(sender As Object, e As ItemClickEventArgs) Handles resultsGridView.ItemClick
    Dim itemId = DirectCast(e.ClickedItem, SampleDataItem).UniqueId
    Me.Frame.Navigate(GetType(ItemDetailPage), itemId)
End Sub

JJ655408.wedge(de-de,WIN.10).gif Testen der Suchfunktion in der App

Klicken Sie im Visual Studio-Menü auf Debuggen > Debugging starten, oder drücken Sie F5.
Öffnen Sie in der aktiven App die Seite mit dem Suchfeldsteuerelement.
Geben Sie im Suchfeld den Namen eines Elements ein und klicken Sie auf die Suchschaltfläche.

Auf der Seite mit den Suchergebnissen werden Ergebnisse für Elemente angezeigt, die den Suchbegriff enthalten.

Ermöglichen der Suche nach Informationen in Ihrer Windows Store-App (C#/VB/C++ und XAML)

Verwandte Themen

Zusätzliche Ressourcen