Un piccolo serpente ci conduce attraverso le principali caratteristiche del Windows Phone 7
Introduzione Core UI & Design Conclusione Premi Discussioni
Marcosroom.it Didatticando

Transizioni

Nel capitolo precedente abbiamo parlato della navigazione, ma, se ci fai caso, è molto brutta, infatti la pagina successiva viene sostituita alla precedente senza alcun effetto. Qui è dove il Silverlight for Windows Phone Toolkit viene a salvarci. (link per il download)

La prima cosa da fare (dopo aver scaricato il toolkit e aver aggiunto un riferimento all'assembly Microsoft.Phone.Controls.Toolkit), è cambiare il frame da PhoneApplicationFrame a TransitionFrame. Apri App.xaml.cs e cambia questo nel metodo InitializePhoneApplication:

// Do not add any additional code to this method
private void InitializePhoneApplication()
{
    if (phoneApplicationInitialized)
        return;

    // Create the frame but don't set it as RootVisual yet; this allows the splash
    // screen to remain active until the application is ready to render.
    // ------------------------------
    RootFrame = new Microsoft.Phone.Controls.TransitionFrame();   // new PhoneApplicationFrame();
    // ------------------------------
    RootFrame.Navigated += CompleteInitializePhoneApplication;

    // ...
}

Ma... cosa abbiamo fatto? Per rispondere a questa domanda, dobbiamo andare un po' indietro:

Frame and page navigation
(Immagine tratta da MSDN)

Questa è la composizione di ogni applicazione per Windows Phone 7. Il contenitore più esterno è un PhoneApplicationFrame; questo oggetto contiene una PhoneApplicationPage, la quale ospita il tuo contenuto. Chiamando NevigationService.Navigate, diciamo al frame di cambiare la sua pagina-contenuto, quindi, se sostituiamo il frame predefinito con un altro in grado di effettuare degli effetti di transizione, il gioco è fatto. E questo è esattamente ciò che abbiamo fatto poco fa: il TransitionFrame, infatti, è un frame speciale che anima la pagine durante la navigazione.

Comunque, ora è il momento di scegliere gli effetti: fortunatamente, anche questo è semplice. Il toolkit mette a disposizione una serie di attached properties molto utili che possiamo utilizzare per ogni pagina. NavigationInTransition e NavigationOutTransition sono, rispettivamente, l'animazione da utilizzare quando l'utente naviga verso quella pagina e quando ne esce. Entrambe hanno 2 importanti proprietà: Backward e Forward. La prima è l'animazione da utilizzare durante la navigazione a ritroso, a l'altra per quella in avanti.

Page transitions

Quando navighi da una pagina all'altra, la prima avvia un'animazione ForwardOut, mentre la seconda una ForwardIn. Nella navigazione a ritroso, la prima inizia una BackwardOut, mentre la seconda una BackwardIn.

Ecco il codice utilizzato per applicare un effetto di transizione ad una pagina:

<phone:PhoneApplicationPage
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">

  <!-- Navigation IN -->
  <toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
      <toolkit:NavigationInTransition.Backward>
        <!-- BackwardIn -->
        <toolkit:TurnstileTransition Mode="BackwardIn"/>
      </toolkit:NavigationInTransition.Backward>
      <toolkit:NavigationInTransition.Forward>
        <!-- ForwardIn -->
        <toolkit:TurnstileTransition Mode="ForwardIn"/>
      </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
  </toolkit:TransitionService.NavigationInTransition>
  
  <!-- Navigation OUT -->
  <toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
      <toolkit:NavigationOutTransition.Backward>
        <!-- BackwardOut -->
        <toolkit:TurnstileTransition Mode="BackwardOut"/>
      </toolkit:NavigationOutTransition.Backward>
      <toolkit:NavigationOutTransition.Forward>
        <!-- ForwardOut -->
        <toolkit:TurnstileTransition Mode="ForwardOut"/>
      </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
  </toolkit:TransitionService.NavigationOutTransition>

  <!-- ... Contenuto ... -->
  
</phone:PhoneApplicationPage>

Ovviamente, puoi scegliere qualunque effetto desideri, invece di TurnstileTransition, come RollTransition, RotateTransition, SlideTransition o SwivelTransition.

 

Condividi
Indietro Tutti i webmaster che volessero segnalare, non copiare,
il contenuto di questa pagina sul proprio sito, possono farlo liberamente.
E' gradito un preavviso tramite mail all'autore e l'iserimento,
nella pagina di citazione, di un link verso la pagina corrente.
© Copyright    Marco's Room
Avanti
Download SnakeMobile

Scaricato 115 volte

Navigazione Transizioni Pulsante rotondo luminoso Trigger Un piccolo ripasso di matematica Selettore circolare Isolated storage: file e impostazioni Impostazioni Build action: Content o Resource? Audio & XNA