Freigeben über

Seitenübergänge

  • Artikel

Seitenübergänge navigieren benutzer zwischen Seiten in einer App und geben Feedback als Beziehung zwischen Seiten. Seitenübergänge helfen Benutzern zu verstehen, ob sie sich am Anfang einer Navigationshierarchie befinden, zwischen gleichgeordneten Seiten wechseln oder tiefer in die Seitenhierarchie navigieren.

Zwei verschiedene Animationen werden für die Navigation zwischen Seiten in einer App, seitenaktualisierung und Drill bereitgestellt und werden durch Unterklassen von NavigationTransitionInfo dargestellt.

Beispiele

WinUI 2-Katalog
WinUI-Katalog

Wenn Sie die WinUI 2 Gallery-App installiert haben, klicken Sie hier, um die App zu öffnen und Seitenübergänge in Aktion zu sehen.

Seitenaktualisierung

Bei der Seitenaktualisierung handelt es sich um eine Kombination aus einer Animation zum Aufziehen einer Folie und einer Einblendungsanimation für den eingehenden Inhalt. Verwenden Sie die Seitenaktualisierung, wenn der Benutzer zum Oberen Rand eines Navigationsstapels weitergeleitet wird, z. B. zwischen Registerkarten oder Linksnavigationselementen.

Das gewünschte Gefühl ist, dass der Benutzer begonnen hat.

Seitenaktualisierungsanimation

Die Seitenaktualisierungsanimation wird durch die EntranceNavigationTransitionInfoClass dargestellt.

// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());

Hinweis: Ein Frame verwendet "NavigationThemeTransition " automatisch zum Animieren der Navigation zwischen zwei Seiten. Standardmäßig ist die Animation die Seitenaktualisierung.

Drill

Verwenden Sie Drilldown, wenn Benutzer tiefer in eine App navigieren, z. B. das Anzeigen weiterer Informationen nach dem Auswählen eines Elements.

Das gewünschte Gefühl besteht darin, dass der Benutzer tiefer in die App gelangt ist.

Drillanimation

Die Drillanimation wird durch die DrillInNavigationTransitionInfo-Klasse dargestellt.

// Play the drill in animation
myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());

Horizontale Folie

Verwenden Sie horizontale Folie, um anzuzeigen, dass gleichgeordnete Seiten nebeneinander angezeigt werden. Das NavigationView-Steuerelement verwendet diese Animation automatisch für die obere Navigation, aber wenn Sie ihre eigene horizontale Navigationsoberfläche erstellen, können Sie horizontale Folie mit SlideNavigationTransitionInfo implementieren.

Das gewünschte Gefühl besteht darin, dass der Benutzer zwischen Seiten navigiert, die sich nebeneinander befinden.

// 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 } );

Option „Suppress“

Um die Wiedergabe einer Animation während der Navigation zu vermeiden, verwenden Sie SuppressNavigationTransitionInfo anstelle anderer NavigationTransitionInfo-Untertypen.

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

Das Unterdrücken der Animation ist nützlich, wenn Sie einen eigenen Übergang mithilfe von verbundenen Animationen oder impliziten Ein-/Ausblenden von Animationen erstellen.

Rückwärtsnavigation

Sie können einen Frame.GoBack(NavigationTransitionInfo) bestimmten Übergang wiedergeben, wenn Sie rückwärts navigieren.

Dies kann nützlich sein, wenn Sie das Navigationsverhalten dynamisch basierend auf der Bildschirmgröße ändern. Beispiel: in einem reaktionsfähigen Listen-/Detailszenario.