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
Utilizzare i primary constructor in C#
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Generare file per il download da Blazor WebAssembly
Specificare il versioning nel path degli URL in ASP.NET Web API
Assegnare un valore di default a un parametro di una lambda in C#
Creare un'applicazione React e configurare Tailwind CSS
Creare alias per tipi generici e tuple in C#
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Evitare il flickering dei componenti nel prerender di Blazor 8
Definire stili a livello di libreria in Angular
Code scanning e advanced security con Azure DevOps
Gestire liste di tipi semplici con Entity Framework Core
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Paginare i risultati con QuickGrid in Blazor
- Ottimizzazione dei block template in Angular 17