A clear example of a gesture driven Windows Phone application
- Posted: Jun 25, 2012 at 6:00AM
- 6,827 views
- 2 comments
Loading user information from Channel 9
Something went wrong getting user information from Channel 9
Loading user information from MSDN
Something went wrong getting user information from MSDN
Loading Visual Studio Achievements
Something went wrong getting the Visual Studio Achievements
With last week's announcement of Windows 8 (which you can now catch on-demand here, Windows Phone Summit), it feels like a Mobile Monday kind of day.
With touch devices, like the Windows Phone, it's important that we take advantage of gestures, making them a integral part of our applications. You're thinking, "Easy for you to say, but how?"
Here's one example...
This blog post describes the implementation of a gesture-based todo-list application. The simple interface is controlled entirely by drag, flick and swipe:
So far the application supports deletion and completion of tasks, but not the addition of new ones. I’ll get to this in a later blog post!
Introduction – gestures, why don’t we use them more?
I think it is fair to say that most Windows Phone applications (and mobile applications in general) have user-interfaces that are a close reflection of how we interact with a desktop computer. Mobile applications have the same buttons, checkboxes and input controls as their desktop equivalent, with the user interacting with the majority of these controls via simple clicks / taps.
The mobile multi-touch interface allows for much more control and expression than a simple mouse pointer device. Standard gestures have been developed such as pinch/stretch, flick, pan, tap-and-hold, however these are quite rarely used; one notable exception being pinch/stretch which is the standard mechanism for manipulating images.
When an application comes along that makes great use of gestures, it really stands out from the crowds. One such application is the iPhone ‘Clear’ application, a simple todo-list with not one button or checkbox in sight. You can see the app in action below:
Interestingly, its use of pinch to navigate the three levels of menu is similar to the Windows 8 concept of ‘semantic zoom’.
When I first saw Clear – the clean, clutter-free interface immediately spoke ‘Metro’ to me! This blog post looks at how to recreate some of the features of Clear using Silverlight for Windows Phone, in order to create a gesture-driven todo application.
NOTE: All of the work on my blog is under a Creative Commons Share-alike license. For this blog post I just want to add that I do not want someone to take this code in order to release a ‘Clear’ clone on the Windows Phone marketplace. This blog post is for fun and education, to make people think more about the possibilities of gestures.
The post then continues on providing specific examples and details
Silverlight for Windows Phone provides manipulation events which you can handle in order to track when a user places one or more fingers on the screen and moves them around. Turning low-level manipulation events into high-level gestures is actually quite tricky. Touch devices give a much greater control when dragging objects, or flicking them, but have a much lower accuracy for the more commonplace task of trying to hit a specific spot on the screen. For this reason, gestures have a built in tolerance. As an example, a drag manipulation gesture is not initiated if the user’s finger moves by a single pixel.
Fortunately, the Silverlight Toolkit contains a
GestureListenerwhich handles manipulation events and turns them into the standard gesture events for you. Unless you need a quite fancy gesture (two-finger-swipe for example), the
GestureListenerprobably gives you all you need. To use this class, simply attach it to the element that you want to handle gestures on, then add handlers to the events that the
While the post provides a great series of code snaps, sometimes it's easier to see it as a complete project. Well Colin's got that covered as well and provided the complete project source.
If you download the source and run into a reference issue for the Microsoft.Phone.Controls.Toolkit (aka the Silverlight for Windows Phone Toolkit) assembly (shown below), the easiest way to fix that is via NuGet.
Just search for silverlighttoolkitwp, add it to the project and you should be good to go.
Once I did that, the project ran for me the first time. Here's a snap of it running on my machine...
Want to add natural gesture support to your Windows Phone app? You'll want to check out this project...