Search box as search charm like in Bing Maps App

Question

Hi all,

can anyone help with creating a search charm that works like a search box in win 8.1 app store. The example I would like to copy is the Default Bing Maps app. Instead of having a search box we have a charm slide in so we can utilize the full screen for our map data.

Answer 1

Hi Stuart,

Not sure if you are working with win8.1 app or win8.0 app.

If you are working with win8.1 app. Read this should help you: Quickstart: Add app settings, you could customize your setting charm, add your controls and style it. And you do not need worry about utilize the full screen for map data. You can also use SearchBox class inside, read this: Adding search.

If you are working with win8.0 app, I have to say sorry

• there is no in-build search box exist, the only way to search in win8.0 app is to search by search charm.
• you could also customize the app setting, the sample exist on the pack: Windows 8 app samples -> App Setting Sample.

Hope this helps.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

Hi James,

Thanks for the quick response.

We are using 8.1 and I guess the next question can we make the same interaction like the Bing Maps App happen with the SearchBox Control

e.g. a user starts typing and the search settings fly out opens and the SearchBox control in the fly out starts interacting with the user. 

Regards Stuart

Answer 3

Hi Stuart,

Yes, Why not.

As you are working with win8.1, you could show the setting flyout by Show method. To set a listener for user keyboard action should be a good idea.

        public void ShowCustomSettingFlyout()
        {
            CustomSetting CustomSettingFlyout = new CustomSetting();
            CustomSettingFlyout.Show();
        }

And I'm not quite understand what kind of interaction you want to do, but SettingsCommand class seems to be a suggestion for you.

I would strongly recommend you to try the sample App settings sample, take a look at the second and third scenario, you should be able to find the interaction stuff with the second one, the setting flyout on the third one.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 4

I wrote a blog post on how to do this a while back. You can find the post here: http://www.bing.com/blogs/site_blogs/b/maps/archive/2013/06/20/geocoding-with-the-search-charm.aspx

For future questions about Bing Maps try asking in the Bing Maps forums: http://social.msdn.microsoft.com/Forums/en-US/home?category=bingmaps

---

http://rbrundritt.wordpress.com

Answer 5

Thanks for all the ideas.

Answer 6

I would strongly recommend you to try the sample App settings sample, take a look at the second and third scenario

I found that the fourth scenario was more useful. It shows the use of SettingsFlyout.showSettings (msdn.microsoft.com/en-us/library/windows/apps/hh770581.aspx - i'm not allowed to post links), which although the doco doesn't suggest it, will show a flyout that looks like a settings page, but that doesn't appear in the list of settings. This is the behaviour of the Bing Maps app.