Поделиться через

Переходы страниц

Переходы страниц помогают пользователю перемещаться между страницами в приложении, обеспечивая понимание связи между страницами. Переходы на страницы помогают пользователям понять, находятся ли они в верхней части иерархии навигации, перемещаясь между одноуровневыми страницами или углубляясь в иерархию страниц.

Предоставлены две различные анимации для навигации между страницами в приложении: обновление страницы и Поэтапное копание, которые представлены подклассами 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 } );

Подавлять

Чтобы избежать воспроизведения анимации во время навигации, используйте SuppressNavigationTransitionInfo вместо других подтипов NavigationTransitionInfo .

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

Отключение анимации полезно, если вы создаёте собственный переход с помощью подключенных анимаций или неявных анимаций показа/скрытия.

Обратная навигация

Вы можете использовать Frame.GoBack(NavigationTransitionInfo) для воспроизведения определенного перехода при переходе назад.

Это может быть полезно при динамическом изменении поведения навигации на основе размера экрана; Например, в сценарии с адаптивным списком или подробными сведениями.