Transitions de page
Les transitions de page parcourent les utilisateurs entre les pages d’une application, en fournissant des commentaires en tant que relation entre les pages. Les transitions de page aident les utilisateurs à comprendre s’ils se trouvent en haut d’une hiérarchie de navigation, en se déplaçant entre les pages frères ou en accédant plus loin dans la hiérarchie de pages.
Deux animations différentes sont fournies pour la navigation entre les pages d’une application, l’actualisation de la page et l’extraction, et sont représentées par des sous-classes de NavigationTransitionInfo.
Exemples
| Galerie WinUI 2 | |
|---|---|
 |
Si l’application Galerie WinUI 2 est installée, cliquez ici pour ouvrir l’application et voir Transitions de page en action. |
Actualisation de la page
L’actualisation de page est une combinaison d’une animation de diapositive vers le haut et d’une animation en fondu pour le contenu entrant. Utilisez l’actualisation de la page lorsque l’utilisateur est dirigé vers le haut d’une pile de navigation, par exemple la navigation entre les onglets ou les éléments de navigation gauche.
Le sentiment souhaité est que l’utilisateur a démarré.
L’animation d’actualisation de la page est représentée par la classe EntranceNavigationTransitionInfoClass.
// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());
Remarque : un frame utilise automatiquement NavigationThemeTransition pour animer la navigation entre deux pages. Par défaut, l’animation est actualisée à la page.
Drill
Utilisez l’extraction lorsque les utilisateurs naviguent plus en profondeur dans une application, par exemple afficher plus d’informations après avoir sélectionné un élément.
Le sentiment souhaité est que l’utilisateur est allé plus loin dans l’application.
L’animation d’extraction est représentée par la classe DrillInNavigationTransitionInfo.
// Play the drill in animation
myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());
Diapositive horizontale
Utilisez la diapositive horizontale pour afficher que les pages frères apparaissent en regard des autres. Le contrôle NavigationView utilise automatiquement cette animation pour la navigation supérieure, mais si vous créez votre propre expérience de navigation horizontale, vous pouvez implémenter une diapositive horizontale avec SlideNavigationTransitionInfo.
Le sentiment souhaité est que l’utilisateur navigue entre les pages qui sont à côté des autres.
// 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 } );
Suppress
Pour éviter de lire une animation pendant la navigation, utilisez SuppressNavigationTransitionInfo à la place d’autres sous-types NavigationTransitionInfo.
// Suppress the default animation
myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());
La suppression de l’animation est utile si vous créez votre propre transition à l’aide d’animations connectées ou d’animations d’affichage/masquage implicites.
Navigation vers l’arrière
Vous pouvez utiliser Frame.GoBack(NavigationTransitionInfo) pour jouer une transition spécifique lors de la navigation vers l’arrière.
Cela peut être utile lorsque vous modifiez dynamiquement le comportement de navigation en fonction de la taille de l’écran ; par exemple, dans un scénario de liste/détail réactif.
Rubriques connexes
Windows developer