语言: HTML | XAML

创建基于边缘的 UI 动画 (XAML)

使用基于边缘的 UI 动画可以显示或隐藏源自屏幕边缘的 UI。用户或应用可以将此 UI 移入视图。使用 EdgeUIThemeTransition 或较小的边缘 UI,例如应用栏或命令栏。使用较大 UI 的 PaneThemeTransition,例如可滑入的窗格或面板。这些动画主要用于自定义控件;现有控件(例如 AppBarCommandBar)具有边缘 UI 内置的库动画,并且你将通过在 UI 中包括此类控件来获取动画的表现方式。

此 UI 可以覆盖应用,也可以作为主应用表面的一部分。如果此 UI 是主应用表面的一部分,则可能需要调整应用其余部分的大小,以便在显示时为新 UI 腾出空间。

基于边缘的元素的基本图

共有两类基于边缘的元素,每类元素都有自己的一组动画 API:边缘 UI 和窗格 UI。

  • 如果你旨在创建自定义控件(该控件的行为与 AppBarCommandBar 或类似控件的行为相似)的动画,请使用具有基于边缘的较小 UI 的边缘 UI 动画。你可能还想要定义来自应用中操作的错误和警告的 UI 界面/区域。如果你要处理该方案,请确保阅读浮出控件指南;基于边缘的 UI 可能不适用于你的方案。
  • 使用覆盖了更多应用窗口的具有基于边缘的较大 UI 的窗格 UI 动画。我们在此处讨论的窗格大小的示例时软键盘。

该图显示了边缘 UI 和面板 UI 之间的大小不同

采用默认 Windows 运行时控件行为的基于边缘的动画

XAML 控件不在其控件模板中显式使用基于边缘的动画。但是,它们具有内置的动画表现方式。包括边缘 UI 的建议方法是通过 Page.BottomAppBarPage.TopAppBar 属性添加 AppBar(或 CommandBar),该方法将为你自动应用所有合适的过渡和交互行为。有关详细信息,请参阅添加应用栏

如果你使用的是浮出控件(FlyoutMenuFlyoutSettingsFlyout),它们还具有内置动画。但是它们不是真正的基于边缘的 UI,因为它们应该与使其显示的上下文(而非应用窗口边缘)关联。你可能会针对从 AppBar 调用的 UI 使用浮出控件,但是与纯边缘 UI 相比,这仍然是不同的情况。有关详细信息,请参阅添加浮出控件和菜单以及创建弹出 UI 动画

其他资源

弹出元素示例显示了针对 Popup.ChildTransitions 使用 PaneThemeTransition

有关使用这些动画的设计最佳实践,请参阅基于边缘的 UI 动画的指南和清单

相关主题

创建 UI 动画
快速入门:使用库动画创建 UI 动画
添加应用栏
EdgeUIThemeTransition
PaneThemeTransition
Popup

 

 

显示:
© 2015 Microsoft