Blogginlägg

Lägg till Sökfunktionen till din Metro App

Av Cecilia Wirén | Blogg | 2 maj 2012

Alla användare är idag vana med att kunna använda ett sök för att hitta sitt innehåll. Dagligen använder de tjänster som google, hitta.se och wikipedia.org för att hitta sin kunskap. Redan i Windows 7 spelar söket en tydlig roll och många använder enbart den för att öppna sina applikationer. I Windows 8 har Microsoft tagit det ett steg längre och centraliserar sök för allt. Du kan söka bland applikationer, inställningar och filer från samma ställe du kan även starta sökningsfunktionen i en applikation. Denna universella sökruta återfinns på charmsmenyn som öppnas genom att dra fingret in från högra kanten eller placera muspekaren i någon av de högra hörnen eller använder Win+Q. Från startvyn behövs inte charmsmenyn öppnas för att påbörja ett sök, användaren kan bara börjar skriva på tangentbordet och sökrutan öppnas.


För att aktivera sökfunktionen i dina Metro applikation behöver du först deklarera detta i manifestet. Detta gör du genom att först öppna "Package.appxmanifest" filen och sedan gå in under fliken Declarations och där lägga till Search.



Du behöver sedan en sida att visa medans sökning görs. Denna sidan behövs öppnas när en sökning påbörjas. Indikationen på att det är ett sök som görs får du genom att OnSearchActivated funktionen i App klassen körs, navigera därför till sök sidan där:
override void OnSearchActivated(SearchActivatedEventArgs args)
{
var searchFrame = new Frame();
Window.Current.Content = searchFrame;
searchFrame.Navigate(typeof(SearchPage), args.QueryText);
Window.Current.Activate();
}

Du får alltså sökordet via args.QueryText och vidarebefodrar de i detta fall till söksidan och kan sedan i OnNavigatedTo funktion på sidan komma åt detta via e.Parameter.

För själva sökfunktionen har du sedan flera val som kan kombineras eller användas var och en för sig:
1. Användaren får förslag i sökrutan medans den skriver. Antingen i formen av enkla textsträngar eller mera komplexa med bild, rubrik och text.
2. Olika sökresultat visas för användaren på en sida i din applikation.
För att kunna ge feedback tillbaka till användaren i formen av förslag behöver du lyssna på några event från SearchPane, som återfinns under namespace Windows.ApplicationModel.Search, hämta den i din OnSearchActivated funktion i App klassen eller i OnNavigatedTo på din Söksida att använda. Den sistnämnda är att fördra om du planerar att uppdatera söksidan vartefter användaren skriver i sökrutan.
var searchPane = SearchPane.GetForCurrentView();

Ge förslag

Medans användaren skriver kommer eventet SuggestionsRequested att ske och du har då möjlighet att skicka tillbaka en lista på upp till 5 förslag på vad användaren försöker skriva. Antingen som förslag på sökord eller resultat.
searchPane.SuggestionsRequested += searchPane_SuggestionsRequested;

På sökord i sökrutan


void searchPane_SuggestionsRequested(SearchPane sender, 
SearchPaneSuggestionsRequestedEventArgs args)
{
List<string> suggestedFlowersList =
GetSuggestions(args.QueryText);
args.Request.SearchSuggestionCollection
.AppendQuerySuggestions(suggestedFlowersList);
}

På Resultat direkt i sökrutan

void searchPane_SuggestionsRequested(SearchPane sender, 
SearchPaneSuggestionsRequestedEventArgs args)
{
List<Flower> suggestedFlowers =
GetFlowerSuggestions(args.QueryText);
foreach (var flower in suggestedFlowers)
{
args.Request.SearchSuggestionCollection
.AppendResultSuggestion(flower.Name, flower.ShortText,
flower.Id,
Windows.Storage.Streams.RandomAccessStreamReference
.CreateFromUri(new Uri(flower.ImagePath,
UriKind.Absolute)), flower.ImageAltText);
}
}

Uppdatera din söksida

Du kan även välja att uppdatera din söksida varefter användaren skriver i sökrutan genom att lyssna på eventet QueryChanged
searchView.QueryChanged += searchView_QueryChanged;

Användaren väljer något

När användaren har valt ett sökord, antingen för de skrivit det själva eller väljer något från listan på förslag triggas eventet QuerySubmitted.
searchView.QuerySubmitted += searchView_QuerySubmitted; 
Du kan då öppna rätt sida i din applikation åt användaren. Enda undantaget är om du valt att visa resultat förslag då skall du istället lyssna på eventet ResultSuggestionChosen.
searchPane.ResultSuggestionChosen += 
searchPane_ResultSuggestionChosen;
Då kommer du även kunna fånga upp det id som du valde att skicka med resultatförslaget.

Search Contract - Mallen

Det finns förutom ovanstående metoder en mall som du kan använda, infoga då "Search Contract" (Add New Item). Den sätter sökdeklarationen, skapar en söksida samt ser till att aktivera söksidan vid sök.

Läs även gärna igenom Microsofts rekommendationer för sök innan du sätter igång att implementera ditt sök.
Till inlägget