Click here to Skip to main content
12,395,115 members (70,484 online)
Click here to Skip to main content
Add your own
alternative version

Stats

10.9K views
550 downloads
10 bookmarked
Posted

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

, 11 Aug 2014 CPOL
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


You may also be interested in...

Comments and Discussions

 
Questionfor project help Pin
Member 1200395013-Oct-15 0:36
memberMember 1200395013-Oct-15 0:36 
SuggestionSource Code not downloadable Pin
Siddhu Joshi10-Aug-14 23:24
professionalSiddhu Joshi10-Aug-14 23:24 
AnswerRe: Source Code not downloadable Pin
Anis Derbel11-Aug-14 1:33
groupAnis Derbel11-Aug-14 1:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 11 Aug 2014
Article Copyright 2014 by Anis Derbel
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid