• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 29/04/2014

La gestuelle

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Au contraire de la génération précédente, Windows Mobile, les Windows Phone sont utilisables exclusivement avec les doigts. Cela peut paraitre évident, mais un doigt est beaucoup plus large que le pointeur d’une souris. Pour les développeurs qui sont habitués à créer des applications ou des sites web utilisables avec une souris, il faut prendre conscience que les zones qui sont touchables par un doigt doivent être taillées en conséquence.
De plus, les écrans des Windows Phone sont multipoints, c’est-à-dire que nous pouvons exercer plusieurs points de pressions simultanés, avec notamment plusieurs doigts. Ce qui offre tout une gamme de nouvelles façons d’appréhender l’interaction avec l’utilisateur.
Malheureusement, il est difficile de faire du multipoint avec une souris dans l’émulateur. Il est préférable dans ce cas d’utiliser directement un téléphone.

Le simple toucher

Nous l’avons vu à plusieurs reprises, c’est le mode d’interaction le plus pratique et le plus naturel pour l’utilisateur. Il utilise un doigt pour toucher l’écran. Geste très classique qui ressemble très fortement à un clic d’une souris. Le doigt est utilisé pour sélectionner un élément.
En général, les contrôles qui ont besoin d’être sélectionnés par une pression exposent un événement Tap. C’est le cas par exemple des boutons que nous avons vu :

<Button x:Name="MonBouton" Content="Cliquez-moi" Tap="MonBouton_Tap" />

Ils exposent également un événement Click :

<Button x:Name="MonBouton" Content="Cliquez-moi" Click="MonBouton_Click_1" />

Nous l’avons vu par exemple sur la barre d’application, mais il est présent un peu partout. Cet événement est hérité de Silverlight pour PC, il reste cependant utilisable mais il est déconseillé pour des raisons notamment de performance. Nous lui préfèrerons l’événement Tap, comme on l’a déjà vu.
Il existe d’autres événements, toujours hérités de Silverlight, comme l’événement MouseLeftButtonDown :

<Rectangle Width="200" Height="200" Fill="Aqua" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" />

Il correspond à l’événement qui est levé lorsque l’on touche un contrôle. L’événement MouseLeftButtonUp est quant à lui levé quand le doigt est relevé.
Mais le toucher simple ne sert pas qu’à « cliquer », il permet également d’arrêter un défilement. Voyez par exemple lorsque vous faites défiler une ListBox bien remplie, si vous touchez la ListBox et que vous lancez le doigt vers le bas, la liste défile vers le bas en fonction de la vitesse à laquelle vous avez lancé le doigt (ce mouvement s’appelle le « Flick »). Si vous retouchez la ListBox, le défilement s’arrêtera.
Tous ces toucher sont gérés nativement par beaucoup de contrôles XAML. Il est alors très simple de réagir à un toucher.

Les différents touchers

D’autres touchers sont utilisables, notamment le double-toucher, que l’on peut rapprocher du double-clic bien connu des utilisateurs de Windows. Il correspond à l’événement DoubleTap. Généralement peu utilisé, il peut servir à effectuer un zoom, comme dans Internet Explorer.

Nous connaissons un autre toucher, que l’on utilise pour faire défiler une ListBox par exemple. Il s’appelle le « pan » et consiste à toucher l’écran et à maintenir le toucher tout en bougeant le doigt dans n’importe quelle direction. Cette gestuelle ressemble au drag & drop que l’on connait sous Windows.
Dans le même genre, il existe le « flick » qui correspond à un toucher puis à un mouvement rapide dans une direction. C’est ce mouvement que l’on utilise dans le contrôle Pivot par exemple, et qui ressemble à un tourner de page. Ce flick est également utilisé dans la ListBox pour effectuer un fort défilement.
Notons encore un autre toucher, le touch and hold qui correspond à un « clic long ». On maintient le doigt appuyé pendant un certain temps. En général, cela fait apparaître un menu contextuel.
Enfin, nous avons le pinch et le stretch qui consistent, avec deux doigts à rapprocher ou écarter ses doigts. C’est ce mouvement qui est utilisé pour zoomer et dé-zoomer.

Il n’y a pas de support pour ces gestuelles évoluées dans les contrôles Windows Phone, aussi si nous souhaitons les utiliser nous allons devoir implémenter par nous-même ces gestuelles. Certaines sont plus ou moins faciles. Pour ceux par exemple qui ont déjà implémenté un drag & drop dans des applications Windows, il devient assez facile d’implémenter le Pan grâce aux événements MouseLeftButtonDown, MouseLeftButtonUp et MouseMove (qui correspond à la souris qui bouge).

Gestuelle avancée

D’autres événements un peu plus complexes sont également disponibles sur nos contrôles, il s’agit des événements ManipulationStarted, ManipulationDelta, et ManipulationCompleted. Ce qui est intéressant dans ces événements c’est qu’ils fournissent un paramètre avec beaucoup d’informations sur le toucher.
L’événement ManipulationStarted est levé au démarrage de la manipulation fournissant la position d’un ou plusieurs points de pression. Au fur et à mesure de la gestuelle, c’est l’événement ManipulationDelta qui est levé fournissant des informations par exemple sur les translations opérées. Enfin, à la fin de la manipulation, c’est l’événement ManipulationCompleted qui est levé. Par exemple, on pourrait se servir de ces événements pour déterminer la gestuelle du « flick » car cet événement fourni la vélocité finale du mouvement ainsi que la translation totale. La translation nous renseigne sur la direction du mouvement et la vélocité nous permet de savoir s’il s’agit réellement d’un flick et sa « puissance ».

Bref, ces événements peuvent fournir beaucoup d’informations sur la gestuelle en cours, mais c’est à nous de fournir du code pour interpréter ces mouvements, ce qui n’est pas toujours simple…

Je pourrais vous faire une petite démonstration, mais ... il y a mieux :)

Le toolkit à la rescousse

Heureusement, d’autres personnes ont réalisés ces calculs pour nous. Ouf !
Même si cela pourrait être très intéressant de prendre en compte des considérations de moteur physique pour déterminer la puissance d’un flick, il s’avère que c’est une tâche fastidieuse. C’est là qu’intervient à nouveau le toolkit et ses contrôles de gestuelle.

Prenez justement le Flick, il suffit de faire dans le XAML :

<Rectangle Width="300" Height="300" Fill="Aqua">
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener 
            Flick="GestureListener_Flick" />
    </toolkit:GestureService.GestureListener>
</Rectangle>

On utilise la propriété attachée GestureListener et on s’abonne à l’événement Flick. Ainsi, dans le code-behind on pourra avoir :

private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
{
    switch (e.Direction)
    {
        case System.Windows.Controls.Orientation.Horizontal:
            MessageBox.Show("Flick horizontal, angle : " + e.Angle);
            break;
        case System.Windows.Controls.Orientation.Vertical:
            MessageBox.Show("Flick vertical, angle : " + e.Angle);
            break;
    }
}

Ce qui est quand même super simple pour interpréter un flick.

D’autres gestuelles sont gérées avec les événements suivants :

Événement

Description

Tap

Simple toucher

DoubleTap

Deux touchers rapprochés

Flick

Mouvement rapide dans une direction

DragStarted, DragDelta, DragCompleted

Utilisés pour le mouvement du Pan

Hold

Représente le toucher long

PinchStarted, PinchDelta, PinchCompleted

Pour le mouvement du zoom

GestureBegin, GestureCompleted

Classe de base pour toutes les gestuelles

Chaque événement possède un paramètre qui fournit des informations complémentaires sur la gestuelle. Par exemple, le PinchDelta fournit des informations sur l’angle de rotation ou sur la distance parcourue lors du mouvement.

Pour finir, nous allons illustrer l’événement DragDelta pour déplacer notre rectangle grâce à une transformation :

<Rectangle Width="300" Height="300" Fill="Aqua">
    <Rectangle.RenderTransform>
        <CompositeTransform x:Name="Transformation"/>
    </Rectangle.RenderTransform>
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener DragDelta="GestureListener_DragDelta" />
    </toolkit:GestureService.GestureListener>
</Rectangle>

Et dans le code behind :

private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
{
    Transformation.TranslateX += e.HorizontalChange;
    Transformation.TranslateY += e.VerticalChange;
}

Difficile d’illustrer ce mouvement avec une copie d’écran, mais n’hésitez pas à tester cet exemple. Vous verrez que le rectangle bouge en fonction de votre mouvement de type Pan.

Merci le Windows Phone Toolkit ! :)

  • Les Windows Phone étant utilisables exclusivement avec les doigts, il est important de bien gérer les gestuelles en utilisant les événements des contrôles.

  • Le Windows Phone Toolkit nous aide fortement dans l’implémentation de ces gestuelles.

Exemple de certificat de réussite
Exemple de certificat de réussite