Developpement Windows Phone - partie 9

Saisie tactile

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

• Bien démarrer (Hello World)
• Créer une interface utilisateur pour Windows Phone en XAML
• Utiliser des contrôles
• Types de contrôles
• Contrôles Panorama et Pivot
• Travailler avec du texte sur le Windows Phone
• Mise en page sur l’écran
• Orientations de l’écran
• Saisie tactile
• Navigation
• Exécuter votre application en arrière-plan (tombstoning)
• Notifications Push pour le développement Windows Phone
• Publier votre application sur le Marketplace

Visuels et média

• Images
• Animations
• Vidéo et Audio
• Graphiques
• Pinceaux

Travailler avec les données

• Obtenir des données dans vos applications Windows Phone
• Data binding
• Isolated storage
• Accéder à un service Web REST
• Consommer des données Windows Azure

Sondes et autres fonctionnalités spécifiques au téléphone

• Lanceurs et choosers
• Détecter des mouvements (accéléromètres)
• Développer avec le GPS Windows Phone (Services de localisation)
• Développer avec l’appareil photo du Windows Phone

---

Saisie tactile

Les appareils Windows Phone 7 ont des écrans multi-touch qui permet aux utilisateurs d’utiliser plusieurs doigts simultanément pour produire différents mouvements d’entrés, tels que taper, la pichenette ou même pincer. Silverlight pour Windows Phone a un nombre de mécanismes différents pour gérer la saisie tactile. Ce tutoriel couvre les bases de l’utilisation de la saisie tactile dans vos applications Silverlight.

Ce tutoriel contient les sections suivantes:

• Introduction à la saisie tactile (Touch Input)
• Les Gestures
• Utiliser les évènements de la souris
• Utiliser les évènements de manipulation
• Silverlight Toolkit pour Windows Phone
• Interface graphique et saisie tactile

Remarque

Les exemples de ce tutoriel utilisent Silverlight du navigateur pour simuler le comportement de Silverlight pour Windows Phone. Le comportement actuel peut être légèrement différent dans un émulateur Windows Phone ou sur un appareil Windows Phone.

Introduction à la saisie tactile

Les appareils Windows Phone utilisent le toucher pour la majorité des entrées de l’utilisateur. Windows Phone supporte les écrans multi-touch qui permettent aux utilisateurs d’utiliser les gestes naturels pour interagir avec l’appareil. L’ajout du support du toucher et du mouvement pour vos applications peut grandement améliorer l’expérience utilisateur. Il y a un plusieurs façons différentes qui permettent de gérer les saisies tactiles dans vos applications Windows Phone.

Les évènements de souris avec Silverlight peuvent être utilisés pour détecter un simple mouvement avec un doigt comme une tape ou une double tape. Les gestionnaires d’évènements de la souris peuvent être rapidement rajoutés à votre application et sont un moyen facile d’obtenir un soutien tactile.

Les évènements de manipulation comme ManipulationStarted et ManipulationDelta sont utilisés pour gérer des gestes plus complexes comme des mouvements multi-touch et des mouvements qui utilisent l’inertie et les données de vitesse.

La classe TouchPoint est une autre façon de gérer la saisie tactile en Silverlight pour Windows Phone. Cette classe est un système d’entrée de bas niveau qui n’est pas couvert dans ce tutoriel.

Vous pouvez gérer le touché et les mouvements avec les classes GestureService et GestureListener contenus dans le Silverlight Toolkit pour Windows Phone. Le Toolkit est un projet Open Source et non une partie du cœur de Silverlight pour Windows Phone, mais un nombre de classes qui sont apparues en premier dans le Toolkit était éventuellement incluses dans les précédentes versions de Silverlight.

Les Gestures

Les gestes ou mouvements appelés ici les Gestures, sont un moyen de haut niveau d’interpréter les données de saisie tactile en un ensemble de mouvements communs tels que taper, la pichenette ou pincer. Les mouvements communs utilisés dans Windows Phone sont :

Gesture	Description
Tap	Un doigt touche l’écran et le relève
Double Tap	Un doigt qui tape l’écran deux fois d’affilé
Hold	Un doigt touche l’écran et le tient brièvement en place
Drag	Un doigt touche l’écran et se déplace dans n’importe quelle direction
Flick	Un doigt glisse au travers l’écran et se relève sans arrêt.
Pinch	Deux doigts pressent sur l’écran et se déplacent

Les évènements de la souris avec Silverlight comme MouseLeftButtonUp et MouseMove peuvent être utilisés pour simple support pour les mouvements d’un doigt tels que le tapotement.

