Application d’animations de la table de montage séquentiel à plusieurs objets XAML

Applies to Windows and Windows Phone

Voici comment éviter de devoir créer plusieurs animations de la table de montage séquentiel en appliquant à la place la même table de montage séquentiel à plusieurs objets.

Examinez cette page XAML d’une application, qui affiche une grille d’images de pavé numérique. Quand l’utilisateur appuie sur l’un de ces boutons, nous voulons l’animer pour donner l’impression qu’il a bougé.

Un fichier XAML avec plusieurs boutons : voulez-vous vraiment créer une animation de table de montage séquentiel pour chacun d’eux ?

Comme nous l’avons vu dans la rubrique Apparence et animation d’un bouton, contrairement à iOS où nous varions au fil du temps des paramètres tels que l’opacité dans un bloc d’animation, Windows 8 utilise des objets de table de montage séquentiel. Si vous avez plusieurs objets XAML similaires à l’écran, comme avec notre grille de boutons, vous vous demandez peut-être s’il faut créer une table de montage séquentiel unique pour chaque objet. Heureusement, la réponse est non. Voici comment appliquer la même animation à plusieurs objets.

Remarque   Souvenez-vous que dans Windows 8, une table de montage séquentiel est une animation, et non un moyen de disposer votre application comme dans Xcode.

Le secret consiste à modifier par programme la propriété TargetName de la table de montage séquentiel, comme illustré dans l’exemple ci-dessous.

Définition de la table de montage séquentiel

Tout d’abord, définissez l’animation de la table de montage séquentiel. Vous pouvez utiliser Blend ou la définir manuellement en XAML. Pour obtenir un exemple d’utilisation de Blend, voir Apparence et animation d’un bouton. Si vous utilisez Blend, supprimez toute propriété TargetName, sinon l’animation sera appliquée uniquement à cette cible spécifique. Voici un exemple :


    <Page.Resources>
        <Storyboard x:Name="TapAnimation">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" >
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0.95"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" >
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0.95"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
    </Page.Resources>

Souvenez-vous d’ajouter une balise <RenderTransform> à tout objet XAML qui sera modifié par votre table de montage séquentiel, ainsi qu’un espace réservé pour la transformation spécifique qui est animée, sans quoi votre application déclenchera une exception. Voici un exemple d’objet Image prêt pour l’application de la table de montage séquentiel :


 <Image x:Name="myImage" Width="256" Height="160" RenderTransformOrigin= "0.5,0.5" >
                        <Image.RenderTransform>
                            <CompositeTransform/>
                        </Image.RenderTransform>
                    </Image>

Remarque  L’utilisation de la propriété RenderTransformOrigin= "0.5,0.5" permet de s’assurer que toute animation est centrée au milieu de l’objet.

Application de la table de montage séquentiel

Associez ensuite la table de montage séquentiel à un objet et déclenchez-la selon les besoins. Le seul inconvénient est que vous ne pouvez pas modifier la propriété TargetName pendant la lecture de l’animation, sinon l’application génère une exception. Pour éviter ce problème, appelez Stop() avant de modifier la cible.

Astuce  Appeler GetCurrentState() peut détecter si une table de montage séquentiel est en cours d’exécution.

Voici le code permettant de déclencher l’animation pour un objet Image spécifique. Ce code pourrait par exemple répondre à un appui de l’utilisateur sur l’image à l’aide d’un événement PointerPressed. Il est aussi facile de l’appliquer à un Button à l’aide d’un événement Click.


 // Add using Windows.UI.Xaml.Media.Animation;
            TapAnimation.Stop();
            TapAnimation.SetValue(Storyboard.TargetNameProperty,"myImage");
            TapAnimation.Begin();

Cette approche est encore plus utile quand vous générez le nom de la nouvelle cible automatiquement à partir du contrôle qui a déclenché l’événement, comme ceci :


  private void someImages_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            TapImage.Stop();
            TapImage.SetValue(Storyboard.TargetNameProperty, (sender as Image).Name);
            TapImage.Begin();
        }

Ici, l’objet Image sur lequel l’utilisateur a appuyé crée l’événement et nous utilisons son nom comme cible. Si toutes les images de la page génèrent le même événement en cas d’appui, elles seront toutes animées avec la même table de montage séquentiel. Ainsi, dans notre exemple de pavé numérique, chaque touche sera animée, mais seulement une table de montage séquentiel devra être créée.

Remarque  Vous n’avez peut-être encore jamais croisé le mot clé as : il effectue une conversion de l’expéditeur pour en faire une Image.

Plusieurs boutons, un seul gestionnaire d’événements

Avec une application comportant plusieurs boutons similaires, il est logique de disposer d’un gestionnaire d’événements maître, plutôt que d’un gestionnaire d’événements pour chaque bouton. Chaque bouton peut utiliser le même événement de clic, mais nous devons trouver un moyen de différencier les boutons dans le code : c’est là que nous pouvons faire appel à tags.

Comme dans iOS, chaque contrôle ou objet peut avoir une balise, une valeur que vous pouvez utiliser pour l’identifier de manière unique. Par exemple, avec notre pavé numérique, nous pourrions définir les boutons comme dans le code XAML ci-dessous : observez la similitude des boutons, qui ne diffèrent que par leur valeur de balise.


	<Button Content="1" HorizontalAlignment="Left" Margin="446,78,0,0" VerticalAlignment="Top" Width="120" Height="120" FontSize="48" FontWeight="Bold" Click="Button_Click" Tag="1">
    		<Button.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black"/>
    				<GradientStop Color="#FF838383" Offset="1"/>
    			</LinearGradientBrush>
    		</Button.Background>
    	</Button>
        <Button Content="2" HorizontalAlignment="Left" Margin="446,543,0,0" VerticalAlignment="Top" Width="460" Height="120" FontSize="48" FontWeight="Bold" Click="Button_Click" Tag="2">
    		<Button.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black"/>
    				<GradientStop Color="#FF838383" Offset="1"/>
    			</LinearGradientBrush>
    		</Button.Background>
    	</Button>
        <Button Content="3" HorizontalAlignment="Left" Margin="446,393,0,0" VerticalAlignment="Top" Width="120" Height="120" FontSize="48" FontWeight="Bold" Click="Button_Click" Tag="3">
    		<Button.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black"/>
    				<GradientStop Color="#FF838383" Offset="1"/>
    			</LinearGradientBrush>
    		</Button.Background>
    	</Button>

Tous les boutons pointent vers le même gestionnaire d’événements, Button_Click. Voici comment nous pouvons lire la valeur de balise et réagir en conséquence dans le gestionnaire :


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var tag = (sender as Button).Tag;

            int t = Convert.ToInt16(tag);

            switch (t)
            {
                case 0: break;
                case 1: break;
                case 2: break;
                default: break;
            }
        }

Rubriques associées

Utilisation d’animations par programme
Prise en main : Animation
Procédure : création d’interfaces utilisateur en XAML et à l’aide d’Expression Blend
Animations dans une table de montage séquentiel

 

 

Afficher:
© 2014 Microsoft