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