Durante los anteriores artículos hemos visto como detectar y programar los gestos que realice el usuario en nuestras aplicaciones, pero para hacernos mas facil la vida el equipo de Silverlight lanzo Silverlight for Windows Phone Toolkit en el que nos proporciona una serie de clases que nos permitirán detectar los gestos del usuario de una manera mas sencilla y de programación de alto nivel. Concretamente nos proporcionan los objetos GestureService y GestureListener. En la siguiente figura vemos los gestos que podremos capturar con estos objetos.
Una vez que tenemos instalado el Toolkit solo tenemos que añadir la referencia al assembly Microsoft.Phone.Controls.Toolkit y referenciarlo en el XAML
1 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
El siguiente paso es añadir una instancia del objeto GestureListener al elemento donde queremos capturar los gestos del usuario por ejemplo a un grid
1 <Grid x:Name="LayoutRoot" Background="Transparent"> 2 <toolkit:GestureService.GestureListener> 3 <toolkit:GestureListener x:Name="gl" /> 4 </toolkit:GestureService.GestureListener> 5 ;.... 6 </Grid>
Para los gestos simples manejaremos un evento en el GestureListener utilizando los eventos que nos proporciona esta clase, a continuación pongo una lista para detectar los diferentes gestos y que eventos debemos utilizar en cada uno de ellos
- Tap – EventArgs: (point)Origin, (object)OriginalSource
- DoubleTap – EventArgs: (point)Origin, (object)OriginalSource
- Flick – EventArgs: (double)Angle, (Orientation)Direction, (double)HorizontalVelocity, (double)VerticalVelocity
Para el gesto Pan
- DragStarted – EventArgs: (Orientation)Direction
- DragCompleted – EventArgs: (Orientation)Direction, (double) HorizontalVelocity, (double) VerticalVelocity, (double) HorizontalChange, (double) VerticalChange
Para el gesto Pinch Stretch :
- Tap – captura la coordenada original
- PinchStarted – EventArgs: (double) Angle, (double) Distance – entre los dos puntos
- PinchDelta – EventArgs: (double) DistanceRatio, (double) TotalAngleDelta
- PinchCompleted – EventArgs: (double) DistanceRatio, (double) TotalAngleDelta
Para Touch & Hold :
- Tap –
- Hold – EventArgs: (point)Origin
Por ejemplo para hacer el gesto pinch en una imagen suscribimos el servicio GestureListener a la imagen
1 <Image x:Name="MyImage" 2 Source="Phone.png"> 3 <Image.RenderTransform> 4 <CompositeTransform x:Name="ImageTransformation" /> 5 </Image.RenderTransform> 6 <toolkit:GestureService.GestureListener> 7 <toolkit:GestureListener PinchStarted="OnPinchStarted" 8 PinchDelta="OnPinchDelta" /> 9 </toolkit:GestureService.GestureListener> 10 </Image>
En los eventos deberíamos de detectar los dos dedos y realizar las transformaciones necesarias en la imagen
1 private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e) 2 { 3 // store the initial rotation angle and scaling 4 _initialAngle = ImageTransformation.Rotation; 5 _initialScale = ImageTransformation.ScaleX; 6 7 // calculate the center for the zooming 8 Point firstTouch = e.GetPosition(MyImage, 0); 9 Point secondTouch = e.GetPosition(MyImage, 1); 10 11 Point center = new Point(firstTouch.X + (secondTouch.X - firstTouch.X) / 2.0, 12 firstTouch.Y + (secondTouch.Y - firstTouch.Y) / 2.0); 13 14 ImageTransformation.CenterX = center.X; 15 ImageTransformation.CenterY = center.Y; 16 }
Cuando el usuario pone los dedos en la pantalla y los gira recibiremos el evento PinchDelta y realizaremos las transformaciones en la imagen
1 private void OnPinchDelta(object sender, PinchGestureEventArgs e) 2 { 3 // update the rotation and scaling 4 ImageTransformation.Rotation = _initialAngle + e.TotalAngleDelta; 5 ImageTransformation.ScaleX = _initialScale * e.DistanceRatio; 6 ImageTransformation.ScaleY = ImageTransformation.ScaleX; 7 }
Como veis es mas sencillo de utilizar que meternos a bajo nivel como en los anteriores artículos, podéis ver mejor su utilización Silverlight for Windows Phone Toolkit