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).