WPF resize rectangle by manipulation does not maintain ratio

Question

I'm facing a little problem. I'm designing an application on WPF that will run on Windows 8.1 tablet. I'm building a sort of "cropping" software (among other things).

To do so, I've created a Rectangle on my window, and followed the Microsoft walkthrough here: http://msdn.microsoft.com/en-us/library/vstudio/ee649090(v=vs.100).aspx

Because I don't want to keep my rectangle square, I change their example by setting Scale.Y on ManipulationDelta

Here's the changed code

rectsMatrix.ScaleAt(e.DeltaManipulation.Scale.X,
                    e.DeltaManipulation.Scale.Y,
                    e.ManipulationOrigin.X,
                    e.ManipulationOrigin.Y);

But despite this, my rectangle is still resizing to square when I pinch to resize. I don't understand why or how to workaround this.

Answer 1

The WPF manipulation APIs don't support independently scaling X and Y while also being able to rotate.

Do this exercise... draw a rectangle and put two dots somewhere on it. Now draw that same rectangle with those two dots moved diagonally away from each other. Based on the deltas between those dots, how would you decide if the user was trying to rotate or independently scale X vs. Y or do both at the same time? It's entirely ambiguous with the limited information we have.

This is why apps will often end up having specific 'handles' you need to touch to explicitly go into 'rotate' mode or 'X/Y resize mode'. From an implementation perspective, you would handle the manipulation events on that handle (separate from the control itself) and set ManipulationOrigin and ManipulationStartingEventArgs.Mode accordingly.

(Disclaimer: I was part of the team that created these APIs several years ago)