Gesture : Drag and Drop , Resize and Rotate Image C#

• Download Gesture_Image-noexe.zip - 8.1 MB
• Download Gesture_Image.zip - 8.1 MB

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