CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Introduction
During Build 2013, the annual conference targeted towards developers of Windows platforms, Microsoft announced over 5000 new APIs coming as part of Windows 8.1, a free update over Windows 8.
One of the new features announced was the search-box control, which can be used to provide search results. Now, there is a dedicated control to represent the ability to search within your application.
The Search-box control is available to both XAML developers as well as JavaScript developers.
For XAML developers, it is available in the Windows.UI.Xaml.Controls namespace. JavaScript developers can use the SearchBox controls in WinJS.UI namespace.
The SearchBox control allows the application to have complete control over the search experience (You do not need to use global search to search within the application).
The SearchBox control works by integrating with a search contract to provide deep integration within the application, which allows for support of search suggestions and results. Additionally, there is built-in support for touch, keyboard and mouse interaction.
The Windows 8 Search contract allows up to five suggestions, three history items, and result suggestions separated by image.
The SearchBox also has first-class IME support allowing non-Latin characters to be used within the application.
To provide search suggestions for a SearchBox control, one needs to implement the AppendQuerySuggestion to append a query suggestion to the list of search suggestions for the search pane.
When the user submits a search term, the application can handle the SearchBox.QuerySubmitted event to track what is being searched.
Applications should handle the SearchBox.SuggestionsRequested event to ensure that the application provides new suggestions to display in the search pane when a user changes the text being searched.
Hands On
In our Demo, we will implement a simple application, which will contain a SearchBox where users will search for car names. When the user types in a few letters, the SearchBox will provide suggestions of matching car names.
Start Visual Studio 2013 and create a new Windows Store Project of type Blank App (XAML) titled Windows8.1SearchBoxDemo.
New Project
Open MainPage.xaml in the XAML editor and add a SearchBox Control on the page. Call it searchBoxMySearchBox.
At this time, your XAML will the code below.
Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <SearchBox x:Name="searchBoxMySearchBox" HorizontalAlignment="Left" Margin="534,210,0,0" VerticalAlignment="Top"/> </Grid>
We will now implement the QuerySubmitted event handler in which we will store the term the user is querying. For this, we need to add a couple of controls – one TextBox and one TextBlock. The XAML for these controls is below.
<TextBlock HorizontalAlignment="Left" Margin="482,58,0,0" TextWrapping="Wrap" Text="Searching for" VerticalAlignment="Top"/> <TextBox x:Name="textBoxSearchTerm" HorizontalAlignment="Left" Margin="575,58,0,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
Now, double-click the SearchBox’s QuerySubmitted event handler and add the following code.
private void searchBoxMySearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args) { textBoxSearchTerm.Text = sender.QueryText; }
Next, we will add a string collection to represent the entire suggestion list for the cars.
public sealed partial class MainPage : Page { private static readonly string[] carList = { "Saturn", "Isuzu", "Toyota", "Nissan", "Ford", "Chevy", "Honda", "Hummer", "Tata", "Mahindra"
Finally, we will implement the SuggestionsRequested event handler. In this method, we will create a SearchSuggestionCollection object to which we will add any car name that matches the string and present it as a suggestion.
private void searchBoxMySearchBox_SuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args) { Windows.ApplicationModel.Search.SearchSuggestionCollection suggestionCollection = args.Request.SearchSuggestionCollection; foreach (string suggestion in carList) { if (suggestion.StartsWith(args.QueryText, StringComparison.CurrentCultureIgnoreCase)) { suggestionCollection.AppendQuerySuggestion(suggestion); } } }
Our simple application using the SearchBox control is ready. You can now run it and give it any car name like “Honda” to test it out.
SearchBox Application
Summary
In this article we learned how we can provide a rich in-app search experience using the SearchBox control in Windows 8.1 applications. I hope you have found this information useful.
About the Author
Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com
