Thomas Lebrun

[WPF /E] Contrôler une animation créée dynamiquement

WPF /E (Windows Presentation Foundation Everywhere) permet aux développeurs de créer dynamiquement des objets directement à partir d'une chaîne de caractères représentant un bout de code XAML (eXtensible Application Markup Language).

Cela est possible grâce à la méthode createFromXaml

Il est même possible d'utiliser les transformations et les animations pour proposer une expérience utilisateur un peu plus riche. Seulement voila, à chaque fois que l'on voit un exemple d'une animation agissant sur une transformation, il se trouve que le code XAML est déjà écrit dans notre fichier. A ce moment là, il ne nous reste plus qu'à appeller (en Javascript) les méthodes begin, pause et stop de notre storyboard pour controller l'animation.

Cependant, il peut-être intéressant de se demander (comme moi) comment faire pour animer une transformation que l'on aura créée dynamiquement (au moyen de la méthode createFromXaml). A première vue, aucun problèmes en perspective: on créé notre transformation, on définit l'animation:

<Image RenderTransformOrigin="0.5, 0.5">
      <Image.RenderTransform>
        <ScaleTransform ScaleX="1" ScaleY="1" />
      </Image.RenderTransform>
      <Image.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard x:Name="AnimateImage">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName='" + MyImg + "' Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                  <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1.5"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName='" + MyImg + "' Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                  <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1.5"/>
                </DoubleAnimationUsingKeyFrames>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Image.Triggers>
    </Image>

Et on la contrôle en JS:

function hyperlink_MouseEnter(sender,args)
{     
    sender.findName("AnimateImage").begin();
      
    sender.opacity = 1;
}

 Seulement voila, ce code, bien que très simple, ne fonctionnait pas chez moi. Pourtant, à priori, il n'y a aucun problèmes au niveau du code.

Pour que cela fonctionne, il faut utiliser ce code:

<Image RenderTransformOrigin="0.5, 0.5">
      <Image.RenderTransform>
        <ScaleTransform x:Name="MyAnimation" ScaleX="1" ScaleY="1" />
      </Image.RenderTransform>
      <Image.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard x:Name="AnimateImage">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MyAnimation" Storyboard.TargetProperty="ScaleX">
                  <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1.5"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MyAnimation" Storyboard.TargetProperty="ScaleY">
                  <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1.5"/>
                </DoubleAnimationUsingKeyFrames>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Image.Triggers>
    </Image>

Pour simplifier, il vous faut nommer votre animation et en animer les propriétés.

A+