Linguaggio: HTML | XAML

Animazione dell'interfaccia utente popup (XAML)

Applies to Windows and Windows Phone

Usa le animazioni popup per mostrare e nascondere l'interfaccia utente popup, che include menu di scelta rapida e riquadri a comparsa. Gli elementi popup sono contenitori che vengono visualizzati sopra il contenuto dell'app e che scompaiono se l'utente tocca o fa clic all'esterno dell'elemento popup. Queste animazioni vengono applicate principalmente ai controlli personalizzati. Se usi elementi Popup, Flyout e MenuFlyout nel tuo codice XAML, questi hanno già animazioni predefinite della libreria e quindi non devi aggiungere alcun comportamento.

Le animazioni rilevanti per il comportamento popup sono le seguenti: PopInThemeAnimation, PopOutThemeAnimation e PopupThemeTransition.

Le animazioni popup includono una traslazione, ossia un movimento verticale da una posizione iniziale alla posizione finale mentre l'elemento popup entra o esce con un effetto di dissolvenza. La distanza e la direzione della traslazione sono specificate dall'app. Nella maggior parte dei casi la traslazione deve essere di 50 pixel, con direzione verso l'alto. Tuttavia, se l'elemento popup viene visualizzato sotto l'elemento di interfaccia utente che ha attivato il popup, la traslazione deve essere di 50 pixel, con direzione verso il basso. Ad esempio, questa traslazione verso il basso può essere usata con un riquadro a comparsa attivato da una barra di spostamento o da un'intestazione dell'app. Lo scopo è offrire all'utente un collegamento visivo tra l'elemento popup e l'elemento che lo ha attivato.

Animazioni popup nel comportamento predefinito dei controlli di Windows Runtime

Il codice predefinito per Popup, Flyout e MenuFlyout non usa le animazioni. Questi tipi di elementi hanno animazioni predefinite al di fuori dei modelli e degli stili. Popup ha una proprietà ChildTransitions che parte come null e, in questo caso, puoi aggiungere PopupThemeTransition se vuoi. Questo può essere utile per adattare FromHorizontalOffset o FromVerticalOffset.

Altre risorse

L'esempio delle animazioni di personalità XAML mostra come usare gli elementi PopInThemeAnimation e PopOutThemeAnimation definiti in Storyboard e richiamati in modo esplicito. Questo è lo scenario 1 dell'esempio.

Per conoscere le procedure consigliate di progettazione per l'uso di queste animazioni, vedi Linee guida ed elenco di controllo per le animazioni dell'interfaccia utente popup.

Argomenti correlati

Animazione dell'interfaccia utente
Animazione dell'interfaccia utente basata su bordi
Guida introduttiva: Animazione dell'interfaccia utente con animazioni della libreria
Esempio di animazioni di personalità XAML
PopInThemeAnimation
PopOutThemeAnimation
PopupThemeTransition

 

 

Mostra:
© 2014 Microsoft