Язык: HTML | XAML

Анимация пользовательского интерфейса по краям экрана (XAML)

Используйте этот вид анимации, чтобы показать или скрыть элементы пользовательского интерфейса, которые возникают у края экрана. Эти элементы пользовательского интерфейса отображаются либо по команде пользователя, либо самим приложением. Используйте EdgeUIThemeTransition или элементы управления небольшого размера, например панели приложения или панели команд. Используйте PaneThemeTransition для элементов управления большего размера, например для подвижных областей или панелей. Эти виды анимации предназначены главным образом для пользовательских элементов управления. Существующие элементы управления, например AppBar и CommandBar, имеют встроенную анимацию по краям из библиотеки, и анимация интерфейса обеспечивается простым применением таких элементов управления.

Элементы пользовательского интерфейса могут перекрывать приложение либо становиться частью основной поверхности приложения. Если эти элементы интерфейса являются частью основной поверхности приложения, может понадобиться изменить размер остальной части приложения, чтобы освободить место для появившихся элементов.

Базовая схема элемента у края экрана

Существует два типа элементов по краям экрана: элементы пользовательского интерфейса и панели. Для каждого существует собственный набор API анимации.

  • Используйте анимацию по краям с элементами управления небольшого размера, если необходимо анимировать пользовательские элементы управления, похожие на AppBar, CommandBar или другие подобные элементы. Кроме того, может возникнуть необходимость задать область или поверхность для отображения предупреждений и сообщений об ошибках приложения. Если у вас именно такая ситуация, обратитесь к Руководству по всплывающим элементам. Анимация по краям может не подойти для данного случая.
  • Используйте анимацию панелей для отображения у края экрана более крупных элементов пользовательского интерфейса, которые закрывают большую часть окна приложения. Примером такого крупного элемента управления может служить экранная клавиатура.

Иллюстрация, демонстрирующая различие в размере элементов интерфейса у края экрана и панелей

Стандартная анимация по краям экрана элементов управления из среды выполнения Windows

Элементы управления XAML не используют в своих шаблонах анимацию по краям экрана в явной форме. Анимация уже встроена в их поведение. Рекомендуемый способ использования элементов управления по краям экрана — это добавление элемента AppBar (или CommandBar) с помощью свойств Page.BottomAppBar и Page.TopAppBar. После этого будут автоматически задействованы все соответствующие переходы и эффекты взаимодействия. Подробнее: Добавление панелей приложения.

Всплывающие элементы (Flyout, MenuFlyout, SettingsFlyout) также обладают встроенной анимацией. Но они не являются в полной мере элементами управления по краям экрана, потому что должны быть связаны с контекстом их отображения, а не с краем окна приложения. Может возникать ситуация, когда всплывающие элементы используются для элементов управления, вызываемых из AppBar, тем не менее эта ситуация отлична от использования настоящих элементов управления по краям экрана. Подробности: Добавление всплывающих элементов и обычных меню и Анимация пользовательского интерфейса со всплывающими элементами.

Другие ресурсы

В примере Popup показано использование PaneThemeTransition для Popup.ChildTransitions.

Рекомендации по проектированию с использованием этих анимаций см. в разделе Руководство и контрольный список для анимаций пользовательского интерфейса по краям экрана.

Связанные разделы

Анимация пользовательского интерфейса
Краткое руководство: анимация вашего пользовательского интерфейса
Добавление панелей приложения
EdgeUIThemeTransition
PaneThemeTransition
Popup

 

 

Показ:
© 2015 Microsoft