Home > C#, WinRT > Adding search recommendations to Windows Store apps

Adding search recommendations to Windows Store apps

02/05/2013

Search recommendations are a special kind of suggestions that can include also an image. They are used, for example, in the Store app:

Search recommendations

Search recommendations

While search suggestions start a normal search, using the selected query, recommendations tipically bring directly to the item detail page.

We can add this feature to our Windows Store apps too. We simply need to add recommendations in the SuggestionRequest event of SearchPane object, just as we do for search suggestions:

protected override void OnWindowCreated(WindowCreatedEventArgs args)
{
    SearchPane.GetForCurrentView().SuggestionsRequested += OnSuggestionsRequested;
    SearchPane.GetForCurrentView().ResultSuggestionChosen += OnResultSuggestionChosen;

    base.OnWindowCreated(args);
}

private void OnSuggestionsRequested(SearchPane sender,
    SearchPaneSuggestionsRequestedEventArgs args)
{
    var suggestions = args.Request.SearchSuggestionCollection;

    suggestions.AppendQuerySuggestion("Suggestion 1");
    suggestions.AppendQuerySuggestion("Suggestion 2");
    suggestions.AppendQuerySuggestion("Suggestion 3");

    suggestions.AppendSearchSeparator("Recommendation");

    suggestions.AppendResultSuggestion("DotNetToscana",
        detailText: ".NET User Group in Italy",
        tag: "dotnettoscana",
        image: RandomAccessStreamReference.CreateFromUri(
                    new Uri("http://www.dotnettoscana.org/logo.png")),
        imageAlternateText: "Alternate text");
}

private void OnResultSuggestionChosen(SearchPane sender,
    SearchPaneResultSuggestionChosenEventArgs args)
{
    // args.Tag contains the tag of the selected recommendations.
    // You can use this value to directly navigate to the item detail page.
    var selectedTag = args.Tag;

    // ...
}

To add search recommendations in the OnSuggestionsRequested event handler, we use the AppendResultSuggestion method. We also use the AppendSearchSeparator method to visually separate recommendations from normal suggestions. So, the resulting search pane look like this:

Our example of search recommendations

Our example of search recommendations

When the user selects a reccomendation, the ResultSuggestionChosen event will fire. We can then read the SearchPaneResultSuggestionChosenEventArgs.Tag property to retrieve the tag value of the item that has been selected: it is equal to the tag argument that we have set in the AppendResultSuggestion method. Using this value, we can for example navigate directly to the item detail page.

Note that a maximum of 5 elements will be shown in the Search pane, including search suggestions, separator and recommendations. So, a typical solution is to provide 3 suggestions, 1 separator and 1 recommendation. In any case, remember what is stated on MSDN, you should use result suggestions instead of query suggestions only to display high-confidence results that take the user directly to the item instead of to a view that shows search results.

Categories: C#, WinRT
%d bloggers like this: