Transitions de page

  • Article

Les transitions de page naviguent les utilisateurs entre les pages d’une application, en fournissant des commentaires comme relation entre les pages. Les transitions de page aident les utilisateurs à comprendre s’ils se trouvent en haut d’une hiérarchie de navigation, se déplacent d’une page à l’autre ou naviguent plus profondément dans la hiérarchie des pages.

Deux animations différentes sont fournies pour la navigation entre les pages d’une application, Actualisation de page et Drill, et sont représentées par des sous-classes de NavigationTransitionInfo.

Exemples

Galerie WinUI 2
Galerie WinUI

Si vous avez installé l’application WinUI 2 Gallery , 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 fondue pour le contenu entrant. Utilisez l’actualisation de page lorsque l’utilisateur est dirigé vers le haut d’une pile de navigation, par exemple en naviguant entre les onglets ou les éléments de navigation de gauche.

Le sentiment souhaité est que l’utilisateur a recomposé.

animation d’actualisation de page

L’animation d’actualisation de page est représentée par l’objet 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 actualisation de page.

Drill

Utilisez l’extraction lorsque les utilisateurs naviguent plus en profondeur dans une application, par exemple en affichant 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.

animation d’extraction

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 montrer que les pages frères s’affichent les unes à côté 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 se trouvent à côté les unes 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 des animations 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/masque implicites.

Navigation vers l’arrière

Vous pouvez utiliser Frame.GoBack(NavigationTransitionInfo) pour lire une transition spécifique lors de la navigation vers l’arrière.

Cela peut être utile lorsque vous modifiez le comportement de navigation dynamiquement en fonction de la taille de l’écran ; par exemple, dans un scénario de liste/détail réactif.