locked
Rotating a control on canvas in windows store apps

    Question

  • Hello,

    I need to rotate a Grid control based on the ellipse control which is under Grid Control.

    I am using below xaml code...

    <GridCanvas.Left="569"Canvas.Top="480"Width="409"ManipulationMode="Rotate"RenderTransformOrigin="0.5,0.5"ManipulationDelta="Grid_ManipulationDelta"

                    

    >


                   

    <Grid.RenderTransform>


                       

    <CompositeTransform></CompositeTransform>


                   

    </Grid.RenderTransform>


                   

                   

                   

    <EllipseVerticalAlignment="Top"HorizontalAlignment="Center"Width="20"Fill="Blue"Height="20"


                           

    ManipulationMode="Rotate"ManipulationDelta="Ellipse_ManipulationDelta"ManipulationStarting="Ellipse_ManipulationStarting"ManipulationCompleted="Ellipse_ManipulationCompleted"></Ellipse>


                   

    <local:MyUserControl1x:Name="testControl"Margin="0,20"

                                    

    ManipulationMode="All"RenderTransformOrigin="0.5,0.5">


                       

    <local:MyUserControl1.RenderTransform>


                       

    <CompositeTransform/>


                   

    </local:MyUserControl1.RenderTransform>


               

    </local:MyUserControl1>


               

    </Grid>


           

    </Canvas>

    I am using Manipulation delta event to do this, but it is not working in my case.

    Can any one suggest me how can we achieve this or can somebody provide me sample for this?

    Thanks,

    Vinay

    Thursday, June 5, 2014 11:16 AM

All replies

  • Can you share the way you handled the ManipulationEvents ?

    - Ram
    If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".

    Thursday, June 5, 2014 1:16 PM
  • Hello Ram,

    Thanks for reply

        Below are the manipulation events that I am trying:

    Private Sub testellipse_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles testellipse.ManipulationDelta

           

    Dim oData As Grid = DirectCast(DirectCast(sender, Ellipse).Parent, Grid)

           

    Dim x = e.Position.X - (oData.ActualWidth / 2.0)

           

    Dim y = e.Position.Y - (oData.ActualHeight / 2.0)

           

    Dim angle = ((Math.Atan2(y, x) * 180) / Math.PI) + 90

           

    Dim deltaAngle = angle - lastangle

            lastangle = angle

           

    Dim Tunisia = DirectCast(oData.RenderTransform, RotateTransform)

     

           

    If deltaAngle > 0 Then


                Tunisia.Angle += deltaAngle

           

    End If


           

    'System.Diagnostics.Debug.WriteLine(angle)


       

    End Sub


    ===============================================================   

    Private Sub testellipse_ManipulationStarted(sender As Object, e As ManipulationStartedRoutedEventArgs) Handles testellipse.ManipulationStarted

           

    Dim oData As Grid = DirectCast(DirectCast(sender, Ellipse).Parent, Grid)

     

           

    Dim x = e.Position.X - (oData.ActualWidth / 2.0)

           

    Dim y = e.Position.Y - (oData.ActualHeight / 2.0)

            lastangle = ((Math.Atan2(y, x) * 180) / Math.PI) + 90

       

    End Sub

    Can you  please tell me why e.delta.rotation value always 0.0?

    Thanks,

    Vinay


    • Edited by PradipShinde1 Thursday, June 5, 2014 1:30 PM Added question
    Thursday, June 5, 2014 1:28 PM
  • Hi,

    Please refer to the link below and see the sample in it:

    http://blogs.u2u.be/diederik/post/2013/03/28/Creating-touch-based-rotation-in-Windows-8-XAML-Store-apps.aspx

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, June 6, 2014 5:42 AM
  • Hello Anne,

    Thanks for the link.

    I have gone through the link and It worked for me.

    I am using the below code :

       

    Private Sub Grid_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs)

           

    Dim oGrid As Grid = DirectCast(sender, Grid)

           

    Dim Tunisia = DirectCast(oGrid.RenderTransform, CompositeTransform)

            Tunisia.TranslateX += e.Delta.Translation.X

            Tunisia.TranslateY += e.Delta.Translation.Y

            Tunisia.CenterX = oGrid.Width / 2

            Tunisia.CenterY = oGrid.Height / 2

       

    End Sub


       

    Private Sub testellipse_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs)

           

    Dim oControl As Grid = DirectCast(DirectCast(sender, Ellipse).Parent, Grid)

           

    Dim oTrnasform As CompositeTransform = DirectCast(oControl.RenderTransform, CompositeTransform)

           

    Dim x = oTrnasform.CenterX - e.Position.X

           

    Dim y = oTrnasform.CenterY - e.Position.Y

           

    Dim a1 As Double = Math.Atan(y / x)

           

    Dim a2 As Double = Math.Atan((e.Delta.Translation.Y - y) / (x - e.Delta.Translation.X))

            oTrnasform.Rotation += a1 - a2

       

    End Sub


       

    Private Sub testellipse_ManipulationStarted(sender As Object, e As ManipulationStartedRoutedEventArgs) Handles testellipse.ManipulationStarted

           

    RemoveHandler testGrid.ManipulationDelta, AddressOf Grid_ManipulationDelta

       

    End Sub


       

    Private Sub testGrid_Loaded(sender As Object, e As RoutedEventArgs) Handles testGrid.Loaded

           

    Dim oControl As Grid = DirectCast(sender, Grid)

           

    Dim oTrnasform As CompositeTransform = DirectCast(oControl.RenderTransform, CompositeTransform)

            oTrnasform.CenterX = oControl.Width / 2

            oTrnasform.CenterY = oControl.Height / 2

       

    End Sub


       

    Private Sub testGrid_ManipulationCompleted(sender As Object, e As ManipulationCompletedRoutedEventArgs) Handles testGrid.ManipulationCompleted

           

    AddHandler testGrid.ManipulationDelta, AddressOf Grid_ManipulationDelta

       

    End Sub

    XAML:

    <Gridx:Name="testGrid" Margin="626,151,0,0"

                                

    Grid.Row="1"


                 

    VerticalAlignment="Top"RenderTransformOrigin="0.5,0.5"


                 

    HorizontalAlignment="Left"ManipulationMode="TranslateX,TranslateY"


                 

    ManipulationDelta="Grid_ManipulationDelta">


               

    <Grid.RenderTransform>


                   

    <CompositeTransform></CompositeTransform>


               

    </Grid.RenderTransform>


     

               

    <Ellipsex:Name="testellipse" VerticalAlignment="Top"


                       

    HorizontalAlignment="Center"


                       

    Width="20"Fill="Blue"Height="20"


                       

    ManipulationMode="TranslateX,TranslateY,TranslateInertia"


                       

    ManipulationDelta="testellipse_ManipulationDelta"Margin="0,-79,0,0"></Ellipse>


     

               

    <local:MyUserControl1HorizontalAlignment="Left"

                                

                                

    VerticalAlignment="Top"

                                

    Width="258"


                                

    Height="40"


                                 

                               

    >


                   

               

    </local:MyUserControl1>


           

    </Grid>

    I need to translate the grid as well as rotate the same.

    Do you have any idea how can we achieve this?

    Friday, June 6, 2014 7:13 AM
  • Hi,

    Please upload your project to skyDrive so that I can test it. Do you mean you want to rotate the Grid?

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, June 6, 2014 7:19 AM
  • Hey Anne,

    Thanks.

    I have uploaded the project on https://onedrive.live.com/?cid=85298FF602DE6553&id=85298FF602DE6553%21105.

    I am not sure how can you access this?

    Thanks,

    Vinay

    Friday, June 6, 2014 8:50 AM
  • Hi,

    I cannot access the link, please check the link above.

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, June 10, 2014 2:43 AM