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

What people are saying about #webnotwar

.@trishgarner thanks! How can one thing be so awesome and stupid at the same time? Lol #OGT14 #webnotwar

It's official. I've bought my new bike for the Open Government Tour! I pick it up next week :-) 3.bp.blogspot.com/-LiV9zIcK4wk/U… #OGT14 #webnotwar

The Genesis of the Open Government Tour: webnotwar.ca/genesis-open-g… - An introspective look at how @richardpietro is making #webnotwar Retweeted by Make Web Not War

The Genesis of the Open Government Tour: webnotwar.ca/genesis-open-g… - An introspective look at how @richardpietro is making #webnotwar

I submitted my @GTEC speaker application yesterday and in the spirit of being Open, here it is myeinsteinjob.blogspot.ca/2014/04/my-gte… #OGT14 #WebNotWar Retweeted by GTEC

I submitted my @GTEC speaker application yesterday and in the spirit of being Open, here it is myeinsteinjob.blogspot.ca/2014/04/my-gte… #OGT14 #WebNotWar

As part of #OGT14, I will be hosting 2-3 "practice events" in June in Southwestern Ontario...here is why: youtube.com/watch?v=OT4y2N… #webnotwar

The Open Government Tour has one more City Champion! @thefaketree through @RRPSNBSPRN will help in Moncton (and NB)! #OGT14 #WebNotWar Retweeted by Susan Holt

Here's a scary #OGT14 reality check: for a period of three months, I will be "Richard Pietro of no-fixed address" #webnotwar

The Open Government Tour has one more City Champion! @thefaketree through @RRPSNBSPRN will help in Moncton (and NB)! #OGT14 #WebNotWar Retweeted by Nick Scott

The Open Government Tour has one more City Champion! @thefaketree through @RRPSNBSPRN will help in Moncton (and NB)! #OGT14 #WebNotWar

The new #webnotwar community camera has arrived. I had no idea gopro was that small... It's like a pygmy camera lol pic.twitter.com/ecYz6CH48X

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

Retweeted by Alexis Smirnov

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

Retweeted by Victor Stinner

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

Retweeted by Montréal-Python

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

I'm happy to say that we have one more confirmed City Champion for #OGT14 ...@_Chris_Moore for #YEG! Thanks Chris! #WebNotWar Retweeted by Chris Moore 