title: WPF Jitters with TranslateTransform and Canvas.SetLeft
body: <p>I'm running into a problem of "jitters" when moving the X, Y coordinates of controls. Basically, I got an animation to work two different ways: 1) TranslateTransform of the X property, and 2) A Timer that calls Canvas.SetLeft. Both of which cause the image to move, but not smoothly.</p>
  
  <p>XAML:</p>
  
  <pre><code>&lt;Canvas Margin="0" Name="CanvasContainer"&gt;
      &lt;Canvas Margin="0" Name="FirstCanvas" Background="White"&gt;
          &lt;Image Name="FirstImage" Opacity="1" Margin="0,0,0,0" Canvas.Left="0" Canvas.Top="0" Source="someImage.png" /&gt;
      &lt;/Canvas&gt;
      &lt;Canvas Margin="0" Name="SecondCanvas" Background="DarkOrange"&gt;
          &lt;Image Name="SecondImage" Opacity="1" Margin="0,0,0,0"   Canvas.Left="0" Canvas.Top="0" Source="anotherImage.png" /&gt;
      &lt;/Canvas&gt;
  &lt;/Canvas&gt;
  </code></pre>
  
  <p>TranslateTransform:</p>
  
  <pre><code>    private void StartMovement(double startX, double endX, double milliseconds = 1000)
      {
          GuiDispatcher.Invoke(DispatcherPriority.Normal, new Action&lt;Canvas, double, double, double&gt;(MoveTo), Canvas, startX, endX, milliseconds);
      }
  
      private void MoveTo(Canvas canvas, double startX, double endX, double milliseconds)
      {
          canvas.RenderTransform = new TranslateTransform();
          var animation = new DoubleAnimation(startX, endX, TimeSpan.FromMilliseconds(milliseconds));
          canvas.RenderTransform.BeginAnimation(TranslateTransform.XProperty, animation);
      }
  </code></pre>
  
  <p>Is there a better method for accomplishing this, or do I have something set up wrong? Any help would be appreciated.</p>