Windows 8 WinRT UI element to follow another during manipulation

Windows 8 WinRT UI element to follow another during manipulation,windows-8,windows-runtime,Windows 8,Windows Runtime,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 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;
    }

#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;

#2

You could use TransformGroup to do the transforms in the order you need (translate, rotate, translate again).

#3

The same transformGroup makes ellipse moving too but not in the same way. The ellipse is centered at the right upper corner of the rectangle before the manipulation. After manipulating the rectangle, the ellipse is no longer there.

#4

Apparently the transform groups need to be different and you would need to read up on matrix tranforms algebra to figure this out, but alternatively you could put them all in the same shared container and simply apply the transforms to the container.

#5

Yes I also think so but I could not find the documentation that will direct me to research on the 2x2 matrix to modify and get what I want. Do you know any?