2

I was looking around, but couldn't find a good reference for how to implement the search overlay for windows phone applications. I want to emulate how search is implemented in the store, music, and other system type applications.

I have the application bar created with the icon, but not sure what is happening when the button is clicked. It appears that some overlay is transitioned in on top of the page. I can emulate this, but since this seems like such a common scenario, I hoped there would be a guide to enable consistent experience across applications.

  1. Application bar with search button: https://skydrive.live.com/redir?resid=1EBF644EEFCAD766!25155&authkey=!AB2pGcqFd9jo4JE
  2. Overlay: https://skydrive.live.com/redir?resid=1EBF644EEFCAD766!25156&authkey=!ALmHpcgyqYyvBfU
4

1 に答える 1

2

There is no official control that does that for you. In my applications I do the following for covering this scenario:

1 - Add search button to application bar

2 - When button is clicked, navigate to a new page (eg. SearchPage.xaml):

NavigationService.Navigate(new Uri("/SearchPage.xaml", UriKind.Relative));

3 - Set focus to the search box in the Loaded event on that page to open the keyboard (doing it in OnNavigatedTo for example will not work):

mySearchTextbox.Focus();

4 - Use the Silverlight Toolkit for Windows Phone to add transitions from/to the page. I use the following animations, which creates a very similair animation style to the built in search pages:

<toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Forward>
             <toolkit:SlideTransition Mode="SlideUpFadeIn" />
        </toolkit:NavigationInTransition.Forward>
        <toolkit:NavigationInTransition.Backward>
            <toolkit:SlideTransition Mode="SlideUpFadeIn" />
        </toolkit:NavigationInTransition.Backward>
    </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>

<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
            <toolkit:SlideTransition Mode="SlideDownFadeOut" />
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
            <toolkit:SlideTransition Mode="SlideDownFadeOut" />
        </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
于 2013-03-31T21:17:16.463 に答える