| author | Description | title | template | ms.author | ms.date | ms.topic | ms.prod | ms.technology | keywords | pm-contact | ms.localizationpriority |
|---|---|---|---|---|---|---|---|---|---|---|---|
serenaz |
Learn how to use page transitions in your UWP apps. |
Page transitions in UWP apps |
detail.hbs |
sezhen |
04/08/2018 |
article |
windows |
uwp |
windows 10, uwp |
stmoy |
medium |
Page transitions are animations that play when users navigate between pages in an app, providing feedback as the relationship between pages. Page transitions help users understand if they are at the top of a navigation hierarchy, moving between sibling pages, or navigating deeper into the page hierarchy.
Two different animations are provided for navigation between pages in an app, page refresh and drill, and are represented by subclasses of NavigationTransitionInfo.
Page refresh is a combination of a slide up animation and a fade in animation for the incoming content. The desired feeling is that the user has started over.
Use page refresh when the user is taken to the top of a navigational stack, such as navigating between tabs or left-nav items. By default, Frame.Navigate() uses page refresh.
The page refresh animation is represented by the EntranceNavigationTransitionInfoClass.
// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());Use drill when users navigate deeper into an app, such as displaying more information after selecting an item.
The desired feeling is that the user has gone deeper into the app.
The drill animation is represented by the DrillInNavigationTransitionInfo class.
// Play the drill in animation
myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());Suppressing the animation is useful if you are building your own transition using Connected Animations or implicit show/hide animations.
To avoid playing any animation during navigation, use SuppressNavigationTransitionInfo in the place of other NavigationTransitionInfo subtypes.
// Suppress the default animation
myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());By default, Frame.GoBack() plays the corresponding "go back" animation based on the animation played to navigate to the page. For example, an app that uses drill in to navigate into a page will see a drill out when users navigate backwards.
To play a specific transition when navigating backwards, use Frame.GoBack(NavigationTransitionInfo). This can be useful when you modify navigation behavior dynamically based on screen size, for example, in a responsive master/detail scenario.