Question

In my WPF application, I have a Canvas object that contains some UserControl objects.

I wish to animate the UserControl objects within the Canvas using DoubleAnimation so that they go from the right of the Canvas to the left of the Canvas. This is how I have done it so far (by passing the UserControl objects into the function):

    private void Animate(FrameworkElement e)
    {
        DoubleAnimation ani = new DoubleAnimation()
        {
            From = _container.ActualWidth,
            To = 0.0,
            Duration = new Duration(new TimeSpan(0, 0, 10),
            TargetElement = e
        };

        TranslateTransform trans = new TranslateTransform();
        e.RenderTransform = trans;

        trans.BeginAnimation(TranslateTransform.XProperty, ani, HandoffBehavior.Compose);
    }

However, this doesn’t allow me to pause the animation, so I have considered using a Storyboard instead to do this, but I’m not sure how to implement this. This has been my attempt so far:

    private void Animate(FrameworkElement e)
    {
        DoubleAnimation ani = new DoubleAnimation()
        {
            From = _container.ActualWidth,
            To = 0.0,
            Duration = new Duration(new TimeSpan(0, 0, 10),
            TargetElement = e
        };

        Storyboard stb = new Storyboard();
        Storyboard.SetTarget(ani, e);
        Storyboard.SetTargetProperty(ani, "Left");
        stb.Children.Add(ani);
        stb.Begin();
    }

Of course, this fails as UserControl doesn’t have a Left property. How can I achieve what I’m after?

Thanks.

Answer 1

Just to keep this Question updated, I eventually resolved the problem. The DoubleAnimation and Storyboard were being created and Storyboard.Begin() called on in a DispatcherTimer Tick event handler.

The trick was to dispatch the call to a delegate that called Storyboard.Begin().