title: Dynamic animation using storyboards
body: <p>I develop an application in WPF using the MVVM pattern.
  I am displaying an oriented graph, with nodes and links (see following picture).</p>
  
  <p><a href="http://free0.hiboox.com/images/1110/diapo1c36a4b95802846b8553d2fe9b9e6639.png?26" rel="noreferrer">http://free0.hiboox.com/images/1110/diapo1c36a4b95802846b8553d2fe9b9e6639.png?26</a></p>
  
  <p>The user can drag and drop the nodes from one "cell" to another. When the user drops a node, its position is changed to align it in the grid. What I want to do, is to animate the node when its position is adjusted during the alignment routine.</p>
  
  <p>The nodes, links and separators are all items displayed in an ItemsControl. Their representation is controlled with some DataTemplates, and their position with Styles.</p>
  
  <p>What I am doing is the following :</p>
  
  <pre><code>private void Align() {
      // Computations...
      TX = ... //Target X is set
      TY = ... //target Y is set
      X = TX;
      Y = TY; // X and Y setters fire PropertyChanged
  }
  
  &lt;Style x:Key="NodeViewStyle"&gt;
      &lt;Setter Property="Canvas.Left" Value="{Binding X, Mode=TwoWay}"/&gt;
      &lt;Setter Property="Canvas.Top" Value="{Binding Y, Mode=TwoWay}"/&gt;
  </code></pre>
  
  <p>What I want to do is the following :</p>
  
  <pre><code>private void Align() {
      // Computations...
      TX = ...
      TY = ... //TX and TY setters fire PropertyChanged
  }
  
  &lt;Style x:Key="NodeViewStyle"&gt;
      &lt;Setter Property="Canvas.Left" Value="{Binding X, Mode=TwoWay}"/&gt;
      &lt;Setter Property="Canvas.Top" Value="{Binding Y, Mode=TwoWay}"/&gt;
      &lt;Style.Triggers&gt;
          &lt;DataTrigger Binding="{Binding State}" Value="UPDATEPOS"&gt;
              &lt;DataTrigger.EnterActions&gt;
                  &lt;BeginStoryboard&gt;
                      &lt;Storyboard&gt;
                          &lt;DoubleAnimation To="{Binding TX}" Duration="0:0:1"
                                           Storyboard.TargetProperty="(Canvas.Left)"/&gt;
                      &lt;/Storyboard&gt;
                  &lt;/BeginStoryboard&gt;
              &lt;/DataTrigger.EnterActions&gt;
          &lt;/DataTrigger&gt;
      &lt;/Style.Triggers&gt;
  </code></pre>
  
  <p>But this does not work at runtime, since I cannot bind to "To" property of my DoubleAnimation (it's a Freezable).</p>
  
  <p>What is the simpliest way of doing such a dynamic animation ? Animating the "X" property through a timer directly in the viewmodel ?</p>