title: Animate RenderTransform in WPF
body: <p>I've got a question regarding animations for WPF in C# code!<br>
  I have an handler function for the MouseWheel event. It just checks if you 'zoomed in' or 'zoomed out'. Just have a look at the code, the important line here is the 4th line, where the RenderTransform is set.</p>
  
  <pre><code>    private void ZoomPanCanvas_MouseWheel(object sender, MouseWheelEventArgs e) {
          var factor = (e.Delta &gt; 0) ? (1.1) : (1 / 1.1);
          currrentScale = factor * currrentScale;
          mNetworkUI.RenderTransform = new ScaleTransform(currrentScale, currrentScale);
          var pos = e.GetPosition(mNetworkUI);
          mNetworkUI.Width = ZoomPanCanvas.ActualWidth / currrentScale;
          mNetworkUI.Height = ZoomPanCanvas.ActualHeight /currrentScale;
          var dummyTransform = new ScaleTransform(factor, factor, pos.X, pos.Y);
          var offSet = new Point(dummyTransform.Value.OffsetX, dummyTransform.Value.OffsetY);
          mNetworkUI.ViewModel.Network.SetTransformOffset(offSet);
      }
  </code></pre>
  
  <p>I kept the rest of the function in the code for completeness.<br>
  What I want to do, is to <strong>animate this change of the RenderTransform</strong>!</p>
  
  <p>I already tried to use a Storyboard (with UIElement.RenderTransformProperty set). Best result was a not-animated change of the RenderTransform (but it was not the same result as this 4th line from the code achieves).</p>
  
  <p>Maybe you can help me, I already tried a few suggested methods from the other questions here.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Here's the non-working attempt and at first the chenged code from above:</p>
  
  <pre><code>    private void ZoomPanCanvas_MouseWheel(object sender, MouseWheelEventArgs e) {
          var factor = (e.Delta &gt; 0) ? (1.1) : (1 / 1.1);
          currrentScale = factor * currrentScale;
          ///mNetworkUI.RenderTransform = new ScaleTransform(currrentScale, currrentScale);
          Helper.Animations.RenderTransformAnimation(mNetworkUI, new ScaleTransform(currrentScale, currrentScale));
          var pos = e.GetPosition(mNetworkUI);
          mNetworkUI.Width = ZoomPanCanvas.ActualWidth / currrentScale;
          mNetworkUI.Height = ZoomPanCanvas.ActualHeight /currrentScale;
          var dummyTransform = new ScaleTransform(factor, factor, pos.X, pos.Y);
          var offSet = new Point(dummyTransform.Value.OffsetX, dummyTransform.Value.OffsetY);
          mNetworkUI.ViewModel.Network.SetTransformOffset(offSet);
      }
  </code></pre>
  
  <p>And it follows the static helper function:</p>
  
  <pre><code>    public static void RenderTransformAnimation(FrameworkElement element, Transform newTransform) {
          MatrixAnimationUsingKeyFrames anim = new MatrixAnimationUsingKeyFrames();
          var key1 = new DiscreteMatrixKeyFrame(element.RenderTransform.Value, KeyTime.FromPercent(0));
          var key2 = new DiscreteMatrixKeyFrame(newTransform.Value, KeyTime.FromPercent(1));
  
          Storyboard.SetTarget(anim, element.RenderTransform);
          Storyboard.SetTargetProperty(anim, new PropertyPath(UIElement.RenderTransformProperty));
          Storyboard sb = new Storyboard();
          sb.Children.Add(anim);
          sb.Duration = AnimationDuration;
          sb.Begin();
      }
  </code></pre>
  
  <p>It always throws an exception on the sb.Begin() call, telling me, something was not ok with my 'PropertyPath'. I don't know how to do it :(.
  I mean, there is no way to directly create a "TransformAnimation", right? Only MatrixAnimations are available...</p>