Silverlight 3 : ajoutez un behavior d’effets physiques à vos éléments

Si vous cliquez sur mon image en costard ci-dessous qu’adore Mitsu, vous verrez qu’une sorte d’effet physique se met en route là où vous aurez cliqué. J’ai honteusement récupéré le behavior de Nikhil dont il parle ici : https://www.nikhilk.net/BouncingPlane-Behavior.aspx

L’idée des behaviors est très séduisante. Elle propose une collaboration entre les développeurs et les designers encore plus riche. Le développeur conçoit un comportement à appliquer sur un élément (mise en place d’un effet physique, gestion automatique du multi-touch, etc.) et le designer peut alors appliquer ce comportement sur ses éléments dans Expression Blend 3 sans avoir à comprendre la moindre ligne de code.

Pour mieux comprendre, je vous propose donc de créer le même genre de résultat que mon badge ci-dessus (ou à gauche dans le menu) en utilisant Expression Blend 3 et le tout sans coder! Pour cela, récupérez le package ZIP ci-dessous contenant le code source du behavior. Il est également déjà compilé dans le fichier BoucingPlaneBehavior.dll présent dans \Bin\Release. Cela vous évite éventuellement d’avoir besoin de Visual Studio.

Copiez la DLL dans le répertoire de votre choix puis ajoutez les entrées suivantes dans la base de registre:

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Expression\Blend\3.0\Toolbox][HKEY_CURRENT_USER\Software\Microsoft\Expression\Blend\3.0\Toolbox\Silverlight][HKEY_CURRENT_USER\Software\Microsoft\Expression\Blend\3.0\Toolbox\Silverlight\v3.0] [HKEY_CURRENT_USER\Software\Microsoft\Expression\Blend\3.0\Toolbox\Silverlight\v3.0\BoucingPlaneBehavior]
@="CheminVersLaDll"

Vous trouverez également un exemple nommé BoucingBehaviors.reg dans le ZIP que vous pouvez modifier et appliquer sur votre machine.

L’idée maintenant est d’ajouter un nouveau behavior dans la liste proposée par défaut sous Blend 3. J’ai donc bêtement suivi les indications de notre chère MSDN : https://msdn.microsoft.com/en-us/library/ee341397(Expression.30).aspx . On peut également simplement ajouter une référence à la DLL dans n’importe quel projet si vous voulez éviter d’ajouter ces entrées dans la base de registre. Une fois la référence ajoutée, le behavior sera visible par Blend 3.0. Allez, jouons avec tout cela maintenant.

Lancez Blend 3.0 et créez un nouveau projet Silverlight 3:

Drag’n’droppez un contrôle image :

Spécifiez la source de votre image et ajoutez un petit effet de Pixel Shader de type DropShadow. Si vous ne savez pas comment faire, rendez-vous dans ce billet.

Rendez-vous dans les Behaviors et vous devriez voir le BouncingPlane si vous n’avez pas loupé l’étape de la base de registre :

Prenez le BouncingPlane et drag’n’droppez le sur l’image dans l’arborescence de contrôles:

Voilà! C’est fini! Lancez l’ensemble en pressant la touche magique F5 et vous pourrez vous aussi cliquer sur vos images (de vos chefs? ;-)) avec un effet de physique:

Allez, pour le vous le prouver, voici la réalisation en vidéo en moins d’1 min 30 chrono ! (Double-cliquez pour le plein écran)

Sur ce, comportez-vous bien.

David