Add Search Capability to Win8 Metro Apps Via the Search Charm

Like traditional windows apps, Windows 8 Metro style apps need to provide search functionality. Unlike traditional apps, metro style apps have the ability to support a common search functionality via the Charm, which appears on the right side of the screen. As you use it, you’ll see it allows you to enter your search phrase and run it against the current app or other apps installed on your computer. Luckily, implementing search functionality (also known as search contract) within your app is not very complicated. To get started, we first need to edit the Package.appxmanifest by double clicking on it. Switch to the Declarations tab and Add Search from the Available Declarations drop down list. Once added, it then appears in the list of Supported Declarations. Now you can save the manifest, close it and start adding code to handle the search contract.

Next, we take a look at the code needed to receive the search request. Surprisingly, it’s much easier than you may think to capture the search for your application. Within the App.xaml.cs class you will need to override the OnSearchActiviated method as shown below.

  protected override void OnSearchActivated(SearchActivatedEventArgs args)

The search string sent to the application can be accessed in the args parameter as the QueryText property. At this point, the query text value isn’t all that useful as you do not have a place to display it. One way you can display and run your search is to create a Search Page and send the user to the page. You could then send the user to your search page using the following statement.

  (Window.Current.Content as Frame).Navigate(typeof(SearchPage), args.QueryText);

This statement will grab the Frame, Send the user to the page called SearchPage and pass the QueryText to the page. Then within the SearchPage, the search text will be accessible within the OnNavigateTo method, at which point you can run your search and display the results; however, this approach does have one big downside. For each search the user executes, the SearchPage is added to navigation tree, which means if the user tries to navigate back if provided, they will need to go back for each search executed. You could resolve this by simply having them navigate back home instead of one step at a time. You could also choose to use your main page to do double duty for search. In that case, you could use the following code, which would eliminate the stacking effect that occurs with each search.

  var rootFrame = new Frame();
  rootFrame.Navigate(typeof(MainPage), args.QueryText);
  Window.Current.Content = rootFrame;

This code snippet first creates a new Frame, navigates to the MainPage and then sets the current content to the new frame.


While the initial implementation of the Search Contract is quite easy, you will probably find the user interface implementation within your app is far more complex. In addition, you should consider the amount of time it takes for your search to execute; as such you probably should make use of asynchronous programming techniques. In any case, you should find the search contract easy to use and implement within your app.

More by Author

Must Read