TranslateTransform cancels ScaleTransform

Question

I'm new to WPF and after quite a bit of playing I finally got my controls arranged the way I'd like on the Project I'm working. I have a rectangle which displays an image. Mouse-wheel scales the image with ScaleTransform animation and mouse click/drag moves the image around the screen. The problem is if I scale the image up or down and then try to move it, it automatically scales it self back to 1(original size). Is there any way to move it around in when it's scaled? Edit: I tried setting ScaleTransform and TranslateTransform to TransformGroup, but still it didn't work.

The other problem I'm having is if the image is larger than the parent container, it falls out of bounds, I tried setting ClipToBounds = True on parent containers, but it didn't work.

Code:

private void Window_MouseWheel_1(object sender, MouseWheelEventArgs e)
{
    if (e.Delta > 0)
    {
        ScaleTransform scaleP = new ScaleTransform();
        scaleP.CenterX = e.GetPosition(this).X;
        scaleP.CenterY = e.GetPosition(this).Y;

        rect.RenderTransform = scaleP;

        DoubleAnimation dblAnimX = new DoubleAnimation();
        dblAnimX.From = scaleXFrom;
        dblAnimX.To = scaleXTo + 0.1;
        scaleXFrom = scaleXTo +0.1;
        scaleXTo += 0.1;
        Duration = new Duration(TimeSpan.FromSeconds(0.15));

        DoubleAnimation dblAnimY = new DoubleAnimation();
        dblAnimY.From = scaleYFrom;
        dblAnimY.To = scaleYTo + 0.1;
        scaleYFrom = scaleYTo +0.1;
        scaleYTo += 0.1;
        Duration = new Duration(TimeSpan.FromSeconds(0.15));

        scaleP.BeginAnimation(ScaleTransform.ScaleXProperty, dblAnimX);
        scaleP.BeginAnimation(ScaleTransform.ScaleYProperty, dblAnimY);
    }
    else
    {
        ScaleTransform scaleM = new ScaleTransform();
        scaleM.CenterX = e.GetPosition(this).X;
        scaleM.CenterY = e.GetPosition(this).Y;

        rect.RenderTransform = scaleM;                           

        DoubleAnimation dblAnimX = new DoubleAnimation();
        dblAnimX.From = scaleXFrom;
        dblAnimX.To = scaleXTo -0.1;
        scaleXFrom = scaleXTo -0.1;
        scaleXTo -= 0.1;
        dblAnimX.Duration = new Duration(TimeSpan.FromSeconds(0.15));

        DoubleAnimation dblAnimY = new DoubleAnimation();
        dblAnimY.From = scaleYFrom;
        dblAnimY.To = scaleYTo - 0.1;
        scaleYFrom = scaleYTo -0.1;
        scaleYTo -= 0.1;
        Duration = new Duration(TimeSpan.FromSeconds(0.15));

        scaleM.BeginAnimation(ScaleTransform.ScaleXProperty, dblAnimX);
        scaleM.BeginAnimation(ScaleTransform.ScaleYProperty, dblAnimY);
    }
}

private void rect_MouseMove_1(object sender, MouseEventArgs e)
{
    if (e.LeftButton == MouseButtonState.Pressed)
    {
        System.Windows.Point p = e.GetPosition(this);
        TranslateTransform tt = new TranslateTransform();
        tt.X = (p.X - mouseDownX);
        tt.Y = (p.Y - mouseDownY);

        rect.RenderTransform = tt;

    }
}

Answer 1

Or you use a MatrixTransform:

var matrix = Matrix.Identity;
matrix.Scale(1.5, 2.5);
matrix.Translate(30, 60);
rect.RenderTransform = new MatrixTransform(matrix);

Or even shorter:

var matrix = new Matrix(1.5, 0, 0, 2.5, 30, 60);
rect.RenderTransform = new MatrixTransform(matrix);

Or even better, you avoid to set a new RenderTransform each time and just update the transform matrix:

// set RenderTransform once in constructor
rect.RenderTransform = new MatrixTransform()

...

// update matrix in event handler
((MatrixTransform)rect.RenderTransform).Matrix = new Matrix(...);

Answer 2

I haven't adapted the following example to your case because the code you provided was very long. Please consider posting only the critical parts of it if you can.

To combine different types of Transform, you can use TransformGroup, in this way.

void Button_Click_1(object sender, RoutedEventArgs e)
{
    var button = sender as Button;
    var transformGroup = new TransformGroup();
    var scale = new ScaleTransform(1.5, 2.5);
    var translate = new TranslateTransform(30, 60);
    transformGroup.Children.Add(scale);
    transformGroup.Children.Add(translate);
    button.RenderTransform = transformGroup;
}