title: WPF animating a RenderTransform with a DataTrigger
body: <p>I'm having difficulties animating a render transform of a Canvas object using a data trigger. As a test case I have an ellipse on a Canvas along with two buttons. When I press each button I want the position of the ellipse to animate to that button's X coordinate:</p>
  
  <p><a href="https://i.stack.imgur.com/rhM30.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rhM30.png" alt="enter image description here"></a></p>
  
  <p>The fact that I'm using buttons in this particular example is neither here-nor-there, the point is I'm trying to trigger these animations with a DataTrigger bound to a property in my view model:</p>
  
  <pre><code>// this is the property my DataTrigger will bind to
  private string _Anim;
  public string Anim
  {
      get { return this._Anim; }
      set
      {
          this._Anim = value;
          RaisePropertyChanged(() =&gt; this.Anim);
      }
  }
  
  // a command handler for the buttons that sets my animation property
  public ICommand AnimCommand { get { return new RelayCommand&lt;string&gt;(OnAnim); } }
  private void OnAnim(string value)
  {
      this.Anim = String.Empty;   // cancel any existing animation, probably not needed...
      this.Anim = value;
  }
  </code></pre>
  
  <p>Here's the Xaml I'm using to do this. It's basically just a canvas containing an ellipse and two buttons, and the ellipse has 2 storyboards that get triggered in response to the backend property being set to different strings (i.e. "Left" and "Right"):</p>
  
  <pre><code>&lt;Viewbox xmlns:sys="clr-namespace:System;assembly=mscorlib"&gt;
      &lt;Canvas Width="350" Height="150" Background="CornflowerBlue"&gt;
          &lt;Ellipse x:Name="MyEllipse" Width="20" Height="20" Fill="Red"&gt;
              &lt;Ellipse.RenderTransform&gt;
                  &lt;TranslateTransform x:Name="myTransform" X="50" Y="50" /&gt;
              &lt;/Ellipse.RenderTransform&gt;
              &lt;Ellipse.Style&gt;
                  &lt;Style TargetType="Ellipse"&gt;
                      &lt;Style.Triggers&gt;
                          &lt;DataTrigger Binding="{Binding Anim}" Value="Left"&gt;
                              &lt;DataTrigger.EnterActions&gt;
                                  &lt;BeginStoryboard&gt;
                                      &lt;Storyboard&gt;
                                          &lt;DoubleAnimation Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" To="100" Duration="0:0:1" /&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/BeginStoryboard&gt;
                              &lt;/DataTrigger.EnterActions&gt;
                          &lt;/DataTrigger&gt;
                          &lt;DataTrigger Binding="{Binding Anim}" Value="Right"&gt;
                              &lt;DataTrigger.EnterActions&gt;
                                  &lt;BeginStoryboard&gt;
                                      &lt;Storyboard&gt;
                                          &lt;DoubleAnimation Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" To="200" Duration="0:0:1" /&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/BeginStoryboard&gt;
                              &lt;/DataTrigger.EnterActions&gt;
                          &lt;/DataTrigger&gt;
                      &lt;/Style.Triggers&gt;
                  &lt;/Style&gt;
              &lt;/Ellipse.Style&gt;
          &lt;/Ellipse&gt;
  
          &lt;Button x:Name="btnLeft" Content="Left" Command="{Binding AnimCommand}" CommandParameter="Left" Canvas.Left="100" Canvas.Top="100" Width="32" Height="24" /&gt;
          &lt;Button x:Name="btnRight" Content="Right" Command="{Binding AnimCommand}" CommandParameter="Right" Canvas.Left="200" Canvas.Top="100" Width="32" Height="24" /&gt;
  
      &lt;/Canvas&gt;
  &lt;/Viewbox&gt;
  </code></pre>
  
  <p>When I run this I can click on the first animation and then the second, and the behaviour is correct both times. However clicking on them in reverse order doesn't work...the "right" button animates correctly and the "left" button does nothing. It's as if the "right" animation is still running or locking down the property or something, a case further backed up by the fact that the situation is reversed if I swap the order of the storyboard declarations in the Xaml.</p>
  
  <p>This works fine with EventTriggers, I'm only seeing it with DataTriggers. I've also tried playing with the FillBehaviours and HandoffBehaviors, to no avail. Can someone please explain why this is happening and how to fix it?</p>