Pour les mouvements multi-touch comme le pincement et les mouvements qui utilisent l’inertie et les données de vitesses telles que les pichenettes, les évènements de manipulation sont utilisés. L’information fournie par les évènements de manipulation n’est pas dans la forme du geste qui a été effectué, mais représente les données telles que la position, l’écart de translation, et la vélocité. Ces saisies de données peuvent être utilisées pour déterminer le type de mouvement qui a été effectué. C’est de la responsabilité du développeur Silverlight de convertir ces informations dans un mouvement équivalent. Ceci dit, le Silverlight Toolkit fournit du support aux mouvements au travers les classes GestureService et GestureListener.

Utiliser les évènements de la souris

La façon la plus simple de permettre la saisie tactile dans votre application mobile Silverlight pour Windows Phone est par l’utilisation des évènements de la souris. Ceux-ci sont limités aux mouvements d’un simple doigt comme l’action de taper une fois ou deux sur l’écran (on parlera ici de « tap » et de « double tap »), et ils ne supporteront pas les données basées sur la vitesse du doigt. Un simple doigt qui touche l’écran est converti en un évènement de souris, comme par exemple l’évènement MouseLeftButtonDown lorsque vous placez votre doigt sur l’écran, ou l’évènement MouseLeftButtonUp lorsque vous levez votre doigt de l’écran et l’évènement MouseMove lorsque vous faites glisser votre doigt sur l’écran. Les autres évènements de la souris qui sont utilisés en Silverlight pour Windows Phone sont les suivants : MouseLeave et MouseEnter. Les arguments de ces évènements pour tous les évènements de souris sont représentés par MouseButtonEventArgs.

L’évènement Click sur la classe Button est un autre moyen d’ajouter un support pour les mouvements de tape sur les boutons.

L’exemple suivant montre comment utiliser les évènements MouseLeftButtonDown, MouseLeftButtonUp, et MouseLeave pour gérer le mouvement de tape sur un objet Rectangle .

En premier, un Rectangle nommé TestRectangle  est créé en XAML et les gestionnaires d’évènements sont ajoutés pour les évènements MouseLeftButtonDown, MouseLeftButtonUp, et MouseLeave .

XAML

Code Snippet

1. <Rectangle Name="TestRectangle"
2.            Height="100"
3.            Width="200"
4.            Fill="Blue"
5.            MouseLeftButtonDown="Tap_LeftButtonDown"
6.            MouseLeftButtonUp="Tap_LeftButtonUp"
7.            MouseLeave="Tap_MouseLeave" />

Par la suite, les gestionnaires d’évènements pour les évènements de la souris sont créés. L’Event Handler MouseLeftButtonDown augmentera la hauteur (Height ) et la largeur (Width ) du Rectangle. L’Event Handler MouseLeftButtonUp définit la hauteur (Height ) et la largeur (Width ) de retour à leurs valeurs initiales. Enfin, l’Event Handler MouseLeave définit aussi la hauteur (Height ) et la largeur (Width ) de retour à leurs valeurs initiales.

C#

Code Snippet

1. private void Tap_LeftButtonDown(object sender, MouseButtonEventArgs e)
2.         {
3.             Rectangle rect = sender as Rectangle;
4.             // Change the size of the Rectangle.
5.             if (null != rect)
6.             {
7.                 rect.Width = 250;
8.                 rect.Height = 150;
9.             }
10.         }
11.  
12.         private void Tap_LeftButtonUp(object sender, MouseButtonEventArgs e)
13.         {
14.             Rectangle rect = sender as Rectangle;
15.             // Reset the dimensions on the Rectangle.
16.             if (null != rect)
17.             {
18.                 rect.Width = 200;
19.                 rect.Height = 100;
20.             }
21.         }
22.  
23.         private void Tap_MouseLeave(object sender, MouseEventArgs e)
24.         {
25.             Rectangle rect = sender as Rectangle;
26.             // Finger moved out of Rectangle before the mouse up event.
27.             // Reset the dimensions on the Rectangle.
28.             if (null != rect)
29.             {
30.                 rect.Width = 200;
31.                 rect.Height = 100;
32.             }
33.         }

Visual Basic

Code Snippet

1. Private Sub Tap_LeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
2.  
3.         Dim rect As Rectangle = CType(sender, Rectangle)
4.  
5.         ' Change the size of the Rectangle.
6.  
7.         If (Not (rect) Is Nothing) Then
8.  
9.             rect.Width = 250
10.  
11.             rect.Height = 150
12.  
13.         End If
14.  
15.     End Sub
16.  
17.     Private Sub Tap_LeftButtonUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
18.  
19.         Dim rect As Rectangle = CType(sender, Rectangle)
20.  
21.         ' Reset the dimensions on the Rectangle.
22.  
23.         If (Not (rect) Is Nothing) Then
24.  
25.             rect.Width = 200
26.  
27.             rect.Height = 100
28.  
29.         End If
30.  
31.     End Sub
32.  
33.     Private Sub Tap_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
34.  
35.         Dim rect As Rectangle = CType(sender, Rectangle)
36.  
37.         ' Finger moved out of Rectangle before the mouse up event.
38.  
39.         ' Reset the dimensions on the Rectangle.
40.  
41.         If (Not (rect) Is Nothing) Then
42.  
43.             rect.Width = 200
44.  
45.             rect.Height = 100
46.  
47.         End If
48.  
49.     End Sub

L’exemple suivant démontre les évènements de tapotement de la souris. Pour essayer cet exemple, cliquez sur le Rectangle.

L’exemple suivant montre comment utiliser l’évènement Click sur un Button pour gérer le mouvement de tape.

Un Button est créé en XAML et un Event Handler est ajouté pour l’évènement Click .

XAML

Code Snippet

1. <Button Name="TestButton"
2.         Content="Tap"
3.         Height="100" Width="200"
4.         Click="TestButton_Click" />

Dans l’Event Handler Click , le contenu du bouton est permuté entre « Tap » et « Tap Again ». Le texte change à chaque fois que le bouton est tapé.

C#

Code Snippet

1. private void TestButton_Click(object sender, RoutedEventArgs e)
2.         {
3.             Button button = sender as Button;
4.  
5.             if (null != button)
6.             {
7.                 // Toggle Button.Conten between "Tap" and "Tap Again!"
8.                 if (button.Content as string == "Tap")
9.                 {
10.                     button.Content = "Tap Again!";
11.                 }
12.                 else
13.                 {
14.                     button.Content = "Tap";
15.                 }
16.             }
17.         }

Visual Basic

Code Snippet

1. Private Sub TestButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
2.  
3.     Dim button As Button = CType(sender, Button)
4.  
5.     If (Not (button) Is Nothing) Then
6.  
7.         ' Toggle Button.Conten between "Tap" and "Tap Again!"
8.  
9.         If (CType(button.Content, String) = "Tap") Then
10.  
11.             button.Content = "Tap Again!"
12.  
13.         Else
14.  
15.             button.Content = "Tap"
16.  
17.         End If
18.  
19.     End If
20.  
21. End Sub

L’exemple suivant démontre un simple clic d’un Button. Pour essayer cet exemple, cliquez sur le bouton

Utiliser des évènements de manipulation

Si vous avez besoin de supporter plusieurs mouvements de doigts dans votre application Silverlight, ou des mouvements qui utilisent des données de vitesse, alors vous aurez besoin d’utiliser les évènements de manipulation. Vous pouvez utiliser les évènements de manipulation pour détecter des mouvements comme le Flick, glisser, pincer et le maintien. Le tableau suivant liste les classes d’évènements de manipulation dans Silverlight pour Windows Phone.

ManipulationStarted Event	Survient quand une manipulation commence sur un contrôle UIElement.
ManipulationDelta Event	Survient quand une position change pendant une manipulation.
ManipulationCompleted Event	Se produit quand une manipulation et que l’inertie sur un contrôle UIElement sont terminés.
ManipulationStartedEventArgs	Fournit des données pour l'événement ManipulationStarted .
ManipulationDeltaEventArgs	Fournit des données pour l'événement ManipulationDelta
ManipulationVelocities	Décrit la vitesse à laquelle les manipulations se produisent
ManipulationCompletedEventArgs	Fournit des données pour l'événement ManipulationCompleted .

Un évènement de mouvement dans Silverlight pour Windows Phone consiste en une série d'évènements de manipulation. Chaque geste commence avec l'événement ManipulationStarted, comme quand un utilisateur touche l'écran. Ensuite, un ou plusieurs évènements ManipulationDelta sont levés. Par exemple, si vous touchez l'écran et faites glisser votre doigt sur celui-ci, un certain nombre d'évènements ManipulationDelta sont levés. Enfin, un évènement ManipulationCompleted est déclenché lorsque le geste est terminé.

Si vous utilisez l'émulateur Windows Phone pour tester votre code l'évènement de manipulation et que vous n'avez pas un moniteur à écran tactile, vous serez limité dans ce que vous pourrez tester. L'émulateur ne supporte pas le multi-touch avec la souris. Vous pouvez tester les translations, comme le montre l'exemple suivant.

L'exemple suivant montre comment utiliser les évènements ManipulationDelta pour gérer une opération de mouvement de glisse. L'exemple créé un Rectangle qui peut être glissé au travers de l’écran.

D'abord, un Rectangle nommé TestRectangle  est créé en XAML avec une hauteur (Height ) et une largeur (Width ) de 200.

XAML

Code Snippet

1. <Rectangle Name="TestRectangle"
2.             Width="200"
3.             Height="200"
4.             Fill="Blue" />

Ensuite, un TranslateTransform nommé dragTranslation  est créé pour la translation du Rectangle. Un Event Handler est ajouté au rectangle pour gérer l'événement ManipulationDelta et dragTranslation est ajouté à la RenderTransform du Rectangle. Enfin, dans l’Event Handler de ManipulationDelta , la position du Rectangle est mise à jour en utilisant le TranslateTransform sur la propriété DeltaManipulation.

C#

Code Snippet

1. public MainPage()
2.         {
3.  
4.             InitializeComponent();
5.  
6.             // Add handler for the ManipulationDelta event
7.  
8.             TestRectangle.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(Drag_ManipulationDelta);
9.             dragTranslation = new TranslateTransform();
10.             TestRectangle.RenderTransform = this.dragTranslation;
11.         }
12.  
13.         void Drag_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
14.         {
15.             // Move the rectangle.
16.  
17.             dragTranslation.X += e.DeltaManipulation.Translation.X;
18.             dragTranslation.Y += e.DeltaManipulation.Translation.Y;
19.         }

Visual Basic

Code Snippet

1.  
2. public MainPage {
3.  
4.     InitializeComponent
5.  
6. ' Add handler for the ManipulationDelta event
7.  
8. AddHandler TestRectangle.ManipulationDelta, AddressOf Me.Drag_ManipulationDelta
9.  
10.     dragTranslation = New TranslateTransform
11.  
12.     TestRectangle.RenderTransform = Me.dragTranslation
13.  
14. End Sub
15.  
16. Private Sub Drag_ManipulationDelta(ByVal sender As Object, ByVal e As ManipulationDeltaEventArgs)
17.  
18.     ' Move the rectangle.
19.  
20.     dragTranslation.X = (dragTranslation.X + e.DeltaManipulation.Translation.X)
21.     dragTranslation.Y = (dragTranslation.Y + e.DeltaManipulation.Translation.Y)
22.  
23. End Sub

l'exemple fonctionnant dans l'émulateur Windows Phone. Ceci n’est pas un exemple interactif.

Silverlight Toolkit pour Windows Phone

Le Silverlight Toolkit pour Windows Phone est un projet open source où l’équipe Microsoft Silverlight partage de nouveaux composants et fonctionnalités qui ne sont pas dans le noyau de Silverlight pour Windows Phone. Le toolkit comprend un framework de mouvements qui utilise les classes GestureService et GestureListener pour détecter des gestes précis. Ces classes peuvent considérablement simplifier l'utilisation des mouvements dans votre application Silverlight.
Pour utiliser l'API du Silverlight Toolkit pour Windows Phone vous aurez besoin de le télécharger et de l’installer. La page de parution du Silverlight Toolkit contient des instructions pour le téléchargement de la version actuelle.

 

Interface graphique et saisie tactile

Comment la conception de votre interface utilisateur peut influencer avec quelle facilité votre application est utilisée avec la saisie tactile. Les lignes directrices sur la conception de l’expérience utilisateur pour Windows Phone dispose d’un certain nombre de Best Practices pour l’utilisation des saisies tactiles dans vos applications. Cela vaut la peine de le lire, mais voici quelques points traitant du toucher et de la conception d’interface graphique:

1. Toutes les commandes simples dans votre application doivent être réalisées avec un seul doigt
2. Les contrôles tactiles doivent réagir immédiatement. Même un léger décalage entre le moment où l’utilisateur touche l’écran et quand le contrôle répond peut être perceptible et affecter l’expérience utilisateur.
3. Fournit immédiatement des retours visuels ou auditifs
4. Si une opération prend beaucoup de temps, envisagez de fournir des retours supplémentaires
5. Les composants tactiles qui sont ciblés ne doivent pas être plus petits que 9mm ou 34 pixels
6. 2mm ou 8 pixels doivent être disponibles entre chaque contrôle tactile
7. Dans de rares cas, les contrôles peuvent être petits, mais vous ne devez jamais créer un contrôle plus petit que 7mm ou 26 pixels.
8. Pour les contrôles qui seront fréquemment touchés, envisager de rendre les contrôles plus grands que 9 mm.
9. Les composants tactiles qui sont ciblés peuvent être plus grands que l’élément tactile, mais en aucun cas plus petit.
10. L’élément tactile ne doit pas être plus petit de 60% que la cible touchée.
11. Les contrôles contraints verticalement sont plus faciles à toucher

Voir aussi

• Le support des Gestures pour Windows Phone
• Les lignes directrices sur la conception de l’expérience utilisateur pour Windows Phone
• Comment gérer les évènements de manipulation
• Les entrées dans Silverlight pour Windows Phone
• Travailler avec les saisies tactiles (Windows Phone)
• La détection des Gestures sur un écran multi-touch (Windows Phone)
• Le toolkit Silverlight pour Windows Phone