Rotate an ellipse with vertical drag using gesture

Question

I have downloaded the windows phone toolkit from codeplex that enables the phone to receive gesture support. In my application, I have an ellipse. I want to create a method that will rotate the ellipse Counter clockwise when the screen receives upward vertical gesture & clockwise when it receives downward vertical gesture. I've spent a lot of time on google but with poor results, how can I achieve this operation?

Answer 1

First, assign a RotateTransform to the control you want to rotate. Here I'm using a rectangle because it's easier to see it rotate, but it works just as well with an ellipse:

<Rectangle Fill="Blue" Height="50" Width="50">
    <Rectangle.RenderTransform>
        <RotateTransform x:Name="RotateTransform" />
    </Rectangle.RenderTransform>
</Rectangle>

Then, subscribe to the ManipulationDelta event of your page:

<phone:PhoneApplicationPage 
    x:Class="..."
    various stuff
    ManipulationDelta="PhoneApplicationPage_ManipulationDelta">

In the event handler, use e.DeltaManipulation.Translation to know how much the finger has moved, on the X and Y axis. Then, rotate your shape accordingly:

private void PhoneApplicationPage_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    this.RotateTransform.Angle += e.DeltaManipulation.Translation.Y;
}

If you want your shape to rotate at a different speed, then multiply e.DeltaManipulation.Translation.Y by a constant (> 1 to accelerate the rotation, < 1 to slow it down). Also, if you don't want the shape to rotate when the finger is moving diagonally, check the value of e.DeltaManipulation.Translation.X and apply the rotation only if it's way smaller than e.DeltaManipulation.Translation.Y (you can't just check if it's equal to 0, since the finger will always move slightly to the left or to the right when doing a vertical gesture).