How to Build a Gesture-Supported Windows Phone Application

Introduction

Windows Phone supports standard gestures like flicks, pinch-and-stretch zooming, and rotation. This brings Windows Phone platform support at par with competitors like iOS and Android.

Processing FrameReported event to handle these gestures will be an enduring task. Fortunately, Silverlight for Windows Phone Toolkit’s gesture listener makes this task a breeze.

We can get the Silverlight for Windows Phone toolkit from http://silverlight.codeplex.com/releases/view/75888.

Hands-On

Create a Silverlight for Windows Phone application called GestureAppDemo.

Windows Phone Application
Windows Phone Application

When prompted for OS Version, select 7.1 and click OK.

Add a reference to the Silverlight for Windows Phone Toolkit.

Silverlight for Windows Phone Toolkit
Silverlight for Windows Phone Toolkit

On the default MainPage.xaml file generated by Visual Studio, add the following line.

<phone:PhoneApplicationPage
    x:Class="GestureAppDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

Next, we add the declarations for the various types of events supported by GestureListener class.

<toolkit:GestureService.GestureListener>
        <toolkit:GestureListener Flick="GestureListener_Flick"
                                 DoubleTap="GestureListener_DoubleTap" 
                                 DragStarted="GestureListener_DragStarted" 
                                 DragCompleted="GestureListener_DragCompleted" 
                                 PinchStarted="GestureListener_PinchStarted" 
                                 PinchCompleted="GestureListener_PinchCompleted" 
                                 PinchDelta="GestureListener_PinchDelta" 
                                 GestureBegin="GestureListener_GestureBegin"
                                 GestureCompleted="GestureListener_GestureCompleted"
                                 Tap="GestureListener_Tap"/>
    </toolkit:GestureService.GestureListener>

Before we dig into further implementation, let us understand when we should use the various event handlers we have declared.

GestureBegin: This event is raised when the gesture has started.

GestureCompleted : This event is raised when the gesture has completed.

Tap: This event is raised when there is a touch action and release action with no movement.

DoubleTap: This event is raised when there is double touch action followed by release action with no movement.

Hold: This event is raised when the touch is held for longer than one second.

DragStarted: This event is raised when drag has started (touch with movement).

DragCompleted: This event is raised when drag has completed (release after movement).

Flick: This event is raised when a fast drag ends with a release.

PinchStarted: This event is raised when a pinch has started.

PinchCompleted: This event is raised when pinch has completed.

You can either implement your own logic in the event handlers or if you prefer, you can update a textbox to show the type of event that was raised. This will help you understand how the gesture events are raised.

The rest of this article shows you how to update a textbox control to illustrate the type of event raised.

Add a Textbox control called textBoxEventRaised.

Now, update the text of the textbox control depending on the type of event  raised.

private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
        {
            textBoxEventRaised.Text = "Flick";
        }
 
        private void GestureListener_DoubleTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            textBoxEventRaised.Text = "DoubleTap";
        }
 
        private void GestureListener_DragStarted(object sender, DragStartedGestureEventArgs e)
        {
            textBoxEventRaised.Text = "DragStarted";
        }
 
        private void GestureListener_DragCompleted(object sender, DragCompletedGestureEventArgs e)
        {
            textBoxEventRaised.Text = "DragCompleted";
        }
 
        private void GestureListener_PinchStarted(object sender, PinchStartedGestureEventArgs e)
        {
            textBoxEventRaised.Text = "PinchStarted";
        }
 
        private void GestureListener_PinchCompleted(object sender, PinchGestureEventArgs e)
        {
            textBoxEventRaised.Text = "PinchCompleted";
        }
 
        private void GestureListener_PinchDelta(object sender, PinchGestureEventArgs e)
        {
            textBoxEventRaised.Text = "PinchDelta";
        }
 
        private void GestureListener_GestureBegin(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            textBoxEventRaised.Text = "GestureBegin";
        }
 
        private void GestureListener_GestureCompleted(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            textBoxEventRaised.Text = "GestureCompleted";
        }
 
        private void GestureListener_Tap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            textBoxEventRaised.Text = "Tap";
        }

You can now compile and run the application. If you have errors compiling the application, you can download a copy of the source code of this sample from here.

When you run this application, you can see the textbox getting updated depending on the type of gesture performed. To get all the gestures, you should use a real Windows Phone device to deploy and run the application.

Summary

In this article, we learned about the rich gesture support we have in Windows Phone by using the Silverlight for Windows Phone toolkit. I hope you have found this information useful.

About the Author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul_d_patel@hotmail.com



Related Articles

Downloads

Comments

  • a

    Posted by El on 06/13/2013 05:43pm

    Very well written article! Thank you :)

    Reply
  • Help with the code

    Posted by Khaled on 11/06/2012 06:34am

    Hello , i'm an MSP from Tunisia and I'm developping an application with gesture , I want the user to write something that the applications shows him in the page ( a letter from the alphabet for instance) then to tell him either what he wrote is correct or not via the gesture and the touch on the screen , do you have any code of an application like this ?

    Reply
  • mobile app development

    Posted by Micheal on 10/23/2012 08:03am

    One of the main draws of purchasing a Windows Mobile phone is taking advantage of the useful and fun applications that you can download to the device. Examples of popular applications used on Windows Mobile phones are Facebook, microsoft mobile office, Live Search and Microsoft Outlook. mobile app development

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date