How to change duration of DoubleAnimation by Binding?

Question

I have an ellipse like this:

<Ellipse Width="40" Height="50" Fill="Green">
        <Ellipse.RenderTransform>
            <RotateTransform Angle="0" CenterX="20" CenterY="25" />
        </Ellipse.RenderTransform>
        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.Loaded" >
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                    From="0" To="360" Duration="{Binding Path=Dudu}" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>

I want the ellipse rotate with speed depend on the Dudu property (this property use INotifyPropertyChanged to notify changed).

But duration is not changed when I change value of Dudu. I figured out the problem is Loaded event just raise on first time control is loaded only.

My question is: How can I change duration by change value of a property? What event should I use?

You may perhaps create a behavior which can invoke the animation based on the binding value. — pushpraj, Aug 11 '14 at 05:30
@ethicallogics Take a look at the [online documentation](http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.duration.aspx). — Clemens, Aug 11 '14 at 08:11

score 2 · Answer 1 · edited Nov 22 '16 at 17:41

I think the problem could be with the bonded property Dudu itself. see if it is been properly resolved and is of correct type

I attempted to create an alternative solution if above does not work

here is a sample using attached behavior

<Ellipse Width="40"
         Height="50"
         Fill="Green"
         xmlns:l="clr-namespace:CSharpWPF"
         l:AnimationHelper.AnimationDuration="0:0:2">
    <Ellipse.RenderTransform>
        <RotateTransform Angle="0"
                         CenterX="20"
                         CenterY="25" />
    </Ellipse.RenderTransform>
</Ellipse>

note that I have removed the trigger with the storyboard and attached the property AnimationHelper.AnimationDuration="0:0:2" you may bind it as AnimationHelper.AnimationDuration="{Binding Path=Dudu}"

AnimationHelper class

namespace CSharpWPF
{
    public class AnimationHelper : DependencyObject
    {
        public static Duration GetAnimationDuration(DependencyObject obj)
        {
            return (Duration)obj.GetValue(AnimationDurationProperty);
        }

        public static void SetAnimationDuration(DependencyObject obj, Duration value)
        {
            obj.SetValue(AnimationDurationProperty, value);
        }

        // Using a DependencyProperty as the backing store for AnimationDuration.
        // This enables animation, styling, binding, etc...
        public static readonly DependencyProperty AnimationDurationProperty =
            DependencyProperty.RegisterAttached("AnimationDuration", typeof(Duration),
            typeof(AnimationHelper), new PropertyMetadata(Duration.Automatic,
            OnAnimationDurationChanged));

        private static void OnAnimationDurationChanged(DependencyObject d,
            DependencyPropertyChangedEventArgs e)
        {
            FrameworkElement element = d as FrameworkElement;
            element.Loaded += (s, arg) => element.RenderTransform.BeginAnimation(
                RotateTransform.AngleProperty,
                new DoubleAnimation(0, 360, (Duration)e.NewValue)
                { RepeatBehavior = RepeatBehavior.Forever });
        }
    }
}

also note that above example uses a hard-coded DoubleAnimation on the RenderTransform property. Assuming that RenderTransform is initialized with an instance of RotateTransform. you may also extend the behavior make it dynamic if needed.

Nice one! It worked..Instead of assigning the delegate on loaded event, one can directly assign the value. — Krishna P S, May 20 '16 at 06:16

How to change duration of DoubleAnimation by Binding?

1 Answers1