Question

I am trying to use manipulation on a UI element (rectangle) and can rotate and translate it without problem. What I would like to achieve is to make another UI element (ellipse for example) to follow the first (rectangle).

If I apply the same transform group -that I used for rectangle- to ellipse, during translation manipulation it works fine but during rotation ellipse does not follow rectangle.

I think I somehow must find a suitable composite transform center Point to provide to ellipse but I can not figure out how.

Here is corresponding sample code.

    public MainPage()
    {
        this.InitializeComponent();

        rectMy.ManipulationMode = ManipulationModes.None | ManipulationModes.TranslateX | ManipulationModes.TranslateY | ManipulationModes.Rotate;
        rectMy.ManipulationStarted += rectMy_ManipulationStarted;
        rectMy.ManipulationDelta += rectMy_ManipulationDelta;
        rectMy.ManipulationCompleted += rectMy_ManipulationCompleted;

        transformGroup.Children.Add(previousTransform);
        transformGroup.Children.Add(compositeTransform);

        rectMy.RenderTransform = transformGroup;
    }

    void rectMy_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
    {
        e.Handled = true;
    }

    void rectMy_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        previousTransform.Matrix = transformGroup.Value;

        Point center = previousTransform.TransformPoint(new Point(rectMy.Width / 2, rectMy.Height / 2));
        compositeTransform.CenterX = center.X;
        compositeTransform.CenterY = center.Y;

        compositeTransform.Rotation = e.Delta.Rotation;
        compositeTransform.ScaleX = compositeTransform.ScaleY = e.Delta.Scale;
        compositeTransform.TranslateX = e.Delta.Translation.X;
        compositeTransform.TranslateY = e.Delta.Translation.Y;
    }

    void rectMy_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
    {
        e.Handled = true;
    }

Answer 1

OK. I understood it better now and found the solution. It is all about the center point of the composite transform (as I initially guessed). For center of the ellipse, I had to feed the center of rectangle. However the coordinate needed to be given relative to the ellipse. In my case ellipse is at the right upper corner of the rectangle so below is what I have given as composite transform center.

Point centerE = previousTransformE.TransformPoint(new Point(-rectMy.Width / 2 + ellipseMy.Width / 2, rectMy.Height / 2 + ellipseMy.Height / 2));

For rectangle, the center point for composite transform was:

Point center = previousTransform.TransformPoint(new Point(rectMy.Width / 2, rectMy.Height / 2));

Stackoverflow does not allow me to post an image to better visualize the things. Sorry!

The whole code:

previousTransform.Matrix = transformGroup.Value;
previousTransformE.Matrix = transformGroupE.Value;

Point center = previousTransform.TransformPoint(new Point(rectMy.Width / 2, rectMy.Height / 2));
compositeTransform.CenterX = center.X;
compositeTransform.CenterY = center.Y;

compositeTransform.Rotation = e.Delta.Rotation;
compositeTransform.TranslateX = e.Delta.Translation.X;
compositeTransform.TranslateY = e.Delta.Translation.Y;

Point centerE = previousTransformE.TransformPoint(new Point(-rectMy.Width / 2 + ellipseMy.Width / 2, rectMy.Height / 2 + ellipseMy.Height / 2));
compositeTransformE.CenterX = centerE.X;
compositeTransformE.CenterY = centerE.Y;

compositeTransformE.Rotation = e.Delta.Rotation;
compositeTransformE.TranslateX = e.Delta.Translation.X;
compositeTransformE.TranslateY = e.Delta.Translation.Y;