Animated Zoom with WPF

The animation of the zoom (see the previous post: Zoom the UI with WPF ) is done simply by using the mechanism of timer and synchronization provided by the classes WPF.

In the case of zoom, you must use the DoubleAnimation value animation class.
The code previously seen that applies the zoom value to the Grid control:

void SetZoom(
    double zoomFactor)
{
    GridScaleTransform.ScaleX = zoomFactor;
    GridScaleTransform.ScaleY = zoomFactor;
}

is modified slightly to introduce a gradual change of the zoom value from the current value to the desired value, based on WPF classes DoubleAnimation and method Animate:

void SetZoom(
    // desired zoom value between 0 and 1 included
    double zoomFactor)
{
    // desired zoom value between 0 and 1 included
    var duration =
        new Duration(TimeSpan.FromMilliseconds(150));
    var zfx = 
        new DoubleAnimation(
            GridScaleTransform.ScaleX,
            zoomFactor,
            duration);
    var zfy =
        new DoubleAnimation(
            GridScaleTransform.ScaleY,
            zoomFactor,
            duration);
    GridScaleTransform
        .BeginAnimation(
            ScaleTransform.ScaleXProperty,
            zfx);
    GridScaleTransform
         .BeginAnimation(
            ScaleTransform.ScaleYProperty,
            zfy);
}

This method can be linked to control events such as selecting a drop-down list, entering a text box or changing the value of a slider …