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

  • Wholesale Oakley Juliet no tax worldwide

    Posted by kjekdfnib on 07/03/2013 10:27am

    oAkLey SungLASSeS outLet ,Oakley, especially athletes tested on the planet in 1975 to generate their particular, original sunglasses, no project can wear sunglasses. Fashion to mirror the alteration in current trends - retro, retro-style framework, chunky tortoiseshell and geometric shapes to attract, in lieu of to divert attention. Oakley sunglasses defensive glasses varieties use a the CLOS tendency in order to avoid the interest in the vicinity, prevent stamping eye particles, water, or substance. FAke OAkley DiSpAtch ,In fact, you can be more eye-catching casing a great selection of sunglasses, including a stunning beveled plastic frames, ebony frame of yellow metal, old watches, in addition to your selected color. Fresh dawn in the shadow from the sun, enjoy several of Dennis to give you a remedy to obtain virtually any obsolete temporary workers, you'll find outside play Oakley jaw, in order to have a very strange John Coast Recreation sunshade. Sunglasses maintenance along with the repair of ordinary glasses is identical, general, regular cleaning, proper storage should create a good habit. The time the person carries a pair or two hiding of their luggage and vehicles and also private collections and fashion sunglasses? Cheap Oakley Sunglasses ,Oakley sunglasses have a further visual security measures, because connection with to wrapped WATS, or temples, maintained an even more than ordinary experience of the lighting and ultraviolet illumination. The most important and innovative style, code and data collection of posters within the 2012 sunglasses summer preparation, the sole products which may your going on a break the top partner? Ray Ban Outlet ,Oakley tonal range can be quite large and whether you are look for the style-oriented, or perhaps sports-oriented sunglasses, you will find there's made for the needs you have! Audience will in all probability just a maximum near the sample design concept with style, as well as Oakley sunglasses, design and style, and the negligence of that coloring. Sac Hobo Longchamp ,Actually your discerning noted which the unique tone of Oakley, Oakley colors permits you to observe the product inside the period. In point of fact, the women is pure like they are not just elegant and modern, but additionally very comfortable to make use of, durable, affordable sale price. In order to match the different needs of shoppers, either now or in the long run, Oakley will not stop the pace of progress.

    Reply
  • QDCRdf au Wi dBb SdFC jc

    Posted by mUiAJUGlXZ on 06/24/2013 05:31am

    visit the website viagra online wiki - buy viagra online eu

    Reply
  • 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

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

  • Packaged application development teams frequently operate with limited testing environments due to time and labor constraints. By virtualizing the entire application stack, packaged application development teams can deliver business results faster, at higher quality, and with lower risk.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds