locked
Manipulation of multiple objects

    Question

  • I have an app that allows for touch-based manipulation of multiple graphic objects. I am trying to implement manipulations on a group of objects. The idea is that one could select multiple shapes and then drag them as one, or pinch zoom, or rotate, all as one.

    It seems to me that perhaps I could compute a new RenderTransformOrigin for each object that is the center of the entire group. Then perhaps I could create a temporary transparent object on top of the group to handle manipulations and then compute how each object in the group would be affected and manually apply the transforms? This seems pretty complicated.

    One way might be to put everything in a canvas and then put that in a Viewbox. But the problem I foresee with that is that if the user ungroups the objects (which he can) then I would still have to manually compute the transforms for each object so that they stay in the same place after being removed from the group.

    Am I missing some really simple approach to this problem? Is there some whizbang XAML widget that does this for me?

    Does anyone have an idea of how to accomplish this?

    Thank you for any ideas.


    Thaine Norris


    • Edited by dtnorris Wednesday, February 25, 2015 3:49 AM
    Wednesday, February 25, 2015 3:37 AM

All replies

  • Hi Thaine - I don't know of any built-in functionality that would do this for you, but it really doesn't sound too bad if you implement a method in the object that computes the transform on itself, then just call that method for each object.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, February 25, 2015 1:58 PM
    Moderator
  • Thank you Matt. Perhaps I was overthinking the problem. I'll take a whack at it.

    Thaine Norris

    Wednesday, February 25, 2015 4:36 PM
  • Hi Matt,

    So I have implemented a function that computes a new RenderTransformOrigin (RTO) for each object in a group. The new RTOs are computed around the center of the group of objects. Then transforms are applied in a loop and the objects will rotate as a group around the common center. It's great!

    However, if the object is scaled, then when the new RTO is applied, the object shifts. I have not been able to discover the mathematical relationship so I have not been able to compensate for this. Consider the following XAML:

        <Grid Background="White">
            <Canvas Width="772" Height="772" Background="#330000FF" RenderTransformOrigin="0.5,0.5">
                <Rectangle Width="200" Height="200" Fill="Red" Canvas.Left="286" Canvas.Top="286" />
                <Canvas.RenderTransform>
                    <CompositeTransform TranslateX="0" TranslateY="0" ScaleX="0.439999997615814" ScaleY="0.439999997615814" />                
                </Canvas.RenderTransform>
            </Canvas>
        </Grid>
    

    If ScaleX and ScaleY are 1.0, then you can change the RTO to anything (0.5, 0.25 for example) and the canvas will remain where it is, ready for further transformations. However, if the scale values are not 1.0, then the object will shift whenever the new RTO values are applied.

    Can you shed some light on what is happening here?

    Thank you,


    Thaine Norris

    Thursday, February 26, 2015 11:30 PM
  • It's difficult to understand this without seeing it - can you put sample code on OneDrive and share it here?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, February 27, 2015 1:41 PM
    Moderator
  • Hi Matt,

    Just create a new blank app and copy the XAML code above into the MainPage.xaml. You don't even need to build it. You can experiment with the RTO and ScaleX and ScaleY values in the designer and see immediately what I'm seeing.

    Note that in the Visual Studio designer you can drag the RTO with the mouse. When you do this, the designer automatically updates TranslateX and TranslateY to keep the object in the proper position. This is a helpful clue, but I have not yet discovered the mathematical relationship. A formula would be so helpful!



    Thaine Norris




    • Edited by dtnorris Friday, February 27, 2015 2:26 PM
    Friday, February 27, 2015 2:22 PM