WPF Storyboard: DoubleAnimation Works On Opacity But Not TranslateTransform?

Question

To learn about animation and UI, I'm making a basic WPF/C# application where a user selects the number of vehicles to display then those vehicles (ie images of different vehicles) appear in the canvas and move around.

The WPF is very simple:

    <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>

I started with a fade animation using the method described in this post and it works fine. Then I tried the translatetransform as shown below leaving the fade code in comments, and the images appear but nothing moves:

  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();
    }

I have been able to get it to work with TranslateTransform.BeginAnimation but I would prefer to use the storyboard here.

Why does the translate transform behave differently than the opacity animation and what do I need to do to get it to function as intended?

score 5 · Accepted Answer · answered May 27 '16 at 05:55

By default, there is no TranslateTransform applied to a UIElement. So if you want to move an Image, you first have to set its RenderTransform property to a TranslateTransform, and then set the TargetProperty to the correct property path:

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

Alternatively, you could directly animate the TranslateTransform, even without a Storyboard:

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

transform.BeginAnimation(TranslateTransform.XProperty, myAnimation);

WPF Storyboard: DoubleAnimation Works On Opacity But Not TranslateTransform?

1 Answers1