Windows Phone 7 Custom Touch Application

Windows Phone 7 is a mobile operating system developed by Microsoft, and is the successor to its Windows Mobile platform. It is primarily aimed at the consumer market rather than the enterprise market. Here, we will focus on developing for Windows Phone 7. The Windows Phone Application Platform enables developers to create engaging consumer experiences running on a Windows Phone. It is built upon existingMicrosoft tools and technologies such as Visual Studio, Expression Blend, Silverlight, and the XNA Framework. Developers already familiar with those for Windows Phone without a steep learning curve.

In this article, lets develop a simple application that identifies various touch gestures including Tap, Double Tap, Flick, and Hold.

We will use Microsoft Visual Studio 2010 and the Windows Phone Developer tools
to create the sample application.

1. First, let's navigate to Visual Studio 2010 and create a new Windows Phone 7 application. To do this, navigate to File->New->Project->Windows Phone Application.

2. Now, add a reference to Microsoft.Xna.Framework and Microsoft.XnaFrameWork.Input.Touch namespaces to work with the XNA gestures. To do this, right-click the application in the Solution Explorer and click Add Reference. In the .NET tab, select the Microsoft.Xna.Framework and Microsoft.XnaFrameWork.Input.Touch namespaces. These namespaces include the classes to access the timers, receive inputs from keyboard, mouse, and other devices. We will use these classes to detect the gestures.



3. Next, open the MainPage.xaml file and add a Canvas control. Let's name it LayoutRoot. Also, register a ManipulationCompleted event handler in it. This event occurs when the manipulation and inertia on the object are complete.



4. Next, place a TextBlock and a Rectangle in the Canvas control.




5. Also, register the ManipulationCompleted and ManipulationDelta event of the Rectangle. The ManipulationDelta event occurs when the user drags fingers over the screen during a manipulation.

6. Next, add the RenderTranform tag to the Rectangle. The RenderTransform tag allows us to rotate, skew, scale, and move the object. Then, add a TransformGroup tag to it. The TransformGroup tag defines the functionality that enables transformations in a two-dimensional plane.




7. After this, add the ScaleTransform and TranslateTransform tags. These would be used to scale and move the rectangle added earlier.

8. Next, navigate to the MainPage.xaml.cs file. Here, add a reference to the Microsoft.Xna.Framework.Input.Touch and System.Threading namespaces. The System. Threading namespace allows us of the Thread class in further steps.



9. Now, let's create a variable named current that will be used to note the current color of the Rectangle in the Array of colors. Also, create an array of the Color class object. This array consists of various colors including Red, White, and Blue.





10. In the Constructor, set the EnabledGestures property of the TouchPanel class. This class provides the methods for retrieving the touch panel device information. Now, set this property to detect the various gestures including Tap, Double Tap, Flick, and Hold.



11. Next, let's implement the ManipulationCompleted event of the Canvas. In this, check whether the touch gesture is available by using the IsGestureAvailable property of the TouchPanel class.



12. If it is available, then create an object of the GestureSample class. This class represents data from a gesture over a span of time. Also, call the ReadGesture() method of the TouchPanel class. This method reads an available gesture on the TouchPanel.



13. Now, check if the gesture is a Tap gesture, then set the TextBlock title as Tap and the position where the user tapped. Also, set the TextBlock title for the DoubleTap and Hold gestures. Also, call the RestoreTitle() method after each gesture. This method displays the current gesture information for a while on the screen so that the user can read it.



14. Let's define the RestoreTitle() method. In this, pass an integer variable with some value. Here, it is 3000. This will be used to hold the display of 3 seconds. Then, call the QueueUserWorkItem() method of the ThreadPool class. This method queues the method for execution. Then, call the sleep() method of the Thread class and pass the variable passed as a parameter. Now, set the title of the TextBlock as if Windows Phone 7 is waiting for some gesture to occur from the user.



15. Now, let's handle the ManipultaionDelta event of the rectangle. In this, check if the x-axis and y-axis scale factor of the ScaleTransform is not equal to zero, and then increment both the factors by some value. Here it is 0.02. After this, check if these factors are greater than 2. Then, set this value as one. This will check that the rectangle doesn't scale infinitely.

Then, increment the X and Y values of the TranslateTransform tag by getting the most recent change in the position using the ManipulationDeltaEventArgs class object. Also, set the title textblock showing the current position.
Next, call the RestoreTitle() method called earlier.



16. Now, let's define the ManipulationCompleted event of the Rectangle. In this, get the total transformation by calling the Total Manipulation property of the ManipulationCompletedEventArgs class object. Then, check if the X and Y co-ordinates value are zero. If yes, then check if the event occurred during inertia using the IsInertial property, which means that a flick event occurred. Then, use the X translation to find the color to be displayed from the array of colors created earlier. This will be done by calling the Next() and Previous() methods which we will define further. Now, revert the translation from the ManipulationDelta event and set the title of the TextBlock as Flick and the position of the flick. Then, call the ResoreTitle() method defined earlier.





17. Now, let's define the Previous() method. In this, decrement the integer variable by one. Now, check if the variable is less than zero, then set the color to the last value in the array of Colors, and then, fill the rectangle with the current color.

Similarly, define the Next() method. In this, increment the integer variable, and then, set the appropriate color and fill the rectangle.



18. Now, run the application. A rectangle is displayed. Let's tap the Windows Phone 7 screen. The gesture with the position of the Tap is displayed. After this, let's drag the rectangle on the screen. The respective values are displayed. Also, the rectangle changes the size. It increases to an extent and then starts decreasing.

Now, let's perform a flick action on the rectangle. You can see that the color of the rectangle changes.




This is a simple application that detects various touch gestures on Windows Phone 7. Now, you can create various touch applications for Windows Phone 7.