How to change duration of DoubleAnimation by Binding?

2.1k Views Asked by At

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?

1

There are 1 best solutions below

1
On

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.