Nel Microsoft design style applicato in Windows 8, le animazioni sono parte attiva della user experience poichè sono finalizzate ad una maggiore compresione della presenza degli elementi e soprattutto del loro alternarsi durante l'utilizzo sistema operativo.
Microsoft ha ritenuto questo principio così importante anche per le Windows Store app tanto da aver arricchito fin da subito di una proprietà Transitions tutti oggetti grafici che ereditano da UIElement.
Con tale proprietà, di tipo TransitionCollection, possiamo gestire le animazioni di ogni elemento dell'interfaccia con una semplicità estrema, ma anche con la consueta flessibilità di WinRT.
TransitionCollection accetta una collezione di oggetti Transition e delle sue estensioni. Nell'SDK troviamo:
- AddDeleteThemeTransition
- ContentThemeTransition
- EdgeUIThemeTransition
- EntranceThemeTransition
- PaneThemeTransition
- PopupThemeTransition
- ReorderThemeTransition
- RepositionThemeTransition
I loro nomi sono abbastanza autoesplicativi sull'animazione che possono applicare ad un oggetto, in relazione ad un corrispondente evento. Uno degli aspetti interessanti è anche la possibilità di combinare tra loro più transizioni.
L'utilizzo è estremamente semplice e come sempre può essere gestito sia da markup diretto, che negli Style/Template e anche programmaticamente.
<Button Content="Button"> <Button.Transitions> <TransitionCollection> <EntranceThemeTransition /> </TransitionCollection> </Button.Transitions> </Button>
Oltre a singoli UIElement, collezioni di Transition possono essere applicati anche agli elementi interni a ItemsControl, ContentControl e Panel.
Per questi oggetti, TransitionCollection è esposto da altre proprietà rispetto a Transitions, come ItemContainerTransitions, ContentTransitions e ChildrenTransitions. Con esse le transizioni sono applicate automaticamente in sequenza per ciascun elemento delle collezioni, creando così effetti molto piacevoli.
<ItemsControl Grid.Row="1"> <ItemsControl.ItemContainerTransitions> <TransitionCollection> <EntranceThemeTransition /> </TransitionCollection> </ItemsControl.ItemContainerTransitions> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"> <StackPanel.Transitions> <TransitionCollection> <EdgeUIThemeTransition /> </TransitionCollection> </StackPanel.Transitions> </StackPanel> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.Items> <Rectangle Fill="Red" Width="100" Height="100" Margin="10" /> <Rectangle Fill="Red" Width="100" Height="100" Margin="10" /> </ItemsControl.Items> </ItemsControl>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare QuickGrid di Blazor con Entity Framework
Evitare la command injection in un workflow di GitHub
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Usare le collection expression per inizializzare una lista di oggetti in C#
Reactive form tipizzati con modellazione del FormBuilder in Angular
Le novità di Angular: i miglioramenti alla CLI
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Utilizzare i primary constructor di C# per inizializzare le proprietà
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Utilizzare Model as a Service su Microsoft Azure