title: How to animate image zoom change in WPF?
body: <p>I am building an image viewer. </p>
  
  <p>I have created a functionality that when the user moves the slider, it changes the <code>ZoomLevel</code> property value. This subsequently zooms the image based on the value provided by the <code>ZoomLevel</code> property. </p>
  
  <pre><code>&lt;Image 
      Name="image"
      Source="Sample1.jpg"
      Opacity="1" 
      VerticalAlignment="Center"
      HorizontalAlignment="Center"
      Stretch="None"
      RenderTransformOrigin="0.5,0.5" 
      RenderOptions.BitmapScalingMode="HighQuality"&gt;
      &lt;Image.RenderTransform&gt;
          &lt;TransformGroup&gt;
              &lt;ScaleTransform 
                  ScaleX="{Binding Path=ZoomLevel}" 
                  ScaleY="{Binding Path=ZoomLevel}" /&gt;
              &lt;TranslateTransform /&gt;
          &lt;/TransformGroup&gt;
      &lt;/Image.RenderTransform&gt;
  &lt;/Image&gt;
  </code></pre>
  
  <p>I wish to be able to animate the zooming with a <code>DoubleAnimation</code>. Animation is supposed to start from the current zoom level and then get to the zoom specified in the bound <code>ZoomLevel</code> property. It would be great if someone could provide some help in XAML. Thanks!</p>
  
  <h3>Mouse wheel code:</h3>
  
  <pre><code>private void border_MouseWheel(object sender, MouseWheelEventArgs e)
  {
      int delta;
  
      delta = e.Delta;
      zoom(delta);
  }
  
  private void zoom(int delta)
  {
      double zoomIncrement;
  
      //Different zoom levels at different zoom stages
      if (ZoomLevel &gt; 2)
      {
          zoomIncrement = Math.Sign(delta) * 0.2;
      }
      else if (ZoomLevel &gt;= 1 &amp;&amp; ZoomLevel &lt;= 2)
      {
          zoomIncrement = Math.Sign(delta) * 0.1;
      }
      else
      {
          zoomIncrement = Math.Sign(delta) * 0.06;
      }
  
      //Rounding zoom level to boundary values
      //Zooming is allowed from 10% to 600%
      if (ZoomLevel + zoomIncrement &gt; 6)
      {
          ZoomLevel = 6;
      }
      else if (ZoomLevel + zoomIncrement &lt; 0.1)
      {
          ZoomLevel = 0.1;
      }
      else
      {
          ZoomLevel += zoomIncrement;
      }
  }
  </code></pre>