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 e nell'override del metodo OnAttached sottoscriviamo due eventi esposti dal controllo LongListSelector.

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.