Introduction
As I said before, pictures are very important in our App , I told you before how to crop Image , how to save and retrieve Image in Fromat JSON , how to animate your Image.
In this Tip I will show you how to drag and drop Image using Gesture.
First of all , install MyToolkit from codeplex and you can install it on nuget
Using the code
Add this line on the PhoneApplicationPage to use the Toolkit :
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
We add a new Image on the Xaml :
<Image Name="img1" Source="" Width="150" Height="150" Stretch="Fill" Margin="10,25,296,521" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform x:Name="MyMustacheTransformation"/>
</Image.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" DragDelta="OnDragDelta"/>
</toolkit:GestureService.GestureListener>
</Image>
As you can see on the above code , we used the GestureService and we add three events : PinchStarted , PinchDelta , DragDelta :
private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
_initialAngle = MyMustacheTransformation.Rotation;
_initialScale = MyMustacheTransformation.ScaleX;
Point firstTouch = e.GetPosition(img1, 0);
Point secondTouch = e.GetPosition(img1, 1);
Point center = new Point(firstTouch.X + (secondTouch.X - firstTouch.X) / 2.0,
firstTouch.Y + (secondTouch.Y - firstTouch.Y) / 2.0);
MyMustacheTransformation.CenterX = center.X;
MyMustacheTransformation.CenterY = center.Y;
}
As you can see in the Above code we initialised our Image and get it's position X and Y , then we Translate it.
The second Method is from Resizing Image using your fingers :
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
MyMustacheTransformation.Rotation = _initialAngle + e.TotalAngleDelta;
MyMustacheTransformation.ScaleX = _initialScale * e.DistanceRatio;
MyMustacheTransformation.ScaleY = MyMustacheTransformation.ScaleX;
}
After we initialised Our Image then we declenche the Event OnDragDelta to drag the Image.
private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
Image rect = sender as Image;
TranslateTransform transform = rect.RenderTransform as TranslateTransform;
MyMustacheTransformation.TranslateX += e.HorizontalChange;
MyMustacheTransformation.TranslateY += e.VerticalChange;
}
History
Download the Project to get the Full Project and start making your own Apps ;)
