WP7 Gesture Recognition

Writing Windows Application or Silverlight Application may not find the importance of gesture, however, it is important in Windows Phone since we dont have a pointer device.

Silverlight Team from Microsoft release the silverlight for Windows Phone Toolkit, which is available at here.

Download and install it. Here starts the tutorial.

After created a new Windows Phone Project and make sure you have install the Toolkit for Windows Phone, right click on the project in Solution Explorer. Then, press Add Reference.

Choose Microsoft.Phone.Controls.Toolkit from the .NET Tab. Here inclues

  • New Components
    • AutoCompleteBox
    • ListPicker
    • LongListSelector
    • Page Transitions
  • Existing Components
    • GestureService/GestureListener
    • ContextMenu
    • DatePicker
    • TimePicker
    • ToggleSwitch
    • WrapPanel
  • We will focus on Gesture one.

    First add the namespace on XAML.

    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

    Then add the following Lines to the object you want to have the gesture on, here I put inside the LayoutRoot

    <Grid x:Name="LayoutRoot" Background="Transparent">
    <toolkit:GestureService.GestureListener>
    <toolkit:GestureListener>
    </toolkit:GestureListener>
    </toolkit:GestureService.GestureListener>
    ...
    </Grid>

    There are several events built inside the Gesture Listener,

    • Double-tap: Just like double-clicking, but with a finger instead of a mouse
    • DragStarted, DragDelta, and DragCompleted: Three events that can be used together to implement easy drag-and-drop on Windows Phone
    • Flick: Putting your finger down, moving it quickly, and then picking it back up.
    • Hold: Putting your finger down and holding it in one place for a while
    • PinchStarted, PinchDelta, and PinchCompleted: Three events that can be used together to tell if a user is pinching something, typically to zoom in or out
    • Tap: Just like clicking, but with a finger instead of a mouse

    You can create the events in codebehind or in XAML

    in XAML you can have

    <toolkit:GestureListener DoubleTap=”GestureListener_DoubleTap” Flick=”GestureListener_Flick”>
    </toolkit:GestureListener>

    In code behind, you can have

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
    GestureService.GetGestureListener(LayoutRoot).DoubleTap += new EventHandler<GestureEventArgs>(GestureListener_DoubleTap);
    GestureService.GetGestureListener(LayoutRoot).Flick += new EventHandler<FlickGestureEventArgs>(GestureListener_Flick);
    }

    Tutorial for gesture ends here 🙂

    Don’t hesitate to leave comment if you meet any difficulties.

    Advertisements

    10 thoughts on “WP7 Gesture Recognition

    1. I want to apply pinch in and out gesture along with slide transition on the image.But i am not able to do so.If i remove the transition then pinch gesture works prefectly fine,but on transition,it doesn’t.What could be the reason?

      Reply
      • Actually image can slide away with a sliding transition supported by the device and also on multitouch pinch in – out it can zoom.

        Reply
    2. I wan to have both functionalities.Actually i am using flock gesture where slide transition is use.And pinch in and out would be used for zooming in and out of image

      Reply
    3. I have and image and a pop up in a grid and slide transition works on image .Also pinchstarted and PinchDelta works on image.

      Reply
    4. Thanx man ..I just kept my image in a grid and all other thngs outside the grid.Implemented slide transition on grid and pinching on image.It worked!!!

      Reply
    5. One more problem i am facing.Is it possible to set the maximum zoom level while pinch out and minimum while pinch in for image?

      Reply
    6. I use the ScaleX and ScaleY to set the ZoomLevel, you may set it using

      imageScale.ScaleX = Math.Max(Math.Min(initialScale * e.DistanceRatio, yourMax), yourMin);

      in order to make the value in between your max and min value

      Reply

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s