Il LongListSelector è un controllo chiave dell'UI di Windows Phone, per la sua peculiarità di suddividere in gruppi la lista degli elementi visualizzati, ognuno dei quali è indentificato da un'header che rappresenta il raggruppamento.
Questo controllo viene utilizzato nella lista dei contatti che sono raggruppati alfabeticamente; effettuando il tap sull'header, viene mostrata la sola lista dei gruppi (jump-list), così da "saltare" tra un gruppo e l'altro.
Benché questo controllo ricalchi nel funzionamento di quello nativo in Windows Phone, manca di alcune caratteristiche per renderlo fedele al look and feel di Metro e del device reale.
Infatti, il controllo, contrariamente alla controparte nativa, non prevede nessun tipo di animazione all'apertura della jump-list. E' possibile aggirare questo limite creando un controllo custom partendo da quello presente nel toolkit, oppure con un behavior, come nel caso descritto in questo script.
Come prima cosa creiamo una classe che estenda il tipo Behavior
protected override void OnAttached() { base.OnAttached(); AssociatedObject.GroupViewOpened += GroupOpened; AssociatedObject.GroupViewClosing += GroupClosing; }
Il primo GroupViewOpened viene sollevato quando la jump-list è completamente aperta, mentre GroupViewClosing viene sollevato prima della sua chiusura.
Questa difformità del timing degli eventi ci costringe a creare un workaround per applicare la trasformazioni inziale agli elementi della jump-list prima che siano visualizzati e evitare così fastidiosi sfarfallii.
Il workaround consiste del creare una AttachedProperty da utilizzare per "marcare" il controllo al quale sarà applicata l'animazione.
<DataTemplate x:Key="GroupDataTemplate" > <Grid JumpListAnimationBehavior:AddGroupAnimationBehavior.IsItemGroup="true" Height="90" Width="90" Background="#FF3D9FB6" Margin="0,0,12,12"> <TextBlock Text="{Binding Title}" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </DataTemplate>
Nel nostro esempio, la proprietà IsItemGroup viene utilizzata per applicare la trasformazione iniziale agli elementi della jump-list prima che siano visualizzati.
private static void CallBack(DependencyObject d, DependencyPropertyChangedEventArgs e) { ((Grid)d).Projection = new PlaneProjection { RotationX = -90 }; }
Nel codice precedente, nel callback della attached property creiamo e assegniamo all'elemento una nuova PlaneProjection ruotando l'elemento di -90 gradi sull'asse X.
Spostiamoci nel gestore dell'evento GroupViewOpened e applichiamo un'animazione, detta di swipe.
private void GroupOpened(object sender, GroupViewOpenedEventArgs e) { for (int i = 0; i < e.ItemsControl.Items.Count; i++) { CreateStoryBoard(true, e.ItemsControl.ItemContainerGenerator.ContainerFromIndex(i)).Begin(); } }
Il metodo è semplicissimo: recuperiamo gli elementi vitalizzati nella jump-list, applichiamo l'animazione creata nel metodo CreateSoryboard e la eseguiamo.
Infine, dobbiamo riprodurre l'animazione alla chiusura della jumplist: in questo caso utilizziamo il gestore per l'evento GroupViewClosing, invocato al tap di un elemento della jump-list.
private void GroupClosing(object sender, GroupViewClosingEventArgs e) { e.Cancel = true; int animationFinished = 0; for (int i = 0; i < e.ItemsControl.Items.Count; i++) { Storyboard storyboard = CreateStoryBoard(false, e.ItemsControl.ItemContainerGenerator.ContainerFromIndex(i)); storyboard.Completed += delegate { if ((++animationFinished) == e.ItemsControl.Items.Count) { AssociatedObject.CloseGroupView(); AssociatedObject.ScrollToGroup(e.SelectedGroup); } }; storyboard.Begin(); } }
In questo caso, il metodo è leggermente più complesso, in quanto è necessario gestire il termine dell'animazione per chiudere e spostarsi al gruppo selezionato solo quando tutte le animazioni sono terminate.
A questo punto il behavior è pronto ad essere utilizzato. In allegato è disponibile il codice completo pronto ad essere utilizzato.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Miglioramenti agli screen reader e al contrasto in Angular
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Aggiungere interattività lato server in Blazor 8
Eseguire le GitHub Actions offline
Eseguire operazioni sui blob con Azure Storage Actions
Eseguire attività pianificate con Azure Container Jobs
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Implementare l'infinite scroll con QuickGrid in Blazor Server
Evitare la script injection nelle GitHub Actions
Disabilitare automaticamente un workflow di GitHub (parte 2)
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON