Langage: HTML | XAML

Réponse à l’interaction utilisateur (XAML)

Applies to Windows and Windows Phone

Découvrez la plateforme d’interaction utilisateur, les sources d’entrées (tactile, pavé tactile, souris, stylo/stylet et clavier), les modes (clavier tactile, roulette de la souris, gomme du stylet, etc.) ainsi que les interactions utilisateur prises en charge.

Nous expliquons dans quelle mesure des fonctionnalités d’interaction et d’entrée de base sont fournies gratuitement, comment personnaliser l’expérience d’interaction utilisateur et comment les modèles d’interaction sont partagés entre les diverses infrastructures de langage.

À l’aide d’instructions, de meilleures pratiques et d’exemples, nous allons vous montrer comment exploiter pleinement les fonctionnalités d’interaction pour créer des applications avec des expériences utilisateur intuitives, attirantes et immersives.

Astuce  Les informations fournies dans cette rubrique sont spécifiques au développement d’applications en C++, C# ou Visual Basic.

Pour les applications en JavaScript, voir Réponse à l’interaction utilisateur (HTML).

Pour les applications utilisant DirectX avec C++, voir Réponse à l’interaction utilisateur (DirectX et C++).

Conditions préalables:  Si vous débutez dans le développement d’applications, consultez les rubriques ci-dessous pour vous familiariser avec les technologies décrites ici.

Créer votre première application du Windows Store en C# ou Visual Basic

Créer votre première application du Windows Store en C++

Feuille de route pour les applications Windows Runtime en C# ou Visual Basic

Feuille de route pour les applications du Windows Store en C++

Découvrir les événements avec Vue d’ensemble des événements et des événements routés.

Fonctionnalités d’application de A à Z:  Étudier cette fonctionnalité de façon plus approfondie dans le cadre de notre série Fonctionnalités d’application de A à Z

Interaction utilisateur de A à Z (XAML)

Personnalisation de l’interaction utilisateur de A à Z (XAML)

Recommandations en matière d’expérience utilisateur:  

Les bibliothèques de contrôles de plateforme (HTML et XAML) fournissent l’intégralité de l’expérience d’interaction utilisateur de Windows, y compris les interactions standard, les effets physiques animés et le retour visuel. Utilisez ces contrôles intégrés si vous n’avez pas besoin d’une prise en charge d’interaction personnalisée.

Si les contrôles de plateforme ne suffisent pas, les présentes recommandations peuvent vous aider à fournir une expérience d’interaction utilisateur à la fois immersive et cohérente entre les divers modes d’entrée. Ces recommandations sont axées principalement sur l’entrée tactile, mais elles s’appliquent également à l’entrée de pavé tactile, de souris, de clavier et de stylet.

Exemples:  Découvrez cette fonctionnalité en action dans nos exemples d’applications.

Entrée : exemple de fonctionnalités de périphériques

Exemple d’entrée

Entrée : mouvements et manipulations avec GestureRecognizer

Exemple de zoom, de panoramique et de défilement XAML

Entrée : exemple d’entrée manuscrite

Vue d’ensemble de la plateforme d’interaction utilisateur

Concevez vos applications en gardant à l’esprit les interactions tactiles : l’entrée tactile est prise en charge par un nombre croissant et de plus en plus varié d’appareils et les interactions tactiles représentent un aspect fondamental de l’expérience utilisateur.

L’aspect tactile étant un mode d’interaction primordial pour les utilisateurs, Windows 8 et Windows Phone sont optimisés pour l’entrée tactile afin de les rendre plus réactifs, précis et faciles à utiliser. Rassurez-vous, les modes d’entrée qui ont déjà fait leurs preuves (la souris, le stylet et le clavier) sont complètement pris en charge et cohérents avec les entrées tactiles du point de vue du fonctionnement (voir Mouvements, manipulations et interactions). La vitesse, la précision et le retour tactile fournis par les modes d’entrée traditionnels sont familiers et accrocheurs pour de nombreux utilisateurs. Ces expériences d’interaction uniques et distinctives n’ont pas été remises en question.

L’intégration d’interactions tactiles dans la conception de vos applications peut fortement améliorer l’expérience utilisateur de celles-ci. Soyez créatif lors de la conception de cette expérience, faites en sorte que votre application prenne en charge le plus large éventail possible de fonctionnalités et de préférences, adressez-vous au public le plus large possible et vous attirerez ainsi plus de clients vers votre application.

La plateforme d’interaction utilisateur repose sur des couches de fonctionnalités qui ajoutent de la flexibilité et de la puissance progressivement :

Contrôles intégrés

Tirez parti des contrôles intégrés fournis par le biais des infrastructures de langage pour offrir une expérience d’interaction utilisateur de plateforme intégrale. Cette fonctionnalité se comporte bien pour la plupart des applications.

Les contrôles intégrés sont conçus pour être optimisés pour l’expérience tactile tout en fournissant des expériences d’interaction cohérentes et attrayantes dans tous les modes d’entrée. Ils prennent en charge un ensemble complet de mouvements (appui prolongé, appui, glissement, balayage, pincement, étirement, rotation) qui, couplés avec des manipulations directes (mouvement panoramique, zoom, rotation, glissement) et un comportement inertiel réaliste, fournissent une expérience d’interaction à la fois attrayante, immersive, cohérente et conforme aux meilleures pratiques sur toute la plateforme Windows.

Pour plus d’informations sur les bibliothèques de contrôles, voir Ajout de contrôles et de contenu (applications du Windows Store en C#/VB/C++ et XAML).

Vues

Ajustez l’expérience d’interaction utilisateur par le biais des paramètres de panoramique/défilement et zoom de vos vues d’applications. La vue d’une application régit la manière dont un utilisateur accède à cette dernière et manipule votre application et son contenu. Les vues fournissent également des comportements tels que l’inertie, le rebond de limite de zone de contenu et les points d’ancrage.

Les paramètres de panoramique/défilement déterminent la façon dont les utilisateurs naviguent au sein d’une vue (telle que la page d’un magazine ou d’un livre, la structure de dossiers d’un ordinateur, une bibliothèque de documents ou un album photo) quand le contenu de la vue est trop grand pour la fenêtre d’affichage.

  • Applies to Windows

Les paramètres de zoom s’appliquent à la fois au zoom optique et au contrôle SemanticZoom. Le zoom sémantique est une technique optimisée pour l’interaction tactile applicable à la présentation et à la navigation de grands ensembles de données ou de contenus associés dans une même vue utilisant deux modes de classification (ou niveaux de zoom) distincts. Cette fonctionnalité est identique au mouvement panoramique et au défilement simple (qui peuvent être utilisés conjointement au zoom sémantique) au sein d’une même vue.

L’utilisation des affichages d’application pour modifier les comportements de panoramique/défilement et de zoom peut offrir une expérience d’interaction aussi fluide que possible via la gestion de pointeur et des événements de mouvement comme décrit ultérieurement.

Pour plus d’informations sur les vues d’applications, voir Définition de dispositions et d’affichages.

Pour plus d’informations sur le zoom, voir Recommandations en matière de zoom optique et de redimensionnement ou Recommandations en matière de zoom sémantique.

Pour plus d’informations sur le mouvement panoramique/défilement, voir Recommandations en matière de mouvement panoramique.

Événements de pointeur, de mouvement et de manipulation

Un pointeur est un type d’entrée générique dont le mécanisme d’événements unifiés expose les informations de base (telles que la position de l’écran) sur la source d’entrée active (tactile, pavé tactile, souris ou stylet). Les mouvements vont de simples interactions statiques telles qu’un appui à des manipulations plus complexes telles que le zoom, le mouvement panoramique et la rotation. Pour plus d’informations, voir Mouvements, manipulations et interactions.

Remarque  

Les événements d’action statique sont déclenchés une fois que l’interaction se termine. Les événements d’action de manipulation indiquent une interaction en cours. Des événements d’action de manipulation commencent à se déclencher lorsque l’utilisateur touche l’élément et se poursuivent jusqu’à ce que l’utilisateur mette fin au contact ou que la manipulation soit annulée.

L’accès aux événements de mouvement et de pointeur permet d’utiliser le langage de conception d’interaction tactile pour les jeux, les contrôles personnalisés et les éléments de retour visuel, qui étend les mouvements et traite les données d’entrée brutes et d’autres interactions personnalisées.

Événements de pointeur

Les événements suivants correspondent à des mouvements de bas niveau. Les événements de ce niveau sont semblables aux événements d’entrée de souris traditionnels, mais ils fournissent davantage d’informations sur le périphérique et le mouvement d’entrée utilisateur.

ÉvénementDescription
PointerCaptureLost Se produit quand un événement perd le contact avec le pointeur.
PointerEntered Se produit après que le pointeur a pénétré dans les limites d’un élément.
PointerExited Se produit après que le pointeur a quitté les limites d’un élément.
PointerMoved Se produit quand le pointeur se déplace dans les limites d’un élément.
PointerPressed Se produit quand un mouvement d’appui est effectué dans les limites d’un élément.
PointerReleased Se produit quand un mouvement de relâchement est effectué dans les limites d’un élément.
PointerWheelChanged Se produit quand l’utilisateur modifie la position de la roulette de souris.

 

Utilisation de PointerRoutedEventArgs

Tous les événements de pointeur utilisent PointerRoutedEventArgs pour les données d’événement. Outre les propriétés familières Handled et OriginalSource, cette classe fournit les membres suivants :

MembreDescription
Pointer property Obtient un objet Pointer qui identifie le périphérique d’entrée et le type de périphérique.
GetCurrentPoint method Obtient un objet PointerPoint qui fournit des informations étendues sur l’emplacement du pointeur et l’état du périphérique au moment de l’événement.
GetIntermediatePoints method Obtient une liste d’objets PointerPoint qui représentent les emplacements et les états du périphérique du pointeur entre l’événement d’entrée actuel et les événements précédents. Ceci est utile pour déterminer si une série d’actions de pointeur représente un mouvement plus complexe.
KeyModifiers property Indique si un appui sur une touche de modification telle que Ctrl ou Maj a lieu en même temps que l’événement de pointeur.

 

Capture de pointeur

Dans certains cas, vous souhaiterez qu’un élément continue à recevoir des événements PointerMoved même quand le pointeur ne se trouve plus au-dessus de l’élément. On appelle cela la capture de pointeur. Elle est utile par exemple quand l’utilisateur effectue une opération de glissement qui ne doit pas être interrompue simplement parce que l’utilisateur déplace momentanément le pointeur en dehors des limites d’un élément. Lorsqu’un élément a la capture de pointeur, l’événement PointerMoved ne se produit pour aucun élément autre que celui sur lequel le pointeur se déplace.

Vous pouvez utiliser les méthodes CapturePointer, ReleasePointerCaptureet ReleasePointerCaptures pour activer et désactiver la capture de pointeur. Celle-ci fonctionne même avec plusieurs points tactiles ou périphériques d’entrée. Pendant que la capture de pointeur est en vigueur, vous pouvez utiliser la propriété PointerCaptures pour extraire des objets Pointer qui représentent chaque pointeur capturé.

La capture de pointeur exige que le bouton gauche de la souris, le doigt ou le stylet demeure appuyé pendant toute la durée du mouvement. Dès que le bouton est relâché ou le doigt relevé, la capture de pointeur est perdue et l’événement PointerCaptureLost se produit.

Événements de mouvement

Les événements suivants correspondent à des mouvements de haut niveau. Ils se produisent en plus des événements de bas niveau qui ont lieu pour les mêmes actions utilisateur. Par exemple, l’événement Tapped se produit après les événements PointerPressed et PointerReleased. En règle générale, il convient d’utiliser l’un des événements de haut niveau, à moins que vous ne deviez répondre à une partie spécifique du mouvement. Par exemple, il se peut que vous deviez effectuer différentes actions pour l’appui et le relâchement.

ÉvénementDescription
Tapped Se produit quand un élément est soumis à un clic ou à un appui, à moins que sa propriété IsTapEnabled ait la valeur false.
RightTapped Se produit quand un élément est soumis à un clic droit, ou après un événement Holding, à moins que la propriété IsRightTapEnabledde l’élément ait la valeur false.
DoubleTapped Se produit quand un élément est soumis à deux clics ou deux appuis successifs, à moins que sa propriété IsDoubleTapEnabled ait la valeur false.
Holding Se produit quand le pointeur est maintenu appuyé sur un élément, à moins que la propriété IsHoldingEnabled ait la valeur false. Cet événement ne se produit pas pour l’entrée de souris. Pour l’entrée de souris équivalente, utilisez plutôt RightTapped.

 

Chacun des ces événements possède son propre type d’argument d’événement, mais ils partagent tous certains membres. Dans un gestionnaire pour l’un de ces événements, vous pouvez déterminer si l’entrée provient de la souris, de l’écran tactile ou du stylet en vérifiant la propriété PointerDeviceType de l’argument d’événement. Vous pouvez également déterminer les coordonnées de l’événement par rapport à l’écran ou à un élément spécifié en appelant la méthode GetPosition de l’argument d’événement.

Événements de manipulation

Les événements suivants correspondent à des mouvements de niveau encore inférieur. Les événements de ce niveau procurent les informations les plus précises sur le mouvement d’entrée utilisateur.

ÉvénementDescription
ManipulationStarting Se produit lorsque le processeur de manipulation est créé.
ManipulationStarted Se produit lorsqu’un périphérique d’entrée entame une manipulation sur l’objet UIElement.
ManipulationDelta Se produit lorsque le périphérique d’entrée change de position au cours d’une manipulation.
ManipulationInertiaStarting Se produit lorsque le périphérique d’entrée perd le contact avec l’objet UIElement durant une manipulation et que cela entraîne un début d’inertie.
ManipulationCompleted Se produit lorsque les opérations de manipulation et d’inertie sont terminées sur l’objet UIElement.

 

Comme leurs noms l’indiquent, ces événements conviennent à l’utilisation de l’entrée tactile, de souris et de stylet pour manipuler des éléments de votre interface utilisateur. Vous pouvez les utiliser par exemple pour permettre aux utilisateurs de faire glisser des éléments à l’écran et pour fournir des effets d’inertie réalistes. Les différentes classes d’arguments d’événements fournissent des informations détaillées sur la position, le changement et la vélocité du pointeur, en plus de propriétés communes telles que PointerDeviceType, Handled et OriginalSource.

Pour obtenir un exemple simple d’utilisation des événements de manipulation, voir Démarrage rapide : Entrée tactile.

Test de positionnement

Quand un mouvement d’entrée utilisateur se produit au-dessus d’un UIElement, les événements correspondants se produisent pour cet élément uniquement s’il est visible à l’entrée. Sinon, le mouvement passe à travers l’élément et atteint tout élément sous-jacent ou élément parent dans l’arborescence visuel.

L’action qui consiste à déterminer si un élément est visible à l’entrée tactile, de souris ou de stylet porte le nom de test de positionnement. Plusieurs facteurs affectent le test de positionnement, mais vous pouvez déterminer si un élément donné peut déclencher des événements d’entrée en vérifiant sa propriété IsHitTestVisible. Cette propriété renvoie true uniquement si l’élément remplit les critères suivants :

  • Sa propriété Visibility a la valeur Visible.
  • Sa propriété Background ou Fill n’a pas la valeur null (Nothing en Visual Basic), ce qui entraîne une transparence et une invisibilité au test de positionnement. Pour rendre un élément transparent et disponible pour le test de positionnement, assurez-vous que la propriété pertinente a la valeur Transparent plutôt que null.
  • Si l’élément est un contrôle, sa propriété IsEnabled a la valeur true.

Des règles de test de positionnement spéciales s’appliquent à certains contrôles. Par exemple, TextBlock et les contrôles associés n’ont pas de propriété Background, mais ils peuvent quand même être soumis à des tests de positionnement dans la région entière de leur emplacement dans la disposition. Les contrôles Image et MediaElement peuvent être soumis à des tests de positionnement sur leur rectangle défini, indépendamment du contenu transparent. En outre, la plupart des classes Panel ne peuvent pas être soumises à des tests de positionnement, mais peuvent tout de même gérer les événements d’entrée routés à partir d’éléments qu’elles contiennent.

Vous pouvez déterminer les éléments qui se trouvent à la même position qu’un événement d’entrée utilisateur, même si les éléments ne peuvent pas être soumis à des tests de positionnement. Pour cela, appelez la méthode FindElementsInHostCoordinates. Comme son nom l’indique, cette méthode recherche les éléments à un emplacement relatif à un élément hôte spécifié. Néanmoins, il faut savoir que les transformations appliquées et les modifications de disposition peuvent affecter le système de coordonnées d’un élément, et par conséquent avoir un impact sur les éléments qui sont trouvés à un emplacement donné.

Personnalisez votre expérience d’application

Pour personnaliser et contrôler encore plus l’expérience d’interaction de votre application, utilisez les API de la plateforme Windows Runtime. Par exemple, vous pouvez gérer des options de configuration et des fonctionnalités matérielles supplémentaires, telles que des souris dotées d’un bouton droit, d’une roulette, d’une roulette inclinable ou de boutons X, et des stylets dotés de boutons et de pointes de gomme.

La plupart des API d’interaction se trouvent dans les espaces de noms Windows.UI.Xaml et Windows.UI.Xaml.Input, avec la fonctionnalité d’entrée manuscrite exposée par le biais de l’espace de noms Windows.UI.Input.Inking et des données de périphérique d’entrée exposées par le biais de l’espace de noms Windows.Devices.Input.

Avant de fournir des expériences d’interaction personnalisées via des manipulations ou des mouvements nouveaux ou modifiés, posez-vous les questions suivantes :

  • Un mouvement existant fournit-il l’expérience nécessaire à votre application ? Ne fournissez pas un mouvement personnalisé pour zoomer ou effectuer un mouvement panoramique quand vous pouvez simplement adapter votre application pour prendre en charge ou interpréter un mouvement existant.
  • Le mouvement personnalisé justifie-t-il une éventuelle incohérence entre les applications ?
  • Le mouvement nécessite-t-il une prise en charge matérielle spécifique, telle qu’un nombre de contacts ?
  • Existe-t-il un contrôle (tel que ScrollViewer) qui fournisse l’expérience d’interaction dont vous avez besoin ? Si un contrôle peut intrinsèquement gérer l’entrée utilisateur, une manipulation ou un mouvement personnalisé est-il nécessaire ?
  • Votre manipulation ou mouvement personnalisé entraîne-t-il une expérience d’interaction fluide et naturelle ?
  • L’expérience d’interaction fait-elle sens ? Si l’interaction repose sur des éléments tels que le nombre de contacts, la rapidité, le temps (pas recommandé) et l’inertie, assurez-vous que ces contraintes et dépendances sont cohérentes et détectables. Par exemple, la vitesse (lente ou rapide) d’interprétation des utilisateurs peut avoir une influence directe sur la fonctionnalité de votre application et la satisfaction des utilisateurs à l’égard de leur expérience.
  • La manipulation ou le mouvement sont-ils affectés par les capacités physiques de votre utilisateur ? Est-il accessible ?
  • Une commande de barre de l’application ou une autre commande d’interface utilisateur suffira-t-elle ?

En résumé, ne créez des manipulations ou mouvements personnalisés que pour répondre à des exigences claires et bien définies, notamment en l’absence de mouvements de base pouvant prendre en charge votre scénario.

Rubriques associées

Conceptuel
Développement d’applications du Windows Store (VB/C#/C++ et XAML)
Conception de l’interaction tactile

 

 

Afficher:
© 2014 Microsoft