Calculating Scale using Anchors - wpf

Question

At a high-level, I want a usercontrol with a contentpresenter like this:
<UserControl>
<ContentPresenter />
</UserControl>
I want to implement it in my consuming XAML like this:
<Controls:MyControl>
<Image src="http://server/file.png" />
</Controls:MyControl>
Then I want my usercontrol to add resize and rotate anchors like this:
The user can grab the center gainsboro area and move the user control - which will update its transform translate properties. The user can grab the resize anchors (squares) and resize the user control - which will update its transform scale properties. The user can grab the rotate anchor (circle) and rotate the control - which will update its transform rotate property. Seems so simple.
I wrote an article on how to handle manipulations here: http://blog.jerrynixon.com/2013/07/walkthrough-real-world-manipulation.html
There are plenty of articles written about manipulations, but the need for this user control is different. If we only think about scaling the object, the requirements are not just to scale. The requirements would be:
When the user drags a corner anchor, and scaling begins, the anchor itself should not change in size. This prevents the touch target from shrinking or occluding the object.
When the user drags a corner anchor, the render origin should change to the opposite corner so scaling is toward and away from the selected anchor. It should not be centered.
When the user drags a corner anchor, the anchor should remain under the user's pointer. It should not wildly expand the object beyond the pointer's context.
Those three are more difficult than you might think. And they don't even deal with the problem of rotation that. But that's for another time. Another question.
Number one (Solved) Ensuring that the corner anchor does not scale with the rest of the control is really a matter of converting the current scale factor with a simple converter like this:
class ResizeConverter : IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, string language)
{ return 1 / System.Convert.ToDouble(value); }
public object ConvertBack(object value, Type targetType,
object parameter, string language)
{ throw new NotImplementedException(); }
}
Number two Wow, this one is harder than it looks. When you change the value of RenderTransformOrigin any existing transform is re-rendered with the new value. I am not 100% how to properly accommodate existing transforms before changing that value.
Number three This is the coupe de gras of the problem. Calculating the current location of the pointer is not too difficult. Calculating how to get the anchor under the pointer - that's also somewhat easy. But accounting for the scale of the underlying object so it properly fills (even skews) it so fit in the newly defined box? No clue.
To be honest, I think it might be important to calculate the distance from the original manipulation starting point and the current manipulation position. To do this, I create this nice method:
private double Distance(Point point1, Point point2)
{
var x1 = point1.X;
var y1 = point1.Y;
var x2 = point2.X;
var y2 = point2.Y;
return Math.Sqrt(Math.Pow(x2 - x1, 2) + Math.Pow(y2 - y1, 2));
}
Reality is, I was only partly sure I was on the right track.
This is already accomplished in a lot of existing code - but not in C#, not using XAML. Visual Studio lets you resize designer elements with anchors. It's not a novel concept. But still, my goal is to figure this out and publish a working sample that any developer can use in their XAML application (including my own). But there are some things here that are stumping me.
Could someone help me solve this part of the problem?

Answer 1

I am not sure, but this project have a lot scale and anchors using for designing diagrams, maybe you get inspiration from here
WPF Diagram designer ;-)