xaml - 实现Windows Phone搜索界面

Question

我环顾四周，但找不到关于如何为 Windows Phone 应用程序实现搜索覆盖的良好引用。我想模拟搜索在商店、音乐和其他系统类型应用程序中的实现方式。

我使用该图标创建了应用程序栏，但不确定单击该按钮时会发生什么。看起来有些覆盖层已过渡到页面顶部。我可以模仿这一点，但由于这似乎是一个常见的场景，我希望有一个指南来实现跨应用程序的一致体验。

1. 带有搜索按钮的应用程序栏:https://skydrive.live.com/redir?resid=1EBF644EEFCAD766!25155&authkey=!AB2pGcqFd9jo4JE
2. 叠加:https://skydrive.live.com/redir?resid=1EBF644EEFCAD766!25156&authkey=!ALmHpcgyqYyvBfU

Answer 1

没有官方控件可以为您执行此操作。在我的应用程序中，我执行以下操作来覆盖此场景:

1 - 将搜索按钮添加到应用程序栏

2 - 单击按钮时，导航到新页面(例如 SearchPage.xaml):

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

3 - 将焦点设置到该页面上 Loaded 事件中的搜索框以打开键盘(例如，在 OnNavigedTo 中执行此操作将不起作用):

mySearchTextbox.Focus();

4 - 使用Silverlight Toolkit for Windows Phone至 add transitions from/to the page 。我使用以下动画，它创建了与内置搜索页面非常相似的动画风格:

<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>