Windows Phone 8.1 类似 Bing 的幻灯片页面动画答案

【问题标题】：Windows Phone 8.1 Bing-like slide page animationWindows Phone 8.1 类似 Bing 的幻灯片页面动画
【发布时间】：2014-06-11 09:56:55
【问题描述】：

我想在我的 Windows Phone 8.1 应用程序中添加页面转换，以使下一个页面将从屏幕底部滑入。当您通过点击 Search 按钮启动 Bing 时，也会使用类似的效果。

不幸的是，MSDN 对这个主题的描述并不多。有谁知道如何实现这样的动画？

【问题讨论】：

标签： xaml windows-phone windows-phone-8.1

【解决方案1】：

首先，您必须禁用 Frame 的当前转换 - 最好的位置是在创建 rootframe 的 App.xaml.cs 中，但这取决于您的应用程序的初始化方式。例如在 MainPage 构造函数中：

public MainPage()
{
    this.InitializeComponent();
    Frame mainFrame = Window.Current.Content as Frame;
    mainFrame.ContentTransitions = null;
}

禁用默认转换后，您可以在每个Page 中定义自己的转换：

在Page.xaml：

<Page.Transitions>
    <TransitionCollection>
       <PaneThemeTransition Edge="Bottom"/>          
    </TransitionCollection>
</Page.Transitions>

我不确定这是否是您正在寻找的确切动画。更多关于动画的信息，你会发现here at MSDN。

当然你也可以定义Frame的新ContentTransitions，这样它们就成为所有Pages的默认值——例如：

// instead of null put in MainPage constructor:
mainFrame.ContentTransitions = new TransitionCollection { new PaneThemeTransition { Edge = EdgeTransitionLocation.Bottom } };

【讨论】：

您提供的解决方案几乎是完美的，谢谢。这正是我所想的动画类型。但是，动画开始后，前一页立即变黑。产生的效果是下一页而不是前一页滑到黑色区域上。你知道怎么解决吗？
@user3596795 您是否尝试为所有页面设置主题动画（在答案的末尾） - 在这种情况下，前一个页面会在新幻灯片进入之前向下滑动。
为所有页面设置主题动画后，前一个页面的行为确实如您所描述的那样。但这并不完全是我的意思。当下一个页面滑入时，我希望前一个页面保持静止。您知道如何实现它吗？
@user3596795 这可能是一项艰巨的任务 - 我认为 ThemeTransition 包含 UIElement 的输入/输出，因此可能很难仅应用其中的一半。也许您将不得不尝试编写自己的Transition，但我不知道该怎么做。
@user3596795 您是否能够找到一种方法来在导航到页面过渡时保持导航到页面静止？

【解决方案2】：

默认转换可以在每个导航的基础上从代码中覆盖。

NavigationTransitionInfo transitionInfo = new SlideNavigationTransitionInfo();
Frame.Navigate(typeof(SecondPage), false, transitionInfo);

上面的代码将强制SecondPage 以您想要的方式从底部滑入。但是，这仅适用于这种特定的导航场景。如果您希望 SecondPage 在从任何位置导航时滑入，请在 XAML 中设置 NavigationTransitionInfo。

<Page.Transitions>
    <TransitionCollection>
        <NavigationThemeTransition>
            <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                <SlideNavigationTransitionInfo/>
            </NavigationThemeTransition.DefaultNavigationTransitionInfo>
        </NavigationThemeTransition>
    </TransitionCollection>
</Page.Transitions>

这将强制页面在导航到时滑入。对于特定导航场景，仍然可以通过代码覆盖此默认值。

【讨论】：

【解决方案3】：

在The Windows Phone Toolkit你可以找到动画和示例

这里有一些article

【讨论】：

我认为他使用的是 WP8.1 WinRT 而不是 WP7 Silverlight