Question

I Have a canvas full of objects that I zoom and pan using

       this.source = VisualTreeHelper.GetChild(this, 0) as FrameworkElement;
        this.zoomTransform = new ScaleTransform();
        this.transformGroup = new TransformGroup();
        this.transformGroup.Children.Add(this.zoomTransform);
        this.transformGroup.Children.Add(this.translateTransform);
        this.source.RenderTransform = this.transformGroup;

I then have a method that moves the canvas to a a certain point (in the original coordinates) to the center of the screen:

  public void MoveTo(Point p)
    {
        var parent= VisualTreeHelper.GetParent(this) as FrameworkElement;
        Point centerPoint = new Point(parent.ActualWidth / 2, parent.ActualHeight / 2);

        double x = centerPoint.X  - p.X;
        double y = centerPoint.Y - p.Y;

        x *= this.zoomTransform.ScaleX;
        y *= this.zoomTransform.ScaleY;

        this.translateTransform.BeginAnimation(TranslateTransform.XProperty, CreatePanAnimation(x), HandoffBehavior.Compose);
        this.translateTransform.BeginAnimation(TranslateTransform.YProperty, CreatePanAnimation(y), HandoffBehavior.Compose);
    }

 private DoubleAnimation CreatePanAnimation(double toValue)
    {
        var da = new DoubleAnimation(toValue, new Duration(TimeSpan.FromMilliseconds(300)));
        da.AccelerationRatio = 0.1;
        da.DecelerationRatio = 0.9;
        da.FillBehavior = FillBehavior.HoldEnd;
        da.Freeze();
        return da;
    }

Everything works great until I actually have a zoom animation active after which the pan animation is inaccurate. I’ve tried different ways of calculation x,y and the centerpoint but can’t seem to get it right. Any help appreciated, should be simple 🙂

I’d also like to make a method that both animates zooming and pans to a point, a little unsure on the ordering to accomplish that

Answer 1

Nevermind, I’m stupid

Point centerPoint = new Point(parent.ActualWidth / 2 / this.zoomTransform.ScaleX, parent.ActualHeight / 2 / this.zoomTransform.ScaleY);

I am still interested in how I can combine the scale and zoom animations though

this.translateTransform.BeginAnimation(TranslateTransform.XProperty, CreatePanAnimation(x), HandoffBehavior.Compose);
this.translateTransform.BeginAnimation(TranslateTransform.YProperty, CreatePanAnimation(y), HandoffBehavior.Compose);

 this.zoomTransform.BeginAnimation(ScaleTransform.ScaleXProperty,    CreateZoomAnimation(factor));
 this.zoomTransform.BeginAnimation(ScaleTransform.ScaleYProperty,  CreateZoomAnimation(factor));

wont work since the scale and pan values wont be synced…