页面过渡
页面过渡可将用户导航到应用中的各个页面,并提供反馈作为页面之间的关系。 页面过渡可帮助用户了解他们是否处于导航层次结构的顶部、在同级页面之间移动或导航到页面层次结构的更深层。
为应用、页面刷新 和钻取 内的页面之间的导航提供了两个不同的动画,由 NavigationTransitionInfo 的子类表示。
示例
WinUI 2 库 | |
---|---|
![]() |
如果已安装 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)
.
当你基于屏幕大小动态地修改导航行为时(例如,在响应式列表/细节场景中),这可能很有用。