Concept:

Nos applications WPF avancent à grand pas et pour améliorer l’aspect visuel de celles-ci, nous avons décidé d’implémenter quelques storyboards qui permettront d’effectuer diverses animations durant par exemple un chargement, un jeu, ... pour ne pas que nos applications paraissent “gelées”.

MSDN défini le stroyboard comme étant une chronologie de conteneurs qui fournit des informations de ciblage sur l'objet et la propriété pour ses animations enfants. 

Réalisation:

Pour la réalisation de nos différents storyboards nous avons utilisé l’outil “Microsoft Expression Blend 4”.

Premièrement, nous déclarons et positionons correctement notre contrôle WPF (label, rectangle, image, etc.) dans notre page xaml via “Microsoft Visual Studio”.

Ensuite après compilation, “Microsoft Expression Blend 4” se met à jour automatiquement et l’on peut créer facilement notre storyboard en jouant par exemple sur l’opacité, la position, le content, ... de notre contrôle dans le temps. Nous définissons donc les propriétés des objets désirés à un instant voulu et de ce fait, une animation se créera au cours du temps comme pour la réalisation d’un dessin animé.

Il est donc possible de jouer sur de nombreuses propriétés de notre contrôle pour que ce dernier s’anime au cours du temps. 

Mise en place:

Après avoir joué sur nos contrôle et enregistrement de notre stroyboard, notre code dans “Microsoft Visual Studio” se met à son tour à jour et nous pouvons remarquer l’ajout de notre stroyboard venant d’être créé en haut de notre page xaml dans le <Page.Resources> … </Page.Resources>.

Par défaut, notre storyboard se lancera au démarrage de notre page car un évènement est automatiquement mis en place par “Microsoft Expression Blend 4” via :

Cependant, si nous désirons créer un stroyboard qui sera utilisé sur plusieurs de nos pages (dans notre cas un stroyboard de chargement), il suffira de déclarer celui-ci dans un dictionnaire de ressources (StoryboardDictionary.xaml) et ensuite dans notre App.xaml. Nous pourrons par conséquent réutiliser ceux-ci où bon nous semble.

Utilisation:

Toutefois, pour pourvoir démarrer notre storyboard à un moment désiré, nous allons devoir procéder par étape. Imaginons que notre storyboard démarre après le clic sur un bouton :

• Si notre storyboard doit s’animer une seule fois, nous utiliserons :

Dans ce cas, nous passons au BeginInvoke la fonction à lancer (UpdateStoryboardLS) et sur quel élément le réaliser (Rotation). On démarrera juste notre storyboard via :

• Si notre storyboard doit s’animer plusieurs fois (exemple d’un chargement), nous passerons par un thread et utiliserons donc :

App.tLoadingRotation = new Thread(new ThreadStart(AnimateLoadingRotation)); App.tLoadingRotation.Start();

 

Ce thread animera notre storyboard tant que il est en en vie (IsAlive):

void AnimateLoadingRotation()         {             Thread.Sleep(500);             while (App.tLoadingRotation.IsAlive)             {                 Dispatcher.BeginInvoke(new Action<Image>((Image i)=>                 {App.sbdLoadingRotation.Begin(this);}),                 Rotation);                 Thread.Sleep(1000);             }         }