Guide du développeur sur les interactions tactiles

Concevez votre application en partant du principe que les utilisateurs utiliseront principalement l’interaction tactile comme méthode d’entrée. Si vous utilisez des contrôles WinUI, la prise en charge du pavé tactile, de la souris et du stylet ne nécessite aucune programmation supplémentaire, car les applications WinUI le fournissent gratuitement.

Toutefois, il faut garder à l’esprit qu’une interface utilisateur optimisée pour l’interaction tactile n’est pas toujours supérieure à une interface utilisateur traditionnelle. Toutes deux présentent des avantages et des inconvénients propres à une technologie et à une application. Pour passer à une interface utilisateur conçue pour l’interaction tactile, il est important de comprendre les différences fondamentales entre l’interaction tactile, le pavé tactile, le stylo/stylet, la souris et l’entrée au clavier.

API importantes : Microsoft.UI.Xaml.Input, Windows.UI.Core, Windows.Devices.Input

De nombreux appareils ont des écrans multipoint qui prennent en charge l’utilisation d’un ou plusieurs doigts (ou contacts tactiles) comme moyen d’entrée. Les contacts tactiles et leur mouvement sont interprétés comme des gestes tactiles et des manipulations pour prendre en charge différentes interactions utilisateur.

Le Windows app comprend plusieurs mécanismes différents pour gérer les entrées tactiles, ce qui vous permet de créer une expérience immersive que vos utilisateurs peuvent explorer en toute confiance. Ici, nous abordons les principes fondamentaux de l’utilisation d’une entrée tactile dans un Windows app.

Les interactions tactiles nécessitent trois éléments :

  • Un écran tactile.
  • Le contact direct (ou proximité, si l’écran est doté de capteurs de proximité et prend en charge la détection du pointeur) d’un ou plusieurs doigts sur cet écran.
  • Mouvement des contacts tactiles (ou absence de ces derniers, en fonction d’un seuil de temps).

Les données d’entrée fournies par le capteur tactile peuvent être :

  • Interprétées comme un geste physique pour la manipulation directe d’un ou plusieurs éléments de l’interface utilisateur, tels que le mouvement panoramique, la rotation, le redimensionnement ou le déplacement. (En revanche, l’interaction avec un élément par le biais de son properties window, de sa boîte de dialogue ou d’une autre affordance d’interface utilisateur est considérée comme une manipulation indirecte.)
  • Reconnues comme une méthode d’entrée alternative, telle que la souris ou le stylet.
  • Utilisées pour compléter ou modifier des aspects d’autres méthodes d’entrée, comme estomper un trait d’encre dessiné au stylo.

L’entrée tactile implique généralement la manipulation directe d’un élément sur l’écran. L’élément répond immédiatement à tout contact tactile à l’intérieur de sa zone de test et réagit de manière appropriée à tout mouvement ultérieur des contacts tactiles, y compris la suppression.

Les interactions et les gestes tactiles personnalisés doivent être conçus avec soin. Ils doivent être intuitifs, réactifs et reconnaissables, et ils doivent permettre aux utilisateurs d’explorer votre application en toute confiance.

Assurez-vous que les fonctionnalités de l’application sont déployées de manière cohérente sur tous les types d’appareils d’entrée pris en charge. Si nécessaire, utilisez un mode d’entrée indirect, comme l’entrée de texte pour les interactions de clavier ou les affordances de l’interface utilisateur pour la souris et le stylet.

N’oubliez pas que de nombreux utilisateurs connaissent et apprécient les périphériques d’entrée traditionnels (comme la souris et le clavier). Ils offrent une rapidité, une précision et un retour d’information tactile que le toucher ne peut pas offrir.

En offrant des expériences d’interaction uniques et distinctives pour tous les périphériques d’entrée, vous pourrez couvrir un large éventail de capacités et de préférences, séduire un public extrêmement varié et attirer davantage de clients vers votre application.

Comparaison des exigences en matière d’interaction tactile

Le tableau suivant présente certaines des différences entre les périphériques d’entrée à prendre en compte lors de la conception d’applications Windows optimisées pour les écrans tactiles.

Facteur Interactions tactiles Interactions avec la souris, le clavier, le stylo/stylet Touchpad
Précision La surface de contact du doigt est plus grande qu’une simple coordonnée x-y, ce qui augmente les risques d’activation involontaire de commandes. La souris et le stylo/stylet fournissent des coordonnées x-y précises. Identique à la souris.
La forme de la zone de contact change tout au long du mouvement. Les mouvements de la souris et les traits de stylo/stylet fournissent des coordonnées x-y précises. Le focus clavier est explicite. Identique à la souris.
Aucun curseur de souris n’est là pour faciliter la sélection de la cible. Le curseur de la souris, le curseur du stylo/stylet et le focus clavier vous aident tous à sélectionner la cible. Identique à la souris.
Anatomie humaine Les mouvements du doigt sont imprécis, car il est difficile d’effectuer un mouvement en ligne droite avec un ou plusieurs doigts. Cela tient à la courbure des articulations de la main et au nombre d’articulations impliquées dans le mouvement. Il est plus facile d’effectuer un mouvement en ligne droite avec la souris ou le stylo/stylet, car la main qui les contrôle parcourt une distance physique plus courte que le curseur à l’écran. Identique à la souris.
Certaines zones sur l'surface tactile d'un appareil d'affichage peuvent être difficiles à atteindre en raison de la posture du doigt et de la poignée de l'utilisateur sur l'appareil. La souris et le stylo/stylet peuvent atteindre toutes les parties de l’écran, tandis que le clavier doit permettre d’accéder à toutes les commandes par l’ordre de tabulation. La position du doigt et la prise en main peuvent s’avérer problématiques.
Les objets peuvent être masqués par un ou plusieurs doigts ou par la main de l’utilisateur. C’est ce que l’on appelle l’occlusion. Les périphériques d’entrée indirects ne provoquent pas d’occlusion. Identique à la souris.
État de l’objet Touch utilise un modèle à deux états : la surface tactile d’un dispositif d’affichage est tactile (activé) ou non (désactivé). Il n’existe aucun état de pointage capable de déclencher d’autres réponses visuelles. Une souris, un stylo/stylet et un clavier exposent un modèle à trois états : haut (off), bas (on) et pointage (focus).
Le survol permet aux utilisateurs d’explorer et d’apprendre par le biais d’info-bulles associées à des éléments de l’interface utilisateur. Les effets de pointage et de focus peuvent indiquer quels objets sont interactifs et aider à sélectionner la cible.		 Identique à la souris.
Interactions riches Prend en charge plusieurs touches tactiles : plusieurs points d’entrée (doigts de main) sur une surface tactile. Compatible avec un point d’entrée unique. Identique au tactile.
Prend en charge la manipulation directe d’objets à travers des gestes comme appuyer, traîner, faire glisser, pincer et faire tourner. Pas de prise en charge de la manipulation directe, car la souris, le stylo/stylet et le clavier sont des périphériques d’entrée indirects. Identique à la souris.

Note

L’entrée indirecte a bénéficié de plus de 25 ans de perfectionnement. Des fonctionnalités telles que les infobulles déclenchées par le survol ont été conçues pour résoudre l'exploration de l'UI spécifiquement pour les entrées via le pavé tactile, la souris, le stylo/stylet et le clavier. Les fonctionnalités de l’interface utilisateur de ce type ont été repensées en fonction de la richesse de l’expérience offerte par l’entrée tactile, sans compromettre l’expérience de l’utilisateur pour ces autres périphériques.

Utilisation de la rétroaction tactile

Une rétroaction visuelle appropriée pendant les interactions avec votre application aide les utilisateurs à reconnaître, à apprendre et à s’adapter à la façon dont leurs interactions sont interprétées à la fois par l’application et par la plateforme Windows. La rétroaction visuelle peut indiquer des interactions réussies, informer sur l’état du système, améliorer le sentiment de contrôle, réduire les erreurs, aider les utilisateurs à comprendre le système et le périphérique d’entrée, et favoriser l’interaction.

La rétroaction visuelle est essentielle lorsque l’utilisateur emploie l’entrée tactile pour des activités qui nécessitent de l’exactitude et de la précision en fonction de la localisation. Affichez une rétroaction chaque fois qu’une entrée tactile est détectée, afin d’aider l’utilisateur à comprendre les règles de ciblage personnalisées définies par votre application et ses contrôles.

Targeting

Le ciblage est optimisé par les moyens suivants :

  • Tailles des cibles tactiles

    Des instructions claires en matière de taille garantissent que les applications offrent une interface utilisateur confortable contenant des objets et des contrôles faciles et sûrs à cibler.

  • Géométrie de contact

    La totalité de la zone de contact du doigt détermine l’objet cible le plus probable.

  • Épurage

    On peut facilement cibler à nouveau les éléments d’un groupe en faisant glisser le doigt entre eux (par exemple, les boutons de sélection). L'élément actif est activé lorsque le toucher est relâché.

  • Balancement

    Les éléments à forte densité (par exemple, les liens hypertextes) sont facilement reciblés en appuyant avec le doigt et, sans glisser, en le faisant osciller d’avant en arrière sur les éléments. En raison de l’occlusion, l’élément actuel est identifié grâce à une info-bulle ou la barre d’état et s'active lorsque le toucher est relâché.

Précision

Conception pour des interactions approximatives en utilisant :

  • Des points d’ancrage qui facilitent l’arrêt aux endroits souhaités lorsque les utilisateurs interagissent avec le contenu.
  • Des « rails » directionnels qui peuvent faciliter les mouvements panoramiques verticaux ou horizontaux, même lorsque la main se déplace en décrivant un léger arc de cercle. Pour plus d’informations, consultez Recommandations pour les panoramiques.

Occlusion

L'occlusion des doigts et de la main est évitée par les méthodes suivantes :

  • Taille et positionnement de l’interface utilisateur

    Les éléments de l’interface utilisateur doivent être suffisamment grands pour ne pas être complètement recouverts par une zone de contact du doigt.

    Dans la mesure du possible, positionnez les menus et les fenêtres contextuelles au-dessus de la zone de contact.

  • Info-bulles

    Afficher les info-bulles lorsqu’un utilisateur maintient le doigt sur un objet. Cela est utile pour décrire la fonctionnalité de l’objet. L’utilisateur peut faire glisser le doigt hors de l’objet pour éviter de faire apparaître l’info-bulle.

    Pour les petits objets, décalez les info-bulles de manière à ce qu'elles ne soient pas couvertes par la zone de contact du bout du doigt. Cela peut s’avérer utile pour le ciblage.

  • Des poignées pour la précision

    Lorsqu’un certain degré de précision est requis (par exemple, pour la sélection d’un texte), les poignées de sélection sont décalées pour améliorer la précision. Pour plus d’informations, consultez Guidelines pour sélectionner du texte et des images (applications Windows Runtime).

Calendrier

Éviter les changements de mode chronométrés au profit d’une manipulation directe. Cette dernière simule la gestion physique directe en temps réel d’un objet. L’objet répond au déplacement des doigts.

En revanche, une interaction chronométrée se produit après une interaction tactile. Les interactions chronométrées dépendent généralement de seuils invisibles tels que le temps, la distance ou la vitesse pour déterminer quelle commande exécuter. Les interactions chronométrées ne présentent aucune rétroaction visuelle tant que le système n’effectue pas l’action.

La manipulation directe offre un certain nombre d’avantages par rapport aux interactions chronométrées :

  • La rétroaction visuelle instantanée pendant les interactions favorise l’implication, la confiance et un sentiment de contrôle des utilisateurs.
  • Les manipulations directes rendent l’exploration d’un système plus sûre car elles sont réversibles : les utilisateurs peuvent facilement revenir sur leurs actions de manière logique et intuitive.
  • Les interactions qui affectent directement les objets et imitent les interactions du monde réel sont plus intuitives, plus faciles à découvrir et plus mémorables. Elles ne s’appuient pas sur des interactions obscures ou abstraites.
  • Les interactions chronométrées peuvent être difficiles à effectuer, car les utilisateurs doivent atteindre des seuils arbitraires et invisibles.

De plus, appliquez consciencieusement les recommandations suivantes :

  • Les manipulations ne doivent pas être différenciées par le nombre de doigts utilisés.
  • Les interactions doivent prendre en charge les manipulations composées. Par exemple, pincez pour zoomer tout en faisant glisser les doigts pour effectuer une panoramique.
  • Les interactions ne doivent pas être différenciées par le temps. La même interaction doit avoir le même résultat, quel que soit le temps nécessaire pour l’effectuer. Les activations basées sur le temps introduisent des délais obligatoires pour les utilisateurs et nuisent à la fois à la nature immersive de la manipulation directe et à la perception de la réactivité du système.

    Note

    L’exception à ce principe est l’utilisation d’interactions chronométrées spécifiques pour faciliter l’apprentissage et l’exploration (par exemple, appuyer et maintenir).

  • Les descriptions appropriées et les indications visuelles ont un effet important sur l’utilisation des interactions avancées.

Affichages d’application

Optimisez l’expérience d’interaction de l’utilisateur grâce aux paramètres de panoramique ou de défilement et de zoom des vues de votre application. La vue d’une application détermine la manière dont un utilisateur accède à votre application et à son contenu et les manipule. Les vues fournissent également des comportements tels que l’inertie, le rebond des limites de contenu et les points d’ancrage.

Les paramètres de panoramique et de défilement du contrôle ScrollViewer déterminent la manière dont les utilisateurs naviguent dans une vue unique, lorsque le contenu de la vue ne tient pas dans la fenêtre d’affichage. Une vue unique peut, par exemple, être une page d’un magazine ou d’un livre, la structure de dossiers d’un ordinateur, une bibliothèque de documents ou un album photo.

Les paramètres de zoom s’appliquent à la fois au zoom optique (pris en charge par le contrôle ScrollViewer) et au contrôle Zoom sémantique. Le zoom sémantique est une technique optimisée pour les écrans tactiles qui permet de présenter et de naviguer dans de grands ensembles de données ou de contenus associés au sein d’une vue unique. Il utilise deux modes de classification distincts, ou niveaux de zoom. Il s’agit d’une technique analogue au mouvement panoramique et au défilement au sein d’une même vue. Le mouvement panoramique et le défilement peuvent être utilisés conjointement avec le zoom sémantique.

Utilisez des vues et des événements de l'application pour modifier les comportements du panoramique, du défilement et du zoom. On peut ainsi obtenir une expérience d’interaction plus fluide qu’avec la gestion des événements liés au pointeur et aux gestes.

Pour plus d’informations sur les vues d’application, consultez Contrôles, dispositions et texte.

Interactions tactiles personnalisées

Si vous implémentez votre propre système d’interaction, n’oubliez pas que les utilisateurs s’attendent à une expérience intuitive impliquant une interaction directe avec les éléments de l’interface utilisateur de votre application. Nous vous recommandons de modéliser vos interactions personnalisées sur les bibliothèques de contrôle de la plateforme afin de maintenir la cohérence et la détection. Les contrôles de ces bibliothèques offrent une expérience d’interaction utilisateur complète, y compris les interactions standard, les effets physiques animés, les rétroactions visuelles et l’accessibilité. Créez des interactions personnalisées uniquement s’il existe un besoin clair et bien défini et si les interactions de base ne sont pas adaptées à votre scénario.

Important

Windows 11 et versions ultérieures

Certaines interactions tactiles à trois ou quatre doigts ne fonctionneront plus par défaut dans certaines applications Windows.

Le système utilise désormais par défaut les interactions tactiles à trois ou quatre doigts pour des opérations comme le basculement ou la réduction d’une fenêtre, ou encore les changements apportés aux bureaux virtuels. Ces interactions étant désormais gérées au niveau du système, le fonctionnement de votre application pourrait être affecté par ce changement.

Pour prendre en charge les interactions à trois ou quatre doigts dans une application, un nouveau paramètre utilisateur a été introduit qui spécifie si le système gère ou non ces interactions :

Bluetooth & périphériques > Fonction tactile > « Mouvements tactiles à trois et quatre doigts »

Lorsqu’il est réglé sur « Activé » (par défaut), le système gère toutes les interactions à trois et quatre doigts (les applications ne peuvent pas les prendre en charge).

Lorsqu’il est réglé sur « Désactivé », les interactions à trois et quatre doigts peuvent être prises en charge par les applications (elles ne seront pas gérées par le système).

Si votre application doit prendre en charge ces interactions, nous vous recommandons d’informer les utilisateurs de ce paramètre et de fournir un lien qui lance les paramètres Windows vers la page appropriée (ms-settings :devices-touch). Pour plus d’informations, consultez Lancer les paramètres Windows.

Pour fournir un support tactile personnalisé, vous pouvez gérer plusieurs événements UIElement. Ces événements sont regroupés en trois niveaux d’abstraction.

  • Les événements de gestes statiques sont déclenchés une fois qu’une interaction est terminée. Les événements de gestes incluent Tapped, DoubleTapped, RightTapped et Holding.

    Vous pouvez désactiver les événements de gestes sur des éléments spécifiques en définissant IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled et IsHoldingEnabled sur false.

  • Les événements de pointeur comme PointerPressed et PointerMoved fournissent des détails de bas niveau pour chaque contact tactile, y compris le mouvement du pointeur et la possibilité de distinguer les événements de pression et de relâchement.

    Un pointeur est un type d’entrée générique avec un mécanisme d’événement unifié. Il présente des informations de base, notamment la position de l’écran, dans la source d’entrée active, qui peut être tactile, pavé tactile, souris ou stylet.

  • Les événements de mouvement de manipulation, tels que ManipulationStarted, indiquent une interaction continue. Ils commencent à se déclencher lorsque l’utilisateur touche un élément et se poursuivent jusqu’à ce que l’utilisateur lève le(s) doigt(s) ou que la manipulation soit annulée.

    Les événements de manipulation incluent des interactions tactiles multipoint comme le zoom, le mouvement panoramique ou la rotation, et des interactions qui utilisent des données d’inertie et de vitesse, comme le glissement. Les informations fournies par les événements de manipulation n’identifient pas la forme de l’interaction effectuée, mais incluent des données telles que la position, le delta de translation et la vitesse. Vous pouvez utiliser ces données de la fonction tactile pour déterminer le type d’interaction qu’il faut effectuer.

Voici l’ensemble de base des mouvements tactiles pris en charge par WinUI.

Nom Type Descriptif
Recommandations Gestes statiques Un doigt touche l’écran et se relève.
Appuyer de manière prolongée Gestes statiques Un doigt touche l’écran et reste immobile.
Diapositive Geste de manipulation Un ou plusieurs doigts touchent l’écran et se déplacent dans la même direction.
Glisser Geste de manipulation Un ou plusieurs doigts touchent l’écran et se déplacent sur une courte distance dans la même direction.
Tourner Geste de manipulation Deux doigts ou plus touchent l’écran et se déplacent dans le sens horaire ou antihoraire en décrivant un cercle.
Pincer Geste de manipulation Deux doigts ou plus touchent l’écran en se rapprochant.
Étirement Geste de manipulation Deux doigts ou plus touchent l'écran et se déplacent vers l'extérieur.

Événements de gestes

Pour plus d’informations sur les contrôles individuels, consultez Liste de contrôles.

Événements de pointeur

Les événements de pointeur sont déclenchés par diverses sources d’entrée actives, notamment la fonction tactile, le pavé tactile, le stylet et la souris (ils remplacent les événements de souris traditionnels).)

Les événements de pointeur sont basés sur un point d’entrée unique (doigt, pointe du stylet, curseur de la souris) et ne prennent pas en charge les interactions basées sur la vitesse.

Voici une liste d’événements de pointeur et de leur argument d’événement associé.

Événement ou classe Descriptif
PointerPressed Se produit lorsqu’un seul doigt touche l’écran.
RelâchementDuPointeur Se produit lorsque ce même contact tactile est levé.
DéplacementDuPointeur Se produit lorsque le pointeur est déplacé sur l’écran.
Pointeur entré Se produit lorsqu’un pointeur entre dans la zone de test de collision d’un élément.
PointerExited Se produit lorsqu’un pointeur sort de la zone de test de contact d’un élément.
PointeurAnnulé Se produit lorsqu’un contact tactile est perdu de manière anormale.
PerteDeCaptureDuPointeur Se produit lorsqu’un autre élément effectue une capture de pointeur.
PointerWheelChanged Se produit lorsque la valeur delta de la roulette d’une souris change et lorsqu’un mouvement de pincement est effectué sur le pavé tactile.
PointerRoutedEventArgs Fournit des données pour tous les événements de pointeur.

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

Tout d’abord, il faut créer un Rectangle appelé touchRectangle en langage XAML (Extensible Application Markup Language).

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
           Height="100" Width="200" Fill="Blue" />
</Grid>

Ensuite, il faut spécifier les écouteurs pour les événements PointerPressed, PointerReleased et PointerExited.

MainPage::MainPage()
{
    InitializeComponent();

    // Pointer event listeners.
    touchRectangle->PointerPressed += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerPressed);
    touchRectangle->PointerReleased += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerReleased);
    touchRectangle->PointerExited += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerExited);
}

public MainPage()
{
    this.InitializeComponent();

    // Pointer event listeners.
    touchRectangle.PointerPressed += touchRectangle_PointerPressed;
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.PointerExited += touchRectangle_PointerExited;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Pointer event listeners.
    AddHandler touchRectangle.PointerPressed, AddressOf touchRectangle_PointerPressed
    AddHandler touchRectangle.PointerReleased, AddressOf Me.touchRectangle_PointerReleased
    AddHandler touchRectangle.PointerExited, AddressOf touchRectangle_PointerExited

End Sub

Enfin, le gestionnaire de l’événement PointerPressed augmente la Hauteur et la Largeur du Rectangle, tandis que les gestionnaires des événements PointerReleased et PointerExited définissent la Hauteur et la Largeur sur leurs valeurs d’origine.

// Handler for pointer exited event.
void MainPage::touchRectangle_PointerExited(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer released event.
void MainPage::touchRectangle_PointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer pressed event.
void MainPage::touchRectangle_PointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Change the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 250;
        rect->Height = 150;
    }
}

// Handler for pointer exited event.
private void touchRectangle_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
// Handler for pointer released event.
private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

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

// Handler for pointer pressed event.
private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

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

' Handler for pointer exited event.
Private Sub touchRectangle_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Pointer moved outside Rectangle hit test area.
    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer released event.
Private Sub touchRectangle_PointerReleased(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer pressed event.
Private Sub touchRectangle_PointerPressed(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Change the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If
End Sub

Événements de manipulation

Utilisez les événements de manipulation dans votre application si vous devez prendre en charge des interactions avec plusieurs doigts ou des interactions nécessitant des données de vitesse.

Vous pouvez utiliser des événements de manipulation pour détecter des interactions telles que le glissement, le zoom et le maintien.

Note

Le pavé tactile ne déclenche pas d’événements de manipulation. Au lieu de cela, les événements de pointeur sont déclenchés pour l’entrée du pavé tactile.

Voici une liste d’événements de manipulation et des arguments d’événements associés.

Événement ou classe Descriptif
Événement ManipulationStarting Se produit lorsque le processeur de manipulation est créé pour la première fois.
Événement ManipulationStarted Se produit lorsqu’un périphérique d’entrée commence une manipulation sur uiElement.
Événement ManipulationDelta Se produit lorsque le périphérique d’entrée change de position pendant une manipulation.
Événement de lancement d'inertie de manipulation Se produit lorsque le périphérique d’entrée perd le contact avec l’objet UIElement pendant une manipulation et l’inertie commence.
Événement ManipulationCompleted Se produit lorsqu’une manipulation et une inertie sur UIElement sont terminées.
ManipulationStartingRoutedEventArgs Fournit des données pour l’événement ManipulationStarting.
ArgumentsRoutésDeDébutDeManipulation 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.
VitessesDeManipulation Décrit la vitesse à laquelle les manipulations se produisent.
ManipulationCompletedRoutedEventArgs Fournit des données pour l’événement ManipulationCompleted.

Un geste se compose d’une série d’événements de manipulation. Chaque geste commence par un événement ManipulationStarted, par exemple lorsqu’un utilisateur touche l’écran.

Ensuite, un ou plusieurs événements ManipulationDelta sont déclenchés. Par exemple, si vous touchez l’écran, puis faites glisser votre doigt sur ce dernier. Enfin, un événement ManipulationCompleted est déclenché une fois l’interaction terminée.

Note

Si vous n’avez pas de moniteur tactile, vous pouvez tester votre code d’événement de manipulation dans le simulateur à l’aide d’une interface de souris et de roulette de souris.

L’exemple suivant montre comment utiliser les événements ManipulationDelta pour contrôler une interaction de diapositive sur un Rectangle et la déplacer sur l’écran.

Tout d’abord, il faut créer un Rectangle appelé touchRectangle en langage XAML avec une Hauteur et une Largeur d’une valeur de 200.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
               Width="200" Height="200" Fill="Blue" 
               ManipulationMode="All"/>
</Grid>

Ensuite, il faut créer une propriété TranslateTransform globale appelée dragTranslation pour convertir le Rectangle. Un écouteur d'événement ManipulationDelta est spécifié sur Rectangle et dragTranslation est ajouté au RenderTransform de Rectangle.

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
Windows::UI::Xaml::Media::TranslateTransform^ dragTranslation;

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
private TranslateTransform dragTranslation;

' Global translation transform used for changing the position of 
' the Rectangle based on input data from the touch contact.
Private dragTranslation As TranslateTransform

MainPage::MainPage()
{
    InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle->ManipulationDelta += 
        ref new ManipulationDeltaEventHandler(
            this, 
            &MainPage::touchRectangle_ManipulationDelta);
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = ref new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle->RenderTransform = dragTranslation;
}

public MainPage()
{
    this.InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = this.dragTranslation;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Listener for the ManipulationDelta event.
    AddHandler touchRectangle.ManipulationDelta,
        AddressOf testRectangle_ManipulationDelta
    ' New translation transform populated in 
    ' the ManipulationDelta handler.
    dragTranslation = New TranslateTransform()
    ' Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = dragTranslation

End Sub

Enfin, dans le gestionnaire de l’événement ManipulationDelta, la position du Rectangle est mise à jour à l’aide de la propriété TranslateTransform dans la propriété Delta.

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void MainPage::touchRectangle_ManipulationDelta(Object^ sender,
    ManipulationDeltaRoutedEventArgs^ e)
{
    // Move the rectangle.
    dragTranslation->X += e->Delta.Translation.X;
    dragTranslation->Y += e->Delta.Translation.Y;
    
}

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void touchRectangle_ManipulationDelta(object sender,
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

' Handler for the ManipulationDelta event.
' ManipulationDelta data Is loaded into the
' translation transform And applied to the Rectangle.
Private Sub testRectangle_ManipulationDelta(
    sender As Object,
    e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

Événements routés

Tous les événements de pointeur, les événements de gestes et les é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 potentiellement être géré par d’autres objets que celui qui a déclenché l’événement à l’origine. Les parents successifs dans une arborescence d’objets, tels que les conteneurs parents d’un UIElement ou la Page racine de votre application, peuvent choisir de gérer ces événements même si l’élément d’origine ne le fait pas. Inversement, tout objet qui gère l’événement peut le marquer comme géré de sorte qu’il n’atteigne plus aucun élément parent. Pour en savoir plus sur le concept d’événement routé et sur la manière dont il affecte votre façon d’écrire des gestionnaires d’événements routés, consultez Vue d’ensemble des événements et des événements routés.

Important

Si vous devez gérer des événements de pointeur pour un UIElement dans une vue à défilement (comme ScrollViewer ou ListView), vous devez explicitement désactiver la prise en charge des événements de manipulation sur l’élément dans la vue en appelant UIElement.CancelDirectmanipulation(). Pour réactiver les événements de manipulation dans la vue, appelez UIElement.TryStartDirectManipulation().

Pratiques conseillées et déconseillées

  • Créez des applications avec l’interaction tactile comme méthode d’entrée principale attendue.
  • Fournissez des rétroactions visuelles pour les interactions de tous les types (tactile, stylo, stylet, souris, etc.)
  • Optimisez le ciblage en ajustant la taille de la cible tactile, la géométrie du contact, le balayage et l’oscillation.
  • Optimisez la précision au moyen de points d’ancrage et de « rails » directionnels.
  • Fournissez des info-bulles et des poignées pour améliorer la précision tactile pour les éléments d’interface utilisateur très compacts.
  • N’utilisez pas d’interactions chronométrées dans la mesure du possible (exemple d’utilisation appropriée : toucher et maintenir).
  • N’utilisez pas le nombre de doigts utilisés pour distinguer la manipulation, dans la mesure du possible.

Samples

  • Exemple de saisie de base
  • exemple d’entrée à faible latence
  • Exemple de mode d’interaction utilisateur
  • exemple de visuels Focus

Exemples d’archives

  • Last updated on