Expression Blend, en sa qualité de logiciel de design professionnel facilite la création d’animations. Nous allons créer une petite animation inutile pour illustrer son fonctionnement. Repartez d’une page toute neuve et ouvrez-là dans Expression Blend. Pour rappel, cliquez-droit sur le fichier XAML et choisissez Ouvrir dans expression blend.
Nous allons à présent ajouter un bouton. Sélectionnez le bouton dans la boite à outils et faites le glisser sur la surface de la page (voir la figure suivante).
Ajout d'un bouton à partir de Blend
Allez maintenant dans le menu Fenêtre et choisissez espace de travail puis animation afin de passer dans la vue dédiée à l’animation (voir la figure suivante).
Changement de l'espace de travail
En bas, dans l’onglet Objets et chronologie, cliquez sur le plus pour créer une nouvelle animation (voir la figure suivante).
Création d'une nouvelle animation
Donnez un nom à votre Storyboard, comme indiqué à la figure suivante.
Nommage du storyboard
Il apparaît ensuite en bas à droite la ligne de temps qui va nous permettre de définir des images clés (voir la figure suivante).
La ligne de temps du storyboard
Déplacez le trait jaune qui est sous le chiffre zéro pour le placer sous le chiffre un, en le sélectionnant par le haut de la ligne. Cela nous permet de définir une image clé à la première seconde de l’animation. Nous allons déplacer le bouton vers le bas à droite.
Cela signifiera que pendant cette seconde, l’animation fera le trajet de la position 0 à la position 1 correspondant au déplacement du bouton que nous avons réalisé.
Pour voir comment rend l’animation, cliquez sur le petit bouton de lecture en haut de la ligne de temps (voir la figure suivante).
Démarrage de l'animation
Je ne peux pas vous illustrer le résultat, mais vous devriez voir votre rectangle se déplacer de haut en bas à droite. Essayez ! N’hésitez pas à réduire le zoom si vous ne voyez pas tout l’écran du designer. Et voilà, un début d’animation plutôt simple à faire
!
Sauvegardez votre fichier et repassez dans Visual Studio. Vous pouvez voir que le fichier XAML, après rechargement, contient désormais un code qui ressemble au suivant :
Code : XML
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="MonStoryBoard">
<DoubleAnimation Duration="0:0:1" To="166"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="button" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:1" To="26"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="button" d:IsOptimized="True"/>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MON APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"
Margin="12,0"/>
<TextBlock Text="nom de la page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button x:Name="button" Content="Button" HorizontalAlignment="Left"
Margin="137,68,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
On peut voir qu’il nous a mis une CompositeTransform dans le bouton avec une translation sur l’axe des X et sur l’axe des
Y de une seconde.
Remarquez la syntaxe particulière qu’a utilisé Blend : Code : XML
<DoubleAnimation Duration="0:0:1" To="166"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="button" d:IsOptimized="True"/>
et notamment sur la propriété TargetProperty. Alors que dans mon exemple, j’avais donné un nom à la transformation pour animer une propriété de cette transformation, ici Blend a choisi d’animer une propriété relative du bouton, nommé button.
Il dit qu’il va animer la propriété TranslateX de l’objet CompositeTransform faisant partie du RenderTransform correspondant au bouton, sachant que la propriété RenderTransform fait partie de la classe de base UIElement.
Revenons à Expression Blend pour rajouter une rotation. Plaçons donc notre ligne de temps sur la deuxième seconde. Je déplace mon bouton en bas à gauche afin de réaliser une translation à laquelle je vais combiner une rotation. Aller dans la fenêtre de propriétés du bouton et aller tout en bas pour cliquer sur transformer, et choisir le deuxième onglet pour faire pivoter (voir la figure suivante).
Rotation d'un contrôle via Blend
Vous pouvez désormais choisir un angle, disons 40°. Vous pouvez vérifier que la translation se fait en même temps que la rotation en appuyant sur le bouton de lecture.
Terminons enfin notre mini boucle en déplaçant la ligne de temps sur la troisième seconde et en faisant revenir le bouton à la position première et en réglant l’angle sur 360°.
Et voilà, nous avons terminé. Enfin… presque. L’animation est prête mais rien ne permet de la déclencher. Il existe une solution pour le faire avec Expression Blend, via les comportements que l’on trouve plus souvent sous le terme anglais de Behavior. J’ai choisi de ne pas en parler dans ce cours car cela nécessiterait pas mal d'explications qui ne nous serviront pas particulièrement pour la suite.
Nous allons donc retourner dans Visual Studio pour démarrer manuellement l'animation, par exemple lors du clic sur le bouton.
Rajoutons donc l’événement clic directement dans notre bouton : Code : XML
<Button x:Name="button" Content="Button" Height="77"
Margin="98,60,165,0" VerticalAlignment="Top"
RenderTransformOrigin="0.5,0.5" Tap="Button_Tap">
<Button.RenderTransform>
<CompositeTransform/>
</Button.RenderTransform>
</Button>
Avec dans le code behind : Code : C#
private void Button_Tap(object sender, System.Windows.Input.GestureEventArgs e) { MonStoryBoard.Begin();
}
Et voilà. Notre animation est terminée !
Projections 3D
Chaque élément affichable avec le XAML peut subir une projection 3D. Cela consiste à donner à une surface 2D une perspective 3D afin de réaliser un effet visuel. Plutôt qu’un long discours, un petit exemple qui parlera de lui-même. Prenons par exemple une image, l’image de la couverture de mon livre sur le C# :
Code : XML
<Image
Source="http://uploads.siteduzero.com/files/365001_366000/365350.jpg"/>
Qui donne la figure suivante.
Image de la couverture du livre pour apprendre le C# dans l'émulateur
Pour lui faire subir un effet de perspective, nous pouvons utiliser le XAML suivant : Code : XML
<Image
Source="http://uploads.siteduzero.com/files/365001_366000/365350.jpg">
<Image.Projection>
<PlaneProjection RotationX="-35" RotationY="-35"
RotationZ="15" />
</Image.Projection>
</Image>
qui lui fera subir une rotation de -35° autour de l’axe des X, de -35° autour de l’axe des Y et de 15° autour de l’axe des Z, ce qui donnera la figure suivante.
L'image avec une projection 3D
Plutôt sympa comme effet non ? Nous avons utilisé la classe PlaneProjection pour le réaliser.
Il existe une autre classe permettant de faire des projections suivant une matrice 3D, il s’agit de la classe Matrix3DProjection mais je pense que vous ne vous servirez que de la projection plane.
Alors, c’est très joli comme ça, mais combiné à une animation, c’est encore mieux.
Prenons le XAML suivant : Code : XML
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Sb">
<DoubleAnimation Storyboard.TargetName="Projection"
Storyboard.TargetProperty="RotationZ"
From="0" To="360" Duration="0:0:5" />
<DoubleAnimation Storyboard.TargetName="Projection"
Storyboard.TargetProperty="RotationY"
From="0" To="360" Duration="0:0:5" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<StackPanel>
<Image
Source="http://uploads.siteduzero.com/files/365001_366000/365350.jpg">
<Image.Projection>
<PlaneProjection x:Name="Projection" RotationX="0"
RotationY="0" RotationZ="0" />
</Image.Projection>
</Image>
</StackPanel>
Vous vous doutez que je vais animer la rotation sur l’axe des Y et sur l’axe des Z de 0 à 360 degrés pendant une durée de 5 secondes …
Difficile de vous montrer le résultat, mais je ne peux que vous encourager à tester chez vous (voir la figure suivante).
Animation d'une projection 3D
Vous n’aurez bien sûr pas oublié de démarrer l’animation, par exemple depuis l’événement de chargement de page : Code : C#
public MainPage()
{ InitializeComponent();
Loaded += MainPage_Loaded;
}
void MainPage_Loaded(object sender, RoutedEventArgs e) {
Sb.Begin();
}
Le XAML possède un framework complexe d’animation.
Blend se révèle un atout de qualité dans la réalisation d’animations complexes.
Les projections 3D permettent d’ajouter un effet de perspective 3D dont le rendu est plutôt intéressant.
Voilà pour cette introduction à XAML ou à Silverlight pour Windows Phone. Je n’ai bien sûr pas pu tout présenter et je m’excuse d’être passé rapidement sur certains points afin que ce cours garde une taille raisonnable et éviter de vous endormir avec plein de petits détails. N’hésitez pas à creuser les points qui vous intéressent, la documentation MSDN est plutôt bien fournie sur le sujet.
Vous avez cependant toutes les bases vous permettant de démarrer la réalisation d’applications pour vos Windows Phone.
Alors, n’hésitez pas à vous entraîner sur ce que vous avez appris et ensuite à découvrir la suite du cours où nous allons plonger petit à petit dans les spécificités de Windows Phone …
Partie 2 : Un mobile orienté données
Maintenant que l’échauffement est terminé et que nous commençons à avoir des bonnes notions pour démarrer avec le XAML, il est temps de passer la vitesse supérieure. Dans cette partie, nous allons voir comment travailler avec les données dans nos applications pour Windows Phone et surtout comment utiliser la liaison de données. C’est une étape indispensable pour pouvoir réaliser des applications d’envergures. Nous allons aussi voir d'autres choses, comme le très intéressant et très utile contrôle ListBox, comment gérer les différents états visuels, mais attaquons nous tout de suite à une spécificité des applications Windows Phone : la navigation et les différents états d'une application.