Windows Phone 7 – Tutorial XXV–Touch Input V

En esta entrada trataremos el MultiTouch, Windows Phone 7 exige a todos los fabricantes que la pantalla que implemente soporte MultiTouch, con lo que deberemos ver si nuestras aplicaciones necesitan reconocer gestos Multitouch como Pinch And Strech. Si tienes un teléfono te será fácil desarrollar en multitouch, pero si no lo tienes deberas realizar tu desarrollo a través del emulador. Si tienes Windows 7 y eres el afortunado de poseer un ordenador que posee Multitouch no tendrás que realizar nada para poder desarrollar pero si no lo eres tendremos que simularlo a través de varios ratones usb, para ello utilizaremos el proyecto http://multitouchvista.codeplex.com/ que inicialmente fue desarrollado para simular Multitouch en windows Vista, conn la llegada de Windows 7, que incluye una multitouch ,este proyecto se limita a establecer el enlace entre varios ratones USB y la función nativa de Windows 7 para el multitouch. De esta manera podremos utilizar nuestro emulador con dos ratones a la vez. Los pasos que necesitamos para instalarlo son:

  1. Bajarnos el proyecto http://multitouchvista.codeplex.com/
  2. Descomprimir el fichero
  3. Navegar hasta la carpeta Drivers x86 o x64 dependiendo de tu procesador
  4. Ejecutar en modo administrador el archivo drive.cmd
  5. Confirma todos los mensajes que te muestre al realizar la instalación, incluso el que te muestra que Windows no puede verificar el
  6. Cuando esten todos los pasos completos cierra el Command Prompt
  7. Abre Device Manager (Start ➪ Right – click Computer ➪ Properties ➪ Device Manager).
  8. Busca Universal Software HID que debe de aparecer bajo  Human Interface Devices node, pulsa el botón derecho del ratón y deshabilítalo
  9. Vuelve a pulsar el botón derecho del ratón y esta vez habilítalo pulsando en Enable, esto puede parecer un poco tonto pero a veces si no se hacen estos pasos el driver no funciona
  10. Abre Pen and Touch settings (Start ➪ Control Panel ➪ Pen and Touch), pulsa la pestaña Touch y selecciona “Show the touch pointer when I ’ m
    interacting with items on the screen”
  11. Abre Windows Explorer y ve a la carpeta donde has extraido el Zip en el paso 2 y ejecuta Multitouch.Service.Console.exe de esta manera arrancaras el servicio de Multitouch, deberian de aparecer uno o mas puntos rojos, uno por cada ratón usb que tengas puesto, pero no se moverán hasta que hagas el siguiente paso
  12. Ejecuta Multitouch.Driver.Console.exe para empezar el multitouch driver
  13. Ejecuta Multitouch.Confi guration.WPF.exe para configurar la herramienta Multitouch Vista

image

Ya tenemos habilitado nuestro simulador de Multitouch lo podemos probar abriendo Päint y con los dos ratones dibujando en el.

Pinch And Strecht

 

clip_image006

Este gesto es el típico utilizado para realizar Zoom in y Zoom out, vamos a implementar el behaivor en la aplicación que estamos utilizando para ver este efecto

 

image 

Al behaivor le vamos a llamar ZoomAction y heredará del ultimo que hemos creado FlickAction. Cuando varios puntos son utilizados el evento ManipulationDelta es lanzado varias veces,  Los datos suministrados  de este evento nos da una indicación de si los puntos de se mueven una hacia la otra (pin) o fuera de ella
(strecht)

 

1 public class ZoomAction : FlickAction 2 { 3 private bool DisablePan; 4 5 protected override void OnAttached() 6 { 7 base.OnAttached(); 8 9 this.AssociatedObject.ManipulationDelta += AO_ManipulationDelta; 10 this.AssociatedObject.ManipulationCompleted += AO_ManipulationCompleted; 11 } 12 13 protected override void OnDetaching() 14 { 15 this.AssociatedObject.ManipulationDelta -= AO_ManipulationDelta; 16 this.AssociatedObject.ManipulationCompleted -= AO_ManipulationCompleted; 17 18 base.OnDetaching(); 19 } 20 21 protected override void AO_MouseMove(object sender, MouseEventArgs e) 22 { 23 if (DisablePan) 24 { 25 return; 26 } 27 base.AO_MouseMove(sender, e); 28 } 29 30 void AO_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e) 31 { 32 DisablePan = false; 33 } 34 35 void AO_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) 36 { 37 if (e.CumulativeManipulation.Scale.X > 0 || 38 e.CumulativeManipulation.Scale.Y > 0) 39 { 40 DisablePan = true; 41 42 var scaleX = e.DeltaManipulation.Scale.X; 43 var scaleY = e.DeltaManipulation.Scale.Y; 44 foreach (var child in this.AssociatedObject.Children) 45 { 46 if (scaleX != 0) 47 { 48 var left = Canvas.GetLeft(child); 49 if (left > this.AssociatedObject.ActualWidth / 2) 50 { 51 left *= scaleX; 52 } 53 else 54 { 55 left /= scaleX; 56 } 57 left = Math.Min(Math.Max(0, left), 58 this.AssociatedObject.ActualWidth); 59 Canvas.SetLeft(child, left); 60 } 61 if (scaleY != 0) 62 { 63 var top = Canvas.GetTop(child); 64 if (top > this.AssociatedObject.ActualHeight / 2) 65 { 66 top *= scaleY; 67 } 68 else 69 { 70 top /= scaleY; 71 } 72 top = Math.Min( 73 Math.Max(0, top), this.AssociatedObject.ActualHeight); 74 Canvas.SetTop(child, top); 75 } 76 } 77 } 78 } 79 }

Ahora solo debemos de añadir este behaivor a los objetos en el xaml

1 <i:Interaction.Behaviors> 2 <!--<local:PanAction />--> 3 <!--<local:FlickAction />--> 4 <local:ZoomAction /> 5 </i:Interaction.Behaviors>

A lo largo de los anteriores artículos hemos visto como detectar los gestos y programarlos nosotros mismos, pero en el siguiente veremos como utilizar el toolkit de Silverlight que viene preparado para abstraernos de todo este desarrollo a lahor de implementar gestos en nuestros desarrollos

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *