Writing Windows Application or Silverlight Application may not find the importance of gesture, however, it is important in Windows Phone since we dont have a pointer device.
Silverlight Team from Microsoft release the silverlight for Windows Phone Toolkit, which is available at here.
Download and install it. Here starts the tutorial.
After created a new Windows Phone Project and make sure you have install the Toolkit for Windows Phone, right click on the project in Solution Explorer. Then, press Add Reference.
Choose Microsoft.Phone.Controls.Toolkit from the .NET Tab. Here inclues
- AutoCompleteBox
- ListPicker
- LongListSelector
- Page Transitions
- GestureService/GestureListener
- ContextMenu
- DatePicker
- TimePicker
- ToggleSwitch
- WrapPanel
We will focus on Gesture one.
First add the namespace on XAML.
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Then add the following Lines to the object you want to have the gesture on, here I put inside the LayoutRoot
<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener>
</toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
...
</Grid>
There are several events built inside the Gesture Listener,
- Double-tap: Just like double-clicking, but with a finger instead of a mouse
- DragStarted, DragDelta, and DragCompleted: Three events that can be used together to implement easy drag-and-drop on Windows Phone
- Flick: Putting your finger down, moving it quickly, and then picking it back up.
- Hold: Putting your finger down and holding it in one place for a while
- PinchStarted, PinchDelta, and PinchCompleted: Three events that can be used together to tell if a user is pinching something, typically to zoom in or out
- Tap: Just like clicking, but with a finger instead of a mouse
You can create the events in codebehind or in XAML
in XAML you can have
<toolkit:GestureListener DoubleTap=”GestureListener_DoubleTap” Flick=”GestureListener_Flick”>
</toolkit:GestureListener>
In code behind, you can have
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
GestureService.GetGestureListener(LayoutRoot).DoubleTap += new EventHandler<GestureEventArgs>(GestureListener_DoubleTap);
GestureService.GetGestureListener(LayoutRoot).Flick += new EventHandler<FlickGestureEventArgs>(GestureListener_Flick);
}
Tutorial for gesture ends here 🙂
Don’t hesitate to leave comment if you meet any difficulties.
I want to apply pinch in and out gesture along with slide transition on the image.But i am not able to do so.If i remove the transition then pinch gesture works prefectly fine,but on transition,it doesn’t.What could be the reason?
Sorry, what do your transition mean? Is that your image can be slide away or pinch in and out?
Actually image can slide away with a sliding transition supported by the device and also on multitouch pinch in – out it can zoom.
I wan to have both functionalities.Actually i am using flock gesture where slide transition is use.And pinch in and out would be used for zooming in and out of image
I got it run correctly.
I bind all the Listener to my Grid instead of my Image, do you?
I have and image and a pop up in a grid and slide transition works on image .Also pinchstarted and PinchDelta works on image.
Thanx man ..I just kept my image in a grid and all other thngs outside the grid.Implemented slide transition on grid and pinching on image.It worked!!!
One more problem i am facing.Is it possible to set the maximum zoom level while pinch out and minimum while pinch in for image?
I use the ScaleX and ScaleY to set the ZoomLevel, you may set it using
imageScale.ScaleX = Math.Max(Math.Min(initialScale * e.DistanceRatio, yourMax), yourMin);
in order to make the value in between your max and min value
Thanx a lot … It worked!! 🙂