Share via

Transizioni di pagina

  • Articolo

Le transizioni di pagina dirigono gli utenti tra le pagine di un'app, fornendo commenti sulla relazione tra le pagine. Le transizioni di pagina consentono agli utenti di comprendere se si trovano nella parte superiore di una gerarchia di navigazione, spostandosi tra pagine di pari livello o spostandosi più in profondità nella gerarchia di pagine.

Vengono fornite due diverse animazioni per lo spostamento tra le pagine di un'app, l'aggiornamento della pagina e il Drill e sono rappresentate da sottoclassi di NavigationTransitionInfo.

Esempi

Raccolta WinUI 2
WinUI Gallery

Se è installata l'app WinUI 2 Gallery, fare clic qui per aprire l'app e vedere Transizioni di pagina in azione.

Aggiornamento della pagina

L'aggiornamento della pagina è una combinazione di un'animazione di scorrimento verso l'alto e di una dissolvenza nell'animazione per il contenuto in ingresso. Usare l'aggiornamento della pagina quando l'utente viene visualizzato nella parte superiore di uno stack di spostamento, ad esempio lo spostamento tra schede o elementi di spostamento a sinistra.

La sensazione desiderata è che l'utente abbia iniziato.

page refresh animation

L'animazione di aggiornamento della pagina è rappresentata da EntranceNavigationTransitionInfoClass.

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

Nota: un frame usa automaticamente NavigationThemeTransition per animare la navigazione tra due pagine. Per impostazione predefinita, l'animazione è l'aggiornamento della pagina.

Drill

Usare il drill-through quando gli utenti esplorano più in dettaglio un'app, ad esempio la visualizzazione di altre informazioni dopo aver selezionato un elemento.

La sensazione desiderata è che l'utente abbia approfondito l'app.

drill animation

L'animazione di drill è rappresentata dalla classe DrillInNavigationTransitionInfo.

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

Scivolo orizzontale

Usa diapositiva orizzontale per mostrare che le pagine di pari livello vengono visualizzate l'una accanto all'altra. Il controllo NavigationView usa automaticamente questa animazione per lo spostamento superiore, ma se crei un'esperienza di spostamento orizzontale personalizzata, puoi implementare diapositive orizzontali con SlideNavigationTransitionInfo.

La sensazione desiderata è che l'utente stia passando tra le pagine che si trovano accanto l'una all'altra.

// 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

Per evitare di riprodurre alcuna animazione durante la navigazione, usa SuppressNavigationTransitionInfo al posto di altri sottotipi NavigationTransitionInfo.

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

L'eliminazione dell'animazione è utile se stai creando una transizione personalizzata usando animazioni Connessione ed o animazioni di visualizzazione/nascondi implicite.

Spostamento indietro

È possibile usare Frame.GoBack(NavigationTransitionInfo) per riprodurre una transizione specifica durante lo spostamento all'indietro.

Ciò può essere utile quando si modifica il comportamento di spostamento in modo dinamico in base alle dimensioni dello schermo; Ad esempio, in uno scenario di elenco reattivo/dettaglio.