Drag Guesture in Windows Phone 7

First, let's create a new Windows Phone 7 Application Project in Visual Studio 2010.



After creating your project, you need to add reference to the toolkit library by right clicking on the project name in Solution Explorer, select Add Reference. Be sure to select the .NET tab and then find the library Microsoft.Phone.Controls.Toolkit. Remember that if you are using Windows Phone 7 SDK 7.1, then you has to use the appropriate version of Silverlight for Windows Phone Toolkit. If you have not downloaded the toolkit, go to http://silverlight.codeplex.com/releases/view/71550, download and install it now.


 
That's all for settings, let's talk about our app. We are going to create a simple Windows Phone 7 Application with a blue rectangle on the screen. And the interesting thing is that the user will be able to drag this rectangle around the phone screen. Here is the screenshot


 
Double click on the MainPage.xaml in Solution Explorer to edit the XAML of this page. Look for the Grid named ContentPanel and add new a Rectangle to that grid like this:
 
 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
         <Rectangle x:Name="myRectangle" Width="200" Height="200" Fill="Blue">
         </Rectangle>
 </Grid>
 
We call this rectangle myRectangle because we will need to reference to it from the code behind file.
 
To use the toolkit, first you have to declare the namespace in the XAML file by adding this line along with other lines at top of MainPage.xaml
 
 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
 
Inside the Rectangle, add new XAML to handle the dragging event of the rectangle. Your ContentPanel grid will now look like this:
 
 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
             <Rectangle x:Name="myRectangle" Width="200" Height="200" Fill="Blue">
                 <toolkit:GestureService.GestureListener>
                     <toolkit:GestureListener DragDelta="GestureListener_DragDelta"/>
                 </toolkit:GestureService.GestureListener>
             </Rectangle>
 </Grid>
 
Here, we handle an important event: DragDelta. DragDelta is the event that occurs whenever you move your finger (or whatever you use) over the Rectangle. If you programed Windows Forms before, you would see that this event just like the MouseMove event in Windows Forms (except you really touch the screen in case of Windows Phone). There are other events provided by the GuestureService that you can use. For more information, please go to this link: http://www.windowsphonegeek.com/articles/WP7-GestureService-in-depth--key-concepts-and-API.
 
Let's jump into the code file (by pressing the F7 key or right click on MainPage.xaml and choose View Code). If you don't see the method for handling the DragDelta even, please add it manually like this:
 
 private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
 { 
 }
 
But wait a minute, how can we move the Rectangle around? It is put inside Grid panel so you can not specify the top and left like what we can do with Canvas panel. Fortunately, you can achieve the same result by making use of the RenderTransform property that each UI control has. Not only can you move your UIElement (in other words "translate it"), you can also be able to scale it or rotate it through RenderTransform property.
 
Because we are focused on moving the Rectangle, I will use the TranslateTransform class to move it. Declare private fields call translateTransform in your MainPage.xaml.cs file
 
 private TranslateTransform translateTransform;
 
And then, inside the constructor MainPage(), add the following lines of code:
 
 translateTransform = new TranslateTransform();
 myRectangle.RenderTransform = translateTransform;
 
The above code is quite simple. We first initialize the translateTransform object, and then we assign it to the RenderTransform property of myRectangle.
Now we can move the myRectangle by modifying the X and Y properties of translateTransform variable. We will put the new code inside the GuestureListener_DragDelta method like this:
 
 private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
 {
     translateTransform.X += e.HorizontalChange;
     translateTransform.Y += e.VerticalChange;
 }
 
The parameter e provides you several useful properties that you can use. HorizontalChange is a double value indicates how long you moved horizontally, VerticalChange indicates how long you moved vertically. Other property is Direction allows you to determine the direction of move (Horizontal or Vertical). In our case, if the user's finger moves left or right, the X property of translateTransform object will be decreased or increased (by default, this property has value 0). The same thing is applied when user's finger moves up or down. By changing X and Y properties, the Rectangle in the UI will be moved automatically.
 
That's all for our project. Now you can run the project by pressing F5 in Visual Studio. In the emulator, you can use your mouse to drag the blue rectangle around the phone screen.
 
Have fun with Windows Phone 7.