Démarrage rapide : entrée tactile (XAML)

Applies to Windows and Windows Phone

Les apapreils possèdent souvent des écrans à interaction tactile multipoint qui permettent aux utilisateurs de se servir simultanément de plusieurs doigts en vue de produire différentes interactions d’entrée, telles que les actions d’appuyer, de faire glisser ou de pincer. Windows Runtime a différents mécanismes pour gérer les entrées tactiles, qui vous permettent de créer une expérience immersive que les utilisateurs de vos applications peuvent explorer avec confiance. Ce didacticiel de démarrage rapide couvre les connaissances de base de l’utilisation de l’entrée tactile dans une application Windows Runtime utilisant C++, C# ou Visual Basic. Pour obtenir des exemples de code supplémentaires, voir Exemple d’entrée.

Si vous débutez dans le développement d’application Windows Runtime en C++, C# ou Visual Basic:  Examinez ces rubriques pour vous familiariser avec les technologies discutées 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 Windows Runtime 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, 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 du Windows Store.

Entrée : exemple d’événements d’entrée utilisateur XAML

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

Entrée : exemple de manipulations et de mouvements (C++)

Entrée : exemple de test de positionnement tactile

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

Prérequis

Nous partons du principe que vous savez créer une application Windows Runtime de base en C++, C# ou Visual Basic.

Pour suivre ce didacticiel, vous devez :

Recommandations en matière d’expérience utilisateur (meilleures pratiques)

Les bibliothèques de contrôles de plateforme (HTML et XAML) fournissent l’intégralité de l’expérience d’interaction utilisateur, 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.

Présentation des entrées tactiles

De nombreux appareils utilisent l’entrée tactile pour une grande partie de l’entrée utilisateur. Les écrans à interaction tactile multipoint permettent aux utilisateurs d’interagir avec l’appareil de manière naturelle. En choisissant de prendre en charge les interactions et les entrées tactiles dans vos applications, vous améliorerez considérablement l’expérience utilisateur. Vous devez toutefois concevoir cette prise en charge avec soin, afin de permettre aux utilisateurs de votre application d’explorer celle-ci en toute confiance. Vous devez également vous assurer que votre application accepte les entrées classiques à la souris et au clavier, même si elle a été optimisée pour les entrées tactiles.

Il existe différentes manières de gérer l’entrée tactile dans les applications Windows Runtime en C++, C# ou Visual Basic. La bibliothèque de contrôles intégrés offre une prise en charge par défaut des entrées tactiles, à la souris et au clavier, grâce à des interactions standard, des effets physiques animés et un retour visuel.

Si vous n’avez pas besoin d’une prise en charge personnalisée des entrées tactiles, vous pouvez utiliser ce que l’infrastructure vous offre et suivre quelques recommandations simples d’optimisation, décrites plus loin dans ce guide de démarrage rapide.

Vous pouvez implémenter votre propre prise en charge des entrées tactiles et des interactions, mais gardez à l’esprit que les utilisateurs s’attendent à disposer d’une expérience intuitive leur permettant d’interagir directement avec les éléments de votre application. Prenez modèle sur la prise en charge intégrée pour concevoir votre prise en charge personnalisée des entrées tactiles en vue de développer des fonctionnalités à la fois simples et intuitives. Vous devez également offrir un retour visuel immédiat pour l’ensemble des interactions afin d’éviter l’incertitude de l’utilisateur et d’encourager l’exploration de votre application.

Pour fournir une prise en charge personnalisée des entrées tactiles, vous pouvez gérer les événements UIElement qui sont regroupés en trois niveaux d’abstraction distincts. Les événements de haut niveau tels que Tapped vous permettent de répondre à des interactions simples. Les événements de pointeur fournissent des détails de niveau inférieur, par exemple le mouvement du pointeur, ainsi que la distinction entre le mouvement qui consiste à appuyer et le mouvement qui consiste à relâcher. Les événements de manipulation fournissent des détails de niveau encore plus inférieur, par exemple la vitesse et l’inertie des mouvements, ainsi que les données d’interaction tactile multipoint. Ces événements prennent automatiquement en charge les entrées tactiles et de la souris. Toutefois, ils fournissent également des informations qui vous permettent de distinguer le périphérique d’entrée, si nécessaire.

Mouvements

Les mouvements constituent un moyen global d’interpréter les données d’entrée tactile en déplacements courants, comme les actions d’appuyer, de faire glisser et de pincer. Voici quelques-uns des mouvements classiques utilisés dans Windows 8 :

InteractionDescription
AppuyerBrève pression de l’écran avec un doigt.
Effectuer un appui prolongéPression prolongée de l’écran avec un doigt.
Faire glisserPression de l’écran avec un ou plusieurs doigts et déplacement dans une même direction.
BalayerPression de l’écran avec un ou plusieurs doigts et déplacement sur une courte distance dans une même direction.
PincerPression de l’écran avec deux doigts ou plus, puis rapprochement ou étirement des doigts.
Faire pivoterPression de l’écran avec deux doigts ou plus et mouvement en arc de cercle de haut en bas ou de bas en haut.
Étirer Pression de l’écran avec deux doigts ou plus, puis étirement des doigts.

 

Vous pouvez répondre à des mouvements simples, qu’ils soient effectués avec vos doigts ou avec la souris, en gérant des événements généraux tels que Tapped, DoubleTapped, RightTapped et Holding. Vous pouvez également désactiver ces mouvements pour des éléments spécifiques en affectant la valeur false à IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabledet IsHoldingEnabled.

Les événements de pointeur tels que PointerMoved peuvent être utilisés pour la prise en charge d’interactions simples effectuées à l’aide d’un seul doigt, comme l’action de faire glisser.

Dans le cas des interactions tactiles multipoint, telles que le pincement, et des interactions qui utilisent des données d’inertie et de vitesse, telles que le glissement, vous utilisez les événements de manipulation. Les informations fournies par les événements de manipulation ne reflètent pas l’interaction qui s’est produite, mais sont constituées de données tactiles, telles que la position, le delta de translation et la vitesse. Vous pouvez utiliser ces données tactiles pour déterminer le type d’interaction qui s’est produit. Toutefois, c’est à vous qu’il revient de convertir ces informations pour identifier l’interaction équivalente.

Utilisation des événements de pointeur

Les événements de pointeur prennent automatiquement en charge les entrées, qu’elles soient effectuées avec vos doigts ou avec la souris, et remplacent les événements de souris plus classiques.

Les événements de pointeur tactiles se limitent aux interactions effectuées à l’aide d’un seul doigt, comme l’action d’appuyer et de faire glisser. Par ailleurs, ils ne prennent pas en charge les interactions basées sur la rapidité. Les actions visant à appuyer à l’aide d’un seul doigt sur l’écran sont converties en un événement de pointeur Windows Runtime équivalent, tel que PointerPressed lorsque vous placez le doigt sur l’écran, PointerReleased lorsque vous levez le doigt et PointerMoved lorsque vous faites glisser le doigt sur l’écran. Les autres événements de pointeur qui sont utilisés par une application Windows Runtime en C++, C# ou Visual Basic sont PointerExited et PointerEntered. Les arguments d’événement des événements de pointeur sont PointerRoutedEventArgs.

L’exemple suivant montre comment utiliser les événements PointerPressed, PointerReleased et PointerExited pour gérer une interaction d’action d’appuyer sur un objet Rectangle.

Tout d’abord, un Rectangle nommé TestRectangle est créé en code XAML et des gestionnaires d’événements sont ajoutés pour les événements PointerPressed, PointerReleased et PointerExited.



<Rectangle Name="TestRectangle"
  Height="100" Width="200" Fill="Blue"
  PointerPressed="TestRectangle_PointerPressed"
  PointerReleased="TestRectangle_PointerReleased"
  PointerExited="TestRectangle_PointerExited" />

Ensuite, les gestionnaires d’événements des événements de pointeur sont créés. Le gestionnaire d’événements PointerPressed augmente les valeurs Height et Width du Rectangle. Le gestionnaire d’événements PointerReleased redéfinit les objets Height et Width à leurs valeurs de départ. Enfin, le gestionnaire d’événements PointerExited redéfinit également les objets Height et Width à leurs valeurs de départ.



private void TestRectangle_PointerPressed(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the size of the Rectangle
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

private void TestRectangle_PointerReleased(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions on the Rectangle
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

private void TestRectangle_PointerExited(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Finger moved out of Rectangle before the pointer exited event
    // Reset the dimensions on the Rectangle
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

Utilisation des événements de manipulation

Si vous souhaitez que votre application prenne en charge les interactions impliquant plusieurs doigts ou les interactions qui utilisent des données de rapidité, alors dans ce cas vous devez utiliser les événements de manipulation. Vous pouvez utiliser des événements de manipulation pour détecter des interactions telles que les actions de faire glisser, de pincer et de maintenir. Voici la liste des événements de manipulation et des types associés pour une application Windows Runtime en C++, C# ou Visual Basic.

Événement ou classeDescription
ManipulationStarting event Se produit lorsque le processeur de manipulation est créé.
ManipulationStarted event Se produit lorsqu’un périphérique d’entrée entame une manipulation sur l’objet UIElement.
ManipulationDelta event Se produit lorsque le périphérique d’entrée change de position au cours d’une manipulation.
ManipulationInertiaStarting event 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 event Se produit lorsque les opérations de manipulation et d’inertie sont terminées sur l’objet UIElement.
ManipulationStartingRoutedEventArgs Fournit des données pour l’événement ManipulationStarting.
ManipulationStartedRoutedEventArgs Fournit des données pour l’événement ManipulationStarted.
ManipulationDeltaRoutedEventArgs Fournit des données pour l’événement ManipulationDelta.
ManipulationInertiaStartingRoutedEventArgs Fournit des données pour l’événement ManipulationInertiaStarting.
ManipulationVelocities Décrit la vitesse à laquelle les manipulations se produisent.
ManipulationCompletedRoutedEventArgs Fournit des données pour l’événement ManipulationCompleted.

 

Un mouvement se compose d’une série d’événements de manipulation. Chaque mouvement débute par un événement ManipulationStarted, par exemple lorsqu’un utilisateur appuie sur l’écran. Puis, un ou plusieurs événements ManipulationDelta sont déclenchés. Par exemple, si vous appuyez sur l’écran et si vous faites glisser votre doigt sur celui-ci, un certain nombre d’événements ManipulationDelta sont déclenchés. Enfin, un événement ManipulationCompleted est déclenché lorsque l’interaction est terminée.

Remarque  Si vous ne possédez pas d’écran tactile, vous pouvez tester le code de votre événement de manipulation dans le simulateur à l’aide d’une souris et d’une interface de roulette de souris.

L’exemple suivant montre comment utiliser les événements ManipulationDelta pour gérer une interaction de glissement. L’exemple crée un Rectangle qui peut être glissé sur l’écran.

Tout d’abord, un Rectangle nommé TestRectangle est créé en code XAML avec une valeur Height et une valeur Width de 200.



<Rectangle Name="TestRectangle"
  Width="200" Height="200" Fill="Blue" 
  ManipulationMode="All"/>

Ensuite, un TranslateTransform global nommé dragTranslation est créé pour la traduction de Rectangle. Un gestionnaire d’événements est ajouté à Rectangle afin de gérer l’événement ManipulationDelta, puis dragTranslation est ajouté à l’objet RenderTransform du Rectangle. Enfin, dans le gestionnaire d’événements ManipulationDelta, la position du Rectangle est mise à jour à l’aide de l’objet TranslateTransform de la propriété Delta.



// Global Transform used to change the position of the Rectangle.
private TranslateTransform dragTranslation;

// Constructor
public MainPage()
{
    InitializeComponent();

    // Add handler for the ManipulationDelta event
    TestRectangle.ManipulationDelta += Drag_ManipulationDelta;
    dragTranslation = new TranslateTransform();
    TestRectangle.RenderTransform = this.dragTranslation;
}

void Drag_ManipulationDelta(object sender, 
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

Conception d’interface utilisateur et entrée tactile

Si vous implémentez votre propre prise en charge d’interaction, gardez à l’esprit que les utilisateurs s’attendent à disposer d’une expérience intuitive impliquant une interaction directe avec les éléments d’interface utilisateur de votre application. Nous vous recommandons de modeler vos interactions personnalisées sur les bibliothèques de contrôles de plateforme (HTML et XAML) pour des raisons de cohérence et de simplicité de détection. Les contrôles de ces bibliothèques fournissent une expérience d’interaction utilisateur complète, notamment pour les interactions standard, les effets physiques animés, le retour visuel et l’accessibilité. Ne créez des interactions personnalisées que pour répondre à des exigences claires et bien définies, notamment en l’absence d’interactions de base prenant en charge votre scénario.

La facilité d’utilisation de votre application avec des entrées tactiles est en partie liée à la conception de votre interface utilisateur. Pour optimiser les fonctionnalités tactiles de votre application, respectez les recommandations suivantes :

  • Veillez à prendre en compte la différence de taille entre les pointeurs de souris et le bout des doigts. Le mode tactile nécessite des éléments d’interface utilisateur plus grands pour favoriser la précision et éviter que les doigts ne cachent des informations importantes.
  • Prévoyez toujours un retour visuel immédiat et direct pour les interactions tactiles. Par exemple, vous pouvez utiliser la mise en surbrillance ou des info-bulles pour mettre en évidence la cible tactile active et empêcher l’activation accidentelle d’autres cibles.
  • Utilisez des effets physiques, tels que l’accélération et l’inertie, pour que les interactions (par exemple, le défilement) paraissent naturelles.
  • Utilisez des points d’ancrage et d’autres contraintes pour guider les utilisateurs vers les états les plus utiles.

Pour plus d’informations sur les recommandations en matière d’expérience utilisateur liées aux entrées tactiles, voir Recommandations en matière d’interaction utilisateur.

Événements routés

Tous les événements de pointeur, événements de mouvement et événements de manipulation mentionnés ici sont implémentés en tant qu’événements routés. Cela signifie que l’événement peut éventuellement être géré par des objets autres que celui qui a initialement déclenché l’événement. Des parents successifs dans une arborescence d’objets, tels que les conteneurs parents d’un élément d’interface utilisateur ou l’élément Page racine, peuvent choisir de gérer ces événements même si l’élément d’origine ne le fait pas. À l’inverse, tout objet qui gère l’événement peut marquer l’événement géré afin qu’il n’accède plus à aucun élément parent. Pour plus d’informations sur le concept des événements routés et sur la façon dont il affecte votre manière d’écrire des gestionnaires pour les événements routés, voir Vue d’ensemble des événements et des événements routés.

Rubriques associées

Développeurs
Réponse à l’interaction utilisateur
Développement d’applications Windows Runtime (XAML)
Démarrage rapide : entrée tactile
Concepteurs
Conception de l’interaction tactile

 

 

Afficher:
© 2014 Microsoft