Dela via

Sidövergångar

Sidövergångar navigerar användare mellan sidor i en app och ger feedback som relation mellan sidor. Sidövergångar hjälper användarna att förstå om de är överst i en navigeringshierarki, flyttar mellan syskonsidor eller navigerar djupare in i sidhierarkin.

Två olika animeringar tillhandahålls för navigering mellan sidor i en app, Siduppdatering och Drillning, och representeras av underklasser av NavigationTransitionInfo.

Exempel

WinUI 2-galleri
WinUI-galleri

Om du har installerat WinUI 2-galleriet app klickar du här för att öppna appen och se Sidövergångar i praktiken.

Siduppdatering

Siduppdatering är en kombination av en bilduppanimering och en tonad animering för det inkommande innehållet. Använd siduppdatering när användaren tas överst i en navigeringsstack, till exempel navigera mellan flikar eller vänster navigeringsobjekt.

Den önskade känslan är att användaren har startat om.

siduppdateringsanimering

Siduppdateringsanimeringen representeras av EntranceNavigationTransitionInfoClass.

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

Obs! En ram använder automatiskt NavigationThemeTransition för att animera navigeringen mellan två sidor. Som standard är animeringen siduppdatering.

Borrmaskin / Övning

Använd detaljnivå när användare navigerar djupare in i en app, till exempel visa mer information när de har valt ett objekt.

Den önskade känslan är att användaren har gått djupare in i appen.

Detaljgranskningsanimeringen representeras av klassen DrillInNavigationTransitionInfo.

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

Horisontell skjutning

Använd horisontell glidning för att visa att syskonsidor visas bredvid varandra. NavigationView-kontrollen använder automatiskt den här animeringen för den översta navigeringen, men om du skapar en egen vågrät navigeringsupplevelse kan du implementera en vågrät glidning med SlideNavigationTransitionInfo.

Den önskade känslan är att användaren navigerar mellan sidor som ligger bredvid varandra.

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

Undertrycka

Om du vill undvika att spela upp animeringar under navigeringen använder du SuppressNavigationTransitionInfo i stället för andra NavigationTransitionInfo-undertyper .

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

Att undertrycka animeringen är användbart om du skapar en egen övergång med hjälp av anslutna animeringar eller implicita visa/dölj-animeringar.

Bakåtriktad navigering

Du kan använda Frame.GoBack(NavigationTransitionInfo) för att spela upp en specifik övergång när du navigerar bakåt.

Detta kan vara användbart när du ändrar navigeringsbeteendet dynamiskt baserat på skärmstorlek. till exempel i ett dynamiskt list-/detaljscenario.