页面过渡

  • 项目

页面过渡可将用户导航到应用中的各个页面，并提供反馈作为页面之间的关系。 页面过渡可帮助用户了解他们是否处于导航层次结构的顶部、在同级页面之间移动或导航到页面层次结构的更深层。

为应用、页面刷新 和钻取 内的页面之间的导航提供了两个不同的动画，由 NavigationTransitionInfo 的子类表示。

示例

WinUI 2 库
WinUI 库

如果已安装 WinUI 2 库 应用，请单击此处 打开该应用，并查看页面转换操作。

页面刷新

页面刷新是传入内容的上滑动画与淡入动画的组合。 请在用户转到导航堆栈的顶部时使用页面刷新，例如选项卡或左侧导航栏项目之间的导航。

所需的感觉是用户已重新开始。

页面刷新动画

页面刷新动画由 EntranceNavigationTransitionInfoClass 表示。

// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());

注意：帧自动使用 NavigationThemeTransition 对两个页面之间的导航进行动画处理。 默认情况下，动画是页面刷新。

钻取

请在用户导航到应用的更深层时使用钻取，例如在选择一个项目后显示更多信息。

所需的感觉是用户已进入应用的更深层。

钻取动画

钻取动画由 DrillInNavigationTransitionInfo 类表示。

// Play the drill in animation
myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());

水平滑动

使用水平滑动显示同级页面彼此相邻。 NavigationView 控件自动将此动画用于顶部导航，但如果你正在构建自己的水平导航体验，则可以使用 SlideNavigationTransitionInfo 实现水平滑动。

所需的感觉是用户在彼此相邻的页面之间导航。

// Navigate to the right, ie. from LeftPage to RightPage
myFrame.Navigate(typeof(RightPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromRight } );

// Navigate to the left, ie. from RightPage to LeftPage
myFrame.Navigate(typeof(LeftPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromLeft } );

取消

要避免在导航期间播放任何动画，请使用位于其他 NavigationTransitionInfo 子类型的位置的 SuppressNavigationTransitionInfo。

// Suppress the default animation
myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());

如果要使用连接的动画构建自己的过渡或显示/隐藏动画，那么禁止显示动画很有用。

向后导航

要在向后导航时播放特定过渡，可以使用 Frame.GoBack(NavigationTransitionInfo).

当你基于屏幕大小动态地修改导航行为时（例如，在响应式列表/细节场景中），这可能很有用。