Pierre's Embedded and Mobile Blog

Soulevons le capot des systèmes embarqués et mobiles

[Windows Phone 7] Animations “Tilt” sur des contrôles, et transitions entre les pages

[Windows Phone 7] Animations “Tilt” sur des contrôles, et transitions entre les pages

  • Comments 3

Metro, le langage de design de Windows Phone 7, encourage l’utilisation des animations et du mouvement  dans l’interface graphique. Utilisées avec parcimonie, animations  des contrôles et transitions de pages fournissent un feedback visuel à l’utilisateur sur ce qui se passe sur le téléphone : par exemple confirmer à l’utilisateur qu’il a tapé sur le bon élément d’une listbox en le faisant “tilter” (l’élément va légèrement pivoter sur lui-même, s’enfoncer en quelque sorte dans l’interface. Malheureusement le SDK Windows Phone 7 de base ne contient pas d’animations à réutiliser pour “imiter” le comportement natif. Et il n’est pas trivial de redévelopper ces animations. Heureusement, Le Silverlight Toolkit est là pour nous aider.

Utiliser un Tilt Effect comme feedback visuel

Pour gérer le feedback visuel de l’appui sur un contrôle de l’utilisateur, le “tilt” est l’animation la plus utilisée dans Metro. On trouve dans les sample codes Windows Phone 7 sur MSDN exactement cet effet, implémenté sous la forme d’un DependencyObject. Le code d’exemple est fourni sous la forme d’une solution qui montre comment se servir de cet effet. Il faut d’abord importer le fichier TiltEffect.cs dans notre propre solution:

SolutionTiltEffect

Ensuite il faut référencer son namespace,, directement dans le XAML:

xmlns:local="clr-namespace:ControlTiltEffect"

Enfin, il reste à utiliser la propriété TiltEffect.IsTiltEnabled pour activer ou désactiver cet effet sur tous les enfants du contrôle sur lequel on applique ce DependencyObject.  Par exemple l’appliquer aux éléments d’une ListBox:

<ListBox local:TiltEffect.IsTiltEnabled="True">

On peut aussi choisir de l’appliquer à une page entière (en utilisant cet attribut directement au niveau de la PhoneApplicationPage) puis choisir de “supprimer” ce TiltEffect sur certains éléments (comme par exemple les boutons, qui bénéficient en général d’autres mécanismes de feedback visuel. Dans ce cas là on peut utiliser l’attribut suivant:

<Button local:TiltEffect.SuppressTilt="True" />

Insérer des transitions entre les pages d’une application

Les transitions sont utilisées pour rendre la navigation entre les pages plus naturelle et fluide. Le Silverlight Toolkit permet d’utiliser toute une bibliothèque de transition entre les pages, dont certaines imitent celles de l’interface native. On va ainsi retrouver les transitions suivantes:

  • roll et rotate qui sont plutôt des transitions pour passer des modes portraits à paysage et dont on peut régler le sens
  • slide qui permet de faire glisser la page vers n’importel quel coté, en entrée ou en sortie
  • swivel qui fait pivoter la page sur l’axe des X en entrée ou en sortie.
  • turnstile, qui rappelle une page qui se tourne, dans un sens ou dans l’autre

L’intégration de ces transitions est extrêmement simple et en deux étapes: d’abord, il faut changer une ligne de code dans le fichier app.xaml.cs: plus précisément, dans la méthode InitializePhoneApplication, on instancie une PhoneApplicationFrame qu’on assigne à l’objet RootFrame. Pour utiliser les transitions du Silverlight Toolkit, il faut instancier une TransitionFrame à la place:

RootFrame = new TransitionFrame();

Ceci étant fait, il ne reste plus qu’à intégrer, en XAML, la transition souhaitée, page par page. Par exemple, pour des transitions de type Turnstile en entrée et sortie de page:

<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>

Et c’est tout!

Vous n’avez maintenant plus d’excuse pour intégrer les “mouvements” de base de Metro. Mais attention à ne pas en abuser: plus une animation est utilisée (voire sur-utilisée), plus elle perd de sa valeur dans l’interface!

  • Bonjour ,

    j'installé le  Le Silverlight Toolkit mais j'arrive pas a l'intégré dans mon visual studio 2010 !!

    <toolkit:TransitionService.NavigationInTransition> est inconnu pour lui !!!

  • il faut bien rajouter la référence dans le projet, et bien entendu le namespace dans le xaml.

  • Comment trouver le fichier TiltEffect.cs?

Page 1 of 1 (3 items)
Leave a Comment
  • Please add 7 and 4 and type the answer here:
  • Post