Click here to Skip to main content
Click here to Skip to main content

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

, 11 Aug 2014
Rate this:
Please Sign up or sign in to vote.
The easiest way to drag and drop Image using Gestlure

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Anis Derbel
Software Developer (Junior) Microsoft Student Partners
Tunisia Tunisia
I study Software Engineering , 23 years old , I'm motivated with all Technologies of Microsoft.
Since I have been in the Community of Microsoft as Microsoft Student Partners, I developped many apps on the platform Windows and Phone. Now , it's time to share what I learn here and I'am ready to help Everyone.
You can contact me at any time (anisderbel@outlook.com)
Group type: Organisation

9 members

Follow on   LinkedIn

Comments and Discussions

 
SuggestionSource Code not downloadable PinprofessionalSiddhu Joshi10-Aug-14 23:24 
AnswerRe: Source Code not downloadable PingroupAnis Derbel11-Aug-14 1:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 11 Aug 2014
Article Copyright 2014 by Anis Derbel
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid