Accueil > Silverlight, Silverlight 4 > [SL4] : MotionPath animation in Silverlight 4

[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

Publicités
Catégories :Silverlight, Silverlight 4
  1. DieudonneK
    23 mars 2011 à 22 h 21

    Slt, cmt faire pour gerer la vitesse de mes controles dans un carousel? merci.

  2. lau
    26 mars 2012 à 10 h 03

    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

  3. Stéphane LOUGE
    26 mars 2012 à 13 h 21

    Bonjour à vous deux je viens de publier un petit article présentant la marche à suivre pour faire ce que vous demandez. Tout cela sans écrire une ligne de code 😉
    Désolé pour le retard ‘DieudonneK’ 😉

    https://slouge.wordpress.com/2012/03/26/blend-carousel-tape-par-tape-pour-designer-graphistes-sans-coder/

  1. No trackbacks yet.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s

%d blogueurs aiment cette page :