UPDATE: During some investigation by Shawn Wildermuth, he figured out that in order to show both the white “Enter” button as well as the typing suggestions, we should use the “ApplicationEnd” Input scope and not “Search”. Hopefully this get’s fixed in a future update.
When Microsoft first showed off its new Metro design style with the Windows Phone 7, most people agreed that it was slick, clean, and perhaps most importantly, distinctive. With Blend and the stock controls and styles, developers are able to easily create distinct looking apps that match your company’s style, while still keeping it within the Metro guidelines. If you ever get stuck wondering how something should act or look, a quick trip through the OS and bundled apps should be enough to set you in the right direction.
So why do so many applications get their search boxes wrong?
As I mentioned above, a quick tour through the OS will give you all the inspiration you need, unlock your phone right now and hit the search button. Do you notice something missing?
Search boxes within the Metro design are not supposed to have a button that says “OK”, “Search”, “Go” or anything else of the sort, there should be no button at all. Instead of the button, you should be using the
“Search” “ApplicationEnd” Input Scope on your textboxes instead, like so:
1: <TextBox Name="tbSearch" InputScope="ApplicationEnd"/>
What that will do for you is bring up the soft keyboard designed specifically for searching that looks like this:
The biggest thing to note about this is the white key on the bottom right. That key is the only thing that should launch the search action.
Unfortunately, to the best of my knowledge, Microsoft didn’t add in a specific event for search, so you’ll need to add in some code to handle this.
First, wire up the KeyUp event of your TextBox so that it looks like so:
1: <TextBox Name="tbSearch"
Then code your event handler to look for Key.Enter and call whatever functionality you are using to perform your search like so:
1: private void tbSearch_KeyUp(object sender, KeyEventArgs e)
3: if (e.Key == Key.Enter)
Think I’m off my rocker and people should be able to put buttons where ever they want and it won’t detract at all from the user experience? Feel free to leave a comment below.