Gestures Type For Windows Phone 8 C# and Xaml

Introduction

This section describes the different types of gestures. Lets start by learning about some of the touch gestures supported in windows phone 8 that we will cover in this article

Here are some gestures that we will cover.

1) Tap:  Tap once an item.

2) Double tap:  Tap twice on the item quickly

3) Horizontal drag: Horizontally drag with your finger

4) Vertical drag : Vertically drag with your finger.

5) Pinch:   Making a pinching motion with your thumb and forefinger on a screen and move them apart.

6) Flick:  Swipe your finger directly in the screen you want the screen to move

7) Hold : Tap and leave your finger there for a moment

Note: Pinch gesture couldn't be tested on emulator

Lets start by creating a new project. Open Visual Studio And create New project.


Step 1: Create a textblock and rectangle in MainPagel.xaml


<TextBlock Height="104" HorizontalAlignment="Left" Margin="100,500,0,0" FontSize="50" Foreground="YellowGreen"TextAlignment="Center" Name="testGesture" Text="Test Gesture" VerticalAlignment="Top"/>


<Rectangle Fill="Orange" Height="400" Width="400" x:Name="rect"></Rectangle>



Step 2: Write below code in the contructor of MainPage.xaml.cs which will enable the gestures for touchpanel on rectangle.

TouchPanel.EnabledGestures = GestureType.Hold | GestureType.Tap | GestureType.DoubleTap | GestureType.Flick |GestureType.Pinch | GestureType.DragComplete | GestureType.FreeDrag | GestureType.HorizontalDrag |GestureType.VerticalDrag | GestureType.PinchComplete;

Step 3: Place below code also in the constructor of MainPage.Xaml.cs which will add ManipulationCompleted event handler to rectangle.

rect.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(rect_ManipulationCompleted);

One can boud ManipulationCompleted event to LayoutRoot as well. I will used rectangle so gestures will be enabled only on rectangle not on full screen.

Step 4: Now add below code in the MainPage.Xaml.cs, in the manipulation completed event of rectangle.

void rect_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
   while (TouchPanel.IsGestureAvailable)
   {
      GestureSample gestureSample = TouchPanel.ReadGesture();
      switch (gestureSample.GestureType)
      {        
        

         case GestureType.FreeDrag:
            testGesture.Text = "FreeDrag";            break;         
         case GestureType.HorizontalDrag:
            testGesture.Text = "HorizontalDrag";
            break;         
         case GestureType.Pinch:
            testGesture.Text = "Pinch";
            break;

         case GestureType.VerticalDrag:
            testGesture.Text = "VerticalDrag";
            break;

         case GestureType.Tap:
            testGesture.Text = "Tap";
            break;

         case GestureType.DoubleTap:
            testGesture.Text = "Double Tap";
            break;

         case GestureType.Hold:
            testGesture.Text = "Hold";
            break;

         case GestureType.Flick:
            testGesture.Text = "Flick";
            break;
      }
   }
}

Step 5: Now run the Application and Try different gestures.

Click Here to download Sample Project