WPF Storyboard: DoubleAnimation funktioniert auf Opazität, aber nicht translateTransform?

Question

Um etwas über Animationen und UI zu lernen, mache ich eine grundlegende WPF/C# -Anwendung, bei der ein Benutzer die Anzahl der anzuzeigenden Fahrzeuge auswählt, dann erscheinen diese Fahrzeuge (dh Bilder von verschiedenen Fahrzeugen) in der Leinwand und bewegen sich.

Die WPF ist sehr einfach:

<Grid> 
      <Canvas x:Name="MenuTabCanvas" Visibility="Visible"> 
       <Label x:Name="AnimateDemo" Content="Animate!" HorizontalAlignment="Left" VerticalAlignment="Top" Width="104" Background="#25A0DA" Foreground="White" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Cursor="Hand" MouseDown="AnimateGrid" Canvas.Left="640" Canvas.Top="87"/> 
       <Canvas x:Name="AnimationCanvas" Canvas.Top="150" Canvas.Left="224" Width="814" Height="489"> 
      </Canvas>  
    </Grid> 

ich mit einem Fade-Animation begann in this post beschrieben unter Verwendung des Verfahrens und es funktioniert gut. Dann habe ich versucht, die Translatetransform, wie unten verläßt den Fade-Code in den Kommentaren angezeigt, und die Bilder erscheinen, aber nichts bewegt:

private void AnimateGrid(object sender, EventArgs e) 
    { 
     int NumberOfVehicles = 5; 
     var sb = new Storyboard(); 

     for (int i = 0; i < NumberOfVehicles; i++) 
     { 
      //create & add the images to our target canvas 
      Image Img = getRandomVehicleImage(); //returns image of vehicle 
      AnimationCanvas.Children.Add(Img); 

      Canvas.SetTop(Img, 30 + 60 * i); //position image w/in canvas 
      Canvas.SetLeft(Img, 30 + 80 * i); 

      //add an animation 
      DoubleAnimation myAnimation = new DoubleAnimation() 
      { 
       // From = 0, 
       To = 150, 
       Duration = TimeSpan.FromSeconds(2), 
      }; 
      Storyboard.SetTarget(myAnimation, Img); 
      // Storyboard.SetTargetProperty(myAnimation, new PropertyPath(Button.OpacityProperty)); 
       Storyboard.SetTargetProperty(myAnimation, new PropertyPath(TranslateTransform.XProperty)); 
      sb.Children.Add(myAnimation);    
     } 
     sb.Begin(); 
    } 

ich in der Lage gewesen, um es mit TranslateTransform.BeginAnimation zu arbeiten, aber ich würde es vorziehen, die verwenden Storyboard hier.

Warum verhält sich die Translate-Transformation anders als die Opazitäts-Animation und was muss ich tun, damit sie wie beabsichtigt funktioniert?

Answer 1

Standardmäßig wird kein TranslateTransform auf ein UIElement angewendet. Also, wenn Sie ein Bild verschieben möchten, müssen Sie zuerst seine RenderTransform Eigenschaft auf einen Translatetransform gesetzt, und dann die Target auf die richtige Eigenschaft Pfad:

Img.RenderTransform = new TranslateTransform(); 
... 
Storyboard.SetTargetProperty(myAnimation, new PropertyPath("RenderTransform.X")); 

Alternativ können Sie direkt die Translatetransform animieren, auch ohne ein Storyboard:

var transform = new TranslateTransform(); 
Img.RenderTransform = transform; 

transform.BeginAnimation(TranslateTransform.XProperty, myAnimation);