[kento-splash-screen]

Comment implémenter la gestuelle tactile sous Windows Phone – Cas de Movember Me

By: Christian Hissibini, November 11, 2013

Cet article démontre comment détecter et utiliser la gestuelle tactile (touch gesture en anglais) dans une application Windows Phone.

Si vous utilisez l’application Movember Me, vous avez surement remarqué que le jeu consiste à prendre une photo à partir de la caméra ou de la bibliothèque d’images de son téléphone, puis de choisir un modèle de moustache et, enfin, de placer cette moustache au bon endroit sur la photo, tout en lui donnant les proportions voulues.

Nous allons nous intéresser à cette dernière opération, qui consiste à permettre à l’utilisateur de pouvoir déplacer un objet au doigt, à le pincer et modifier ses dimensions, et même à faire des rotations au besoin. Quelques illustrations :

Movember Me for Windows Phone

Pour réaliser cela, la technique est très simple. Si votre application est destinée pour les appareils Windows 7.x et 8, il suffit de faire appel au kit de gestuelle tactile (multitouch gestures) de la libraire Windows Phone Toolkit. Cette dernière fournit des contrôles évolués qui permettent d’enrichir nos applications et d’offrir une expérience utilisateur des plus sympathiques.­

 

Comment faire ?

Il n’y a rien de compliqué. Comme je l’ai mentionné plus haut, il suffit en fait d’importer la librairie Windows Phone Toolkit. Cette dernière prend en charge la gestuelle à travers les composants GestureService et  GestureListerner.

On commence donc par ajouter l’assembly Microsoft.Phone.Controls.Toolkit.dll dans notre projet et faire la déclaration du namespace au niveau du XAML.


xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Le composant GestureListerner est un gestionnaire d’événement qui permet aux développeurs de détecter les interactions tactiles entre l’application et l’écran du téléphone.

On ajoute donc le composant GestureListerner à l’élément sélectionné. Ici, il s’agit de notre modèle de moustache.


<Image  x:Name="myMustache">

<Image.RenderTransform>

<CompositeTransform x:Name="MyMustacheTransformation" />

</Image.RenderTransform>

<toolkit:GestureService.GestureListener>

<toolkit:GestureListener

PinchStarted="OnPinchStarted"

PinchDelta="OnPinchDelta"

DragDelta="OnDragDelta"/>

</toolkit:GestureService.GestureListener>

</Image>

 

Cette application a eu recours à trois événements : PinchStarted, PinchDelta, DragDelta. 

 

PinchStarted :  qui permet de récupérer les valeurs initiales de l’angle et de l’échelle de l’élément.


private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)

{

_initialAngle = MyMustacheTransformation.Rotation;

_initialScale = MyMustacheTransformation.ScaleX;

 

Point firstTouch = e.GetPosition(myMustache, 0);

Point secondTouch = e.GetPosition(myMustache, 1);

 

Point center = new Point(firstTouch.X + (secondTouch.X - firstTouch.X) / 2.0,

firstTouch.Y + (secondTouch.Y - firstTouch.Y) / 2.0);

 

MyMustacheTransformation.CenterX = center.X;

MyMustacheTransformation.CenterY = center.Y;

}

 

PinchDelta : cet événement est déclenché lorsqu’un toucher simultané sur deux points (deux doigts) se produit. Il récupère les valeurs modifiées de l’angle et de l’échelle de l’élément.


private void OnPinchDelta(object sender, PinchGestureEventArgs e)

{

MyMustacheTransformation.Rotation = _initialAngle + e.TotalAngleDelta;

MyMustacheTransformation.ScaleX = _initialScale * e.DistanceRatio;

MyMustacheTransformation.ScaleY = MyMustacheTransformation.ScaleX;

}

 

DragDelta : est déclenché lorsqu’il y a un déplacement. Il récupère les valeurs des changements dans les positions horizontale et verticale de l’élément.


private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)

{

Image rect = sender as Image;

TranslateTransform transform = rect.RenderTransform as TranslateTransform;

MyMustacheTransformation.TranslateX += e.HorizontalChange;

MyMustacheTransformation.TranslateY += e.VerticalChange;

}

 

Note : Exclusivement pour les applications Windows Phone 8, GestureListerner est obsolète car, les contrôles natifs embarquent désormais des fonctionnalités similaires d’événements gestuels.
Donc si votre application est exclusivement destinée pour Windows Phone 8, vous avez le choix soit d’utiliser directement les contrôles natifs ou bien la méthode décrite dans cet article.
Pour en savoir plus sur les contrôles natifs de gestuelle tactile sous Windows Phone 8, rendez-vous cliquez sur le lien suivant : GestureSample.xaml.cs 

 

Télécharger

   WindowsPhone_icon_badge_revcyanMovember Me” sur le Windows Phone Store

Octocat   Le code source avec exemple sur Github

codeplex  Microsoft Phone Toolkit sur CodePlex

Conclusion

Comme vous venez de le voir, il est facile d’implémenter la prise en charge de la gestuelle tactile dans les applications Windows Phone.
Si un aspect évoqué dans cet article ne vous semble pas assez clair, n’hésitez pas à poser vos questions.

Bonne aventure Windows Phone :)

Movember Me for Windows Phone - WebNoWar

Tagged with: , , ,
Posted in Featured, Miscellaneous, Mobile, Training & Webcasts, Tutorial
One comment on “Comment implémenter la gestuelle tactile sous Windows Phone – Cas de Movember Me
1 Pings/Trackbacks for "Comment implémenter la gestuelle tactile sous Windows Phone – Cas de Movember Me"
  1. […] This blog post is translated with Christian’s permission from the original post in French at Make Web Not War. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Avatar of Christian Hissibini

Christian Hissibini