How to bind to Animation To and FROM properties

If you tried to bind to From and To values of Animation anything, you sure pay attention to the behavior, that the animation object just ignored you in the best case, in worth case, you couch very strange an annoying exception (if used from code-behind) "Cannot freeze the storyboard timeline tree for use across threads". What's the problem?

First of all, just note in your notepad: "When you start an animation, Timeline object copying itself frozen into internal boundary. There it creates Clock object and begin to run. So, how to change properties of the animation and make them occur immediately.

First of all, you can recreate whole storyboard. Rather costly and  very bad idea. You can make some woodoo on Completed event. For example, call invalidation of the animation to affect your changes. Good idea, but still a lot of mess. Another try is to work with FillBehavior. This one make you able to tell your animation to stop or to hold up for something else. Very good and very efficient method is to deal with internal clocks. For example, recreate or exchange them by your own. This is really hardcore. Maybe other day I'll explain this methods, but today, we'll just call new BeginAnimation to restart it. This method is not very efficient, but better then nothing. In order to do it, we'll deal today with EventTriggers.

So let's build the simple application, that continuously  changes the size of rectangle, based on values you provided with sliders. So, here we go.

First of all, let's create an animation

<Storyboard x:Key="myAnim">

      <ParallelTimeline>

        <DoubleAnimation

          Name="myAnimWidth"

          Storyboard.TargetName="myRect"

          Storyboard.TargetProperty="Width"

          From="100"

          To="500"

          Duration="0:0:5" 

          RepeatBehavior="Forever"

          AutoReverse="True"

                />

        <DoubleAnimation

          Name="myAnimHeight"

          Storyboard.TargetName="myRect"

          Storyboard.TargetProperty="Height"

          From="100"

          To="500"

          Duration="0:0:5"

          RepeatBehavior="Forever"

          AutoReverse="True"

                />

      </ParallelTimeline>

    </Storyboard>

We'll put in into resources in order us to be able to reuse and rerun it. The next step is to create two sliders, a couple of textblocks and the rectangle. I'll not rewrite a code here, 'cos it's really straight forward and we have nothing tricky with it. Now, I want to start the animation right after my page was loaded, so I'll add Page.Trigger to my Page.Loaded event. Pay attention, this method makes you able to almost any event from XAML. This is really cool feature. So, let's do it. 

<Page.Triggers>

    <EventTrigger RoutedEvent="Page.Loaded">

      <EventTrigger.Actions>

        <BeginStoryboard Storyboard="{StaticResource myAnim}"/>

      </EventTrigger.Actions>

    </EventTrigger>

  </Page.Triggers>

So far so good. The next step is to rerun the animation each time I'm changing the value of my sliders. As well as done with Page, Slider (as well as any other ContentPresenter has it's own event. So let's restart the animation on value change

<Slider Name="slFrom" Value="50" Width="150" Minimum="50" Maximum="600">

        <Slider.Triggers>

          <EventTrigger RoutedEvent="Slider.ValueChanged">

            <EventTrigger.Actions>

              <BeginStoryboard Storyboard="{StaticResource myAnim}"/>

            </EventTrigger.Actions>

          </EventTrigger>

        </Slider.Triggers>

      </Slider>

Rather simple, isn't it? We done, now we have our storyboard restarted and "invalidated" each time the bindings of From="{Binding ElementName=slFrom, Path=Value}" and To="{Binding ElementName=slTo, Path=Value}" where changed.

That's all, folks

Source code for this article