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 an der Spitze 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 bereitgestellt, Seitenaktualisierung und Drill, und werden durch Unterklassen von NavigationTransitionInfo dargestellt.

Beispiele

WinUI 2-Katalog
WinUI-Katalog

Wenn Sie die WinUI 2-Katalog-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 und einer Einblendung der Animation für den eingehenden Inhalt. Verwenden Sie die Seitenaktualisierung, wenn der Benutzer an den Anfang eines Navigationsstapels gelangt, z. B. beim Navigieren zwischen Registerkarten oder linken Navigationselementen.

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

Animation zur Seitenaktualisierung

Die Animation zur Seitenaktualisierung wird durch die EntranceNavigationTransitionInfoClass dargestellt.

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

Hinweis: Ein Frame verwendet automatisch NavigationThemeTransition , um die Navigation zwischen zwei Seiten zu animieren. Standardmäßig ist die Animation seitenaktualisierung.

Drill

Verwenden Sie drill, wenn Benutzer tiefer in eine App navigieren, z. B. weitere Informationen anzeigen, nachdem Sie ein Element ausgewählt haben.

Das gewünschte Gefühl ist, dass der Benutzer tiefer in die App eingegangen 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 die horizontale Folie, um anzuzeigen, dass gleichgeordnete Seiten nebeneinander angezeigt werden. Das NavigationView-Steuerelement verwendet diese Animation automatisch für den oberen Navigationsbereich, aber wenn Sie eine eigene horizontale Navigationsoberfläche erstellen, können Sie eine horizontale Folie mit SlideNavigationTransitionInfo implementieren.

Das gewünschte Gefühl ist, 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 } );

Suppress

Um die Wiedergabe von Animationen 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 Ihren eigenen Übergang mithilfe von verbundenen Animationen oder impliziten Ein-/Ausblenden von Animationen erstellen.

Rückwärtsnavigation

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

Dies kann hilfreich sein, wenn Sie das Navigationsverhalten basierend auf der Bildschirmgröße dynamisch ändern. beispielsweise in einem reaktionsfähigen Listen-/Detailszenario.