Nuova release del Silverlight Toolkit for Windows Phone: i controlli LongListSelector e NavigationTransition

Print Content | More

Continuiamo ad esplorare i nuovi controlli introdotti nell’aggiornamento del Silverlight Toolkit per Windows Phone.

LongListSelector

Premessa: a questo controllo dedicherò in futuro un post dedicato, dato che è piuttosto articolato e richiede parecchie informazioni per essere compreso appieno e utilizzato. Vi anticipo solo che anche in questo caso parliamo di un controllo che viene già utilizzato nelle applicazioni native di Windows Phone 7, nello specifico nell’applicazione People. Il LongListSelector è una sorta di ListBox, che però permette di:

  • raggruppare gli elementi per categoria (ad esempio, in People i contatti sono raggruppati per l’iniziale)
  • utilizzare una jump list, ovvero la possibilità di saltare velocemente ad una determinata categoria (sempre in People, se premete su una delle iniziali avete la possibilità di saltare direttamente ai contatti che iniziano con una lettera specifica).
LongListSelector LongListSelector-JumpList

Il concetto di fondo è che nello XAML dovremo specificare i template per:

  • il singolo elemento
  • l’header di ogni categoria
  • la jump list

Dopodichè al componente va “data in pasto” una collection di elementi: dobbiamo però sfruttare LINQ per poter fornire questa collezione già raggruppata per categorie, così che il controllo sappia come suddividere gli elementi.

Se volete già iniziare a studiarlo e a fare qualche esperimento, il toolkit contiene una valida applicazione di esempio che ne mostra il funzionamento.

Transitions

Di default, le pagine di un’applicazione Windows Phone 7 non utilizzano alcuna animazione: quando passate da una vista all’altra, semplicemente quella corrente viene “nascosta” per lasciar spazio a quella nuova. Silverlight, però, consente, grazie anche a strumenti visuali come Blend, di rendere più piacevole l’esperienza d’uso grazie alle animazioni, che non hanno alcuna utilità pratica ma rendono sicuramente più bella da vedere e da utilizzare la nostra applicazione.

Le stesse applicazioni native ne fanno largo uso: pensiamo all’animazione di entrata e uscita di una pagina ogni volta che lanciamo una nuova applicazione, nativa o di terze parti che sia. Fino ad oggi se volevamo implementare anche noi animazioni nella nostra applicazione dovevamo costruirle per conto nostro, usando Blend o creandole a mano nello XAML. La nuova versione del toolkit ci viene in aiuto, mettendoci a disposizione una serie di controlli che ci permettono di implementare le animazioni standard di Windows Phone 7 in maniera molto semplice. Vediamo come!

Il modo più semplice e immediato per introdurre un’animazione nelle nostre pagine è quella di sfruttare il TransitionFrame, che è un oggetto che ci mette a disposizione il toolkit: il frame, in un’applicazione Windows Phone 7, è la “cornice” all’interno della quale noi carichiamo le nostre pagine. Il problema è che il frame che viene utilizzato di default nelle applicazioni Windows Phone (definito dalla classe PhoneApplicationFrame) non supporta le transizioni. Ecco perciò che ci viene in aiuto il TransitionFrame, che va a sostituirsi al PhoneApplicationFrame e ci permette di realizzare animazioni semplicemente inserendo una serie di controlli nello XAML. La prima cosa da fare è perciò aprire il file App.xaml.cs della nostra applicazione (che è il punto di partenza in cui viene inizializzata la nostra applicazione al primo avvio) e posizionarci alla riga 108, dove troveremo il seguente codice:

RootFrame = new PhoneApplicationFrame();
RootFrame.Navigated += CompleteInitializePhoneApplication

Quello che dovremo fare sarà semplicemente sostituire il PhoneApplicationFrame con il TransitionFrame nel seguente modo:

RootFrame = new TransitionFrame();
RootFrame.Navigated += CompleteInitializePhoneApplication

Ora, come direbbe il buon Mauro, siamo abili e arruolati per poter utilizzare le transizioni all’interno della nostra applicazione. Vediamo un esempio di XAML che possiamo utilizzare nelle nostre pagine e che va inserito subito dopo l’inizializzazione della pagina:

<toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardIn"/>
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardIn"/>
        </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardOut"/>
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardOut"/>
        </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

Come possiamo vedere, il toolkit ci mette a dispozione due controlli:

  • <toolkit:TransitionService.NavigationInTransition> per specificare l’animazione che verrà utilizzata quando ci spostiamo verso la pagina corrente.
  • <toolkit:TransitionService.NavigationOutTransition> per specificare l’animazione che verrà utilizzata quando ci spostiamo dalla pagina corrente.

All’interno di ognuno di questi controlli, abbiamo la possibilità di specificare:

  • <toolkit:NavigationInTransition.Backward>: è l’animazione che viene utilizzata quando si arriva alla pagina tramite la pressione del tasto Back.
  • <toolkit:NavigationInTransition.Forward>: è l’animazione che viene utilizzata quando ci si sposta verso un’altra pagina usando il metodo Navigate o GoForward del NavigationService di Silverlight (ovvero la classe che ci permette di gestire lo spostamento tra le pagine all’interno della nostra applicazione).

Infine, l’ultimo step è quello di specificare l'animazione vera e propria che vogliamo ottenere. Possiamo scegliere tra:

  • <toolkit:RollTransition />: viene applicato un effetto di rotazione standard.
  • <toolkit:RotateTransition />: viene applicato un effetto di rotazione, personalizzabile impostando l’attributo Mode (esempi di valori supportati: In180Clockwise, Out90Counterclockwise, ecc.).
  • <toolkit:SlideTransition />: viene applicato un effetto di “scivolamento”, personalizzabile impostando l’attributo Mode (esempi di valori supportati: SlideDownFadeIn, SlideUpFadeIn)
  • <toolkit:SwivelTransition />: viene applicato un effetto di rotazione sull’asse verticale, anch’esso personalizzabile tramite l’attributo Mode (esempi di valori supportati: BackwardIn, ForwardIn).
  • <toolkit:TurnstileTransition/>: viene applicato un efetto di “sfogliamento” della pagina (come se si trattasse di un libro), personalizzabile tramite l’attributo Mode (esempi di valori supportati: BackwardIn, ForwardOut).

Per dare alla vostra applicazione un look coerente, una buona regola è quella di scegliere un solo tipo di animazione e utilizzarla in tutte le pagine. Questa regola vale ancora di più se stiamo parlando di due pagine collegate: in questo caso, è indispensabile utilizzare le stesse animazioni di entrata e di uscita, altrimenti si corre il rischio di generare confusione.

E’ possibile gestire le animazioni anche da codice, sfruttando le classi messe a disposizione dal Toolkit: il file TransitionSample.xaml.cs del progetto di esempio vi mostrerà come.

In conclusione

Abbiamo visto in dettaglio i nuovi controlli messi a disposizione dal toolkit: anche in questo caso non ho realizzato un progetto di esempio, dato che il Toolkit ne include già uno decisamente ben fatto.


Windows Phone , Windows Phone Toolkit , Microsoft

0 comments

Related Post


(will not be published)
(es: http://www.mysite.com)