[SL4] : MotionPath animation in Silverlight 4

Un petit article pour vous présenter une nouveauté de Silverlight 4 et Blend 4 RC proposant un nouveau contrôle permettant de réaliser une animation de type MotionPath que tous les développeurs WPF connaissent.

Pour réaliser cela vous devez installer Blend 4 et créez un nouveau projet Silverlight 4

Créez un path représentant le chemin que vous souhaitez faire parcourir à vos éléments, grâce à l’outil Pen :

image

Faites Click droit sur votre path et choisissez “Make Layout Path”

image

Une PathListBox est ainsi créé !

image

Maintenant ajoutez un élément dans la PathListBox, exemple un bouton

image

Créez un storyboard qui va nous servier à animer le bouton via la PathListBox

Cliquez sur la PathListBox, déplacez vous de quelques secondes et changez la propriétée Start à 100%

image

image image

Ainsi le bouton se place à la fin du path en 2 secondes !

image

Il ne reste plus qu’à lancer le storyboard via le code ou un Trigger sur l’évènement Loaded du contrôle par exemple

image image 

Et le tour est joué ! votre bouton suit un Path de façon animé !

Code source complet de l’exemple PathListBox.zip

3 commentaires sur “[SL4] : MotionPath animation in Silverlight 4

Ajouter un commentaire

  1. Bonjour,

    Je suis designer/graphiste et pas programmeur. Je commence tout juste sur blend 4, donc s’il vous plaît expliquez simplement. Je fais une application wpf. Dans celle-ci, je cherche à faire un contrôle avec un caroussel qui présente des images. Ces images suivent une courbe ouverte. Donc si j’ai bien tout compris je dois faire une pathlistbox, chose que j’ai réussi à faire. J’ai également réussi à faire en sorte que mes images suivent la courbe, mais je souhaite compliquer la chose. Il faut que mon image centrale dans la pathlistbox soit plus grosse que les autres et que les images qui sont de chaque côté de celle-ci aient une taille dégressive. Ma pathlistbox n’a pas de bouton pour faire glisser les images de gauche à droite, comme une listbox. Comment dois-je procéder? Merci d’avance

Répondre à DieudonneK Annuler la réponse.

Un site Web propulsé par WordPress.com.

Retour en haut ↑