Effetto turnstile su tutte le pagine con il Windows Phone Toolkit

di Cristian Civera, in Windows Phone, Windows Phone Toolkit,

Il Windows Phone Runtime e l'SDK disponibili per lo sviluppo di applicazioni per Windows Phone, dispongono di molte API, elementi visuali e controlli, ma non contengono tutto il set di caratteristiche che le applicazioni native di Windows Phone hanno.

Per questo scopo viene in aiuto Silverlight for Windows Phone Toolkit che contiene, in forma stabile o come preview, controlli o API per arricchire le proprie applicazioni e per renderle il più simile possibile a quelle native. Tra gli effetti che più attraggano un'applicazione Metro vi è sicuramente la transizione tra una pagina e l'altra, di nome turnstile, che si può facilmente emulare attraverso delle attached property che si possono trovare nell'assembly Microsoft.Phone.Controls.Toolkit.

In questo script si suggerisce un modo, basato sugli stili, di applicare la transizione a tutte le pagine. Prima di tutto è necessario creare uno stile per le PhoneApplicationPage. Attraverso l'oggetto TransitionService si impostano le due proprietà che permettono di specificare le transazioni in entrate e in uscita dalla pagina.

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone">

<Style x:Key="TurnstilePage"
    TargetType="phone:PhoneApplicationPage">
  <Setter Property="toolkit:TransitionService.NavigationInTransition">
    <Setter.Value>
      <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
          <toolkit:TurnstileTransition Mode="BackwardIn" />
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
          <toolkit:TurnstileTransition Mode="ForwardIn" />
        </toolkit:NavigationInTransition.Forward>
      </toolkit:NavigationInTransition>
    </Setter.Value>
  </Setter>
  <Setter Property="toolkit:TransitionService.NavigationOutTransition">
    <Setter.Value>
      <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
          <toolkit:TurnstileTransition Mode="BackwardOut" />
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
          <toolkit:TurnstileTransition Mode="ForwardOut" />
        </toolkit:NavigationOutTransition.Forward>
      </toolkit:NavigationOutTransition>
    </Setter.Value>
  </Setter>
</Style>

Definito lo stile è sufficiente utilizzarlo in tutte le pagine, come nel seguente modo.

<phone:PhoneApplicationPage
  Style="{StaticResource TurnstilePage}">
  ...

Infine, è fondamentale cambiare la creazione del frame nel file App.xaml.cs sostituendola con il codice seguente:

// Vecchia istruzione
// RootFrame = new PhoneApplicationFrame();
RootFrame = new TransitionFrame();

Il toolkit è disponibile a questo indirizzo:
http://silverlight.codeplex.com/

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi