Instructions pour les diapositives croisées

API importantes

• Glissement croisé
• CrossSlideThresholds
• Windows.UI.Input

Utilisez la diapositive croisée pour prendre en charge la sélection avec le mouvement de balayage et les interactions glisser (déplacer) avec le mouvement de diapositive.

Dos et don’ts

• Utilisez la diapositive croisée pour les listes ou les collections qui défilent dans une direction unique.
• Utilisez la diapositive croisée pour la sélection d’éléments lorsque l’interaction du tap est utilisée à un autre usage.
• N’utilisez pas de diapositive croisée pour ajouter des éléments à une file d’attente.

Conseils supplémentaires sur l’utilisation

La sélection et le glissement ne sont possibles que dans une zone de contenu qui est panoramique dans une direction (verticale ou horizontale). Pour que l’une ou l’autre interaction fonctionne, une direction panoramique doit être verrouillée et le mouvement doit être effectué dans la direction perpendiculaire à la direction panoramique.

Ici, nous montrons la sélection et le glissement d’un objet à l’aide d’une diapositive croisée. L’image à gauche montre comment un élément est sélectionné si un mouvement de balayage ne dépasse pas un seuil de distance avant que le contact soit levé et que l’objet soit libéré. L’image à droite montre un mouvement glissant qui dépasse un seuil de distance et entraîne le glissement de l’objet.

Les distances de seuil utilisées par l’interaction entre diapositives sont indiquées dans le diagramme suivant.

Pour conserver la fonctionnalité de panoramique, un petit seuil de 2,7mm (environ 10 pixels à la résolution cible) doit être franchi avant l’activation d’une interaction de sélection ou de glisser. Ce petit seuil aide le système à différencier le glissement croisé du mouvement panoramique, et permet également de s’assurer qu’un mouvement d’appui se distingue à la fois du glissement croisé et du panoramique.

Cette image montre comment un utilisateur touche un élément dans l’interface utilisateur, mais déplace légèrement son doigt vers le bas au contact. Sans seuil, l’interaction serait interprétée comme une diapositive croisée en raison du mouvement vertical initial. Avec le seuil, le mouvement est interprété correctement comme un panoramique horizontal.

Voici quelques instructions à prendre en compte lors de l’inclusion de fonctionnalités entre diapositives dans votre application.

Utilisez la diapositive croisée pour les listes ou les collections qui défilent dans une direction unique. Pour plus d’informations, consultez Ajout de contrôles ListView.

Remarque Dans les cas où la zone de contenu peut être en panne dans deux directions, telles que les navigateurs web ou les lecteurs électroniques, l’interaction de presse et de conservation doit être utilisée pour appeler le menu contextuel pour les objets tels que les images et les liens hypertexte.

Liste à deux dimensions panoramique horizontalement. Faites glisser verticalement pour sélectionner ou déplacer un élément.

Mouvement panoramique vertical d’une liste unidimensionnelle. Faites glisser horizontalement pour sélectionner ou déplacer un élément.

Sélection

La sélection est le marquage, sans lancer ou activer, d’un ou plusieurs objets. Cette action est analogue à un clic unique de la souris, ou à la touche Maj et au clic de la souris, sur un ou plusieurs objets.

La sélection de diapositives croisées est obtenue en touchant un élément et en la libérant après une courte interaction de glissement. Cette méthode de sélection dispense à la fois le mode de sélection dédié et l’interaction chronométrée de presse et de conservation requise par d’autres interfaces tactiles et n’entre pas en conflit avec l’interaction du robinet pour l’activation.

En plus du seuil de distance, la sélection de diapositives croisées est limitée à une zone de seuil de 90°, comme illustré dans le diagramme suivant. Si l’objet est déplacé en dehors de cette zone, il n’est pas sélectionné.

L’interaction entre diapositives est complétée par une interaction chronométrée de presse et de conservation, également appelée interaction « auto-révélatrice ». Cette interaction supplémentaire active une animation qui indique quelle action peut être effectuée sur l’objet. Pour plus d’informations sur l’interface utilisateur de désambiguation, consultez Recommandations pour les commentaires visuels.

Les captures d’écran suivantes montrent comment fonctionne l’animation auto-révélatrice.

1. Appuyez longuement pour lancer l’animation pour l’interaction auto-révélatrice. L’état sélectionné de l’élément affecte ce qui est révélé par l’animation : coche si non sélectionnée et aucune coche si elle est sélectionnée.

   

2. Sélectionnez l’élément à l’aide du mouvement de balayage (haut ou bas).

   

3. L’élément est maintenant sélectionné. Remplacez le comportement de sélection à l’aide du mouvement de diapositive pour déplacer l’élément.

   

Utilisez un appui unique pour la sélection dans les applications où il s’agit de la seule action principale. L’animation auto-révélatrice de diapositives croisées s’affiche pour lever l’ambiguïté de cette fonctionnalité de l’interaction d’appui standard pour l’activation et la navigation.

Panier de sélection

Le panier de sélection est une représentation visuellement distincte et dynamique des éléments qui ont été sélectionnés dans la liste principale ou la collection dans l’application. Cette fonctionnalité est utile pour le suivi des éléments sélectionnés et doit être utilisée par les applications où :

• Les éléments peuvent être sélectionnés à partir de plusieurs emplacements.
• De nombreux éléments peuvent être sélectionnés.
• Une action ou une commande s’appuie sur la liste de sélection.

Le contenu du panier de sélection persiste entre les actions et les commandes. Par exemple, si vous sélectionnez une série de photographies à partir d’une galerie, appliquez une correction de couleur à chaque photographie et partagez les photographies de manière quelconque, les éléments restent sélectionnés.

Si aucun panier de sélection n’est utilisé dans une application, la sélection actuelle doit être effacée après une action ou une commande. Par exemple, si vous sélectionnez une chanson dans une liste de lecture et évaluez-la, la sélection doit être effacée.

La sélection actuelle doit également être effacée lorsqu’aucun panier de sélection n’est utilisé et qu’un autre élément de la liste ou de la collection est activé. Par exemple, si vous sélectionnez un message de boîte de réception, le volet d’aperçu est mis à jour. Ensuite, si vous sélectionnez un deuxième message de boîte de réception, la sélection du message précédent est annulée et le volet d’aperçu est mis à jour.

Files d’attente

Une file d’attente n’est pas équivalente à la liste de paniers de sélection et ne doit pas être traitée comme telle. Les principales distinctions sont les suivantes :

• La liste des éléments dans le panier de sélection n’est qu’une représentation visuelle ; les éléments d’une file d’attente sont assemblés avec une action spécifique à l’esprit.
• Les éléments ne peuvent être représentés qu’une seule fois dans le panier de sélection, mais plusieurs fois dans une file d’attente.
• L’ordre des éléments dans le panier de sélection représente l’ordre de sélection. L’ordre des éléments d’une file d’attente est directement lié aux fonctionnalités.

Pour ces raisons, l’interaction de sélection entre diapositives ne doit pas être utilisée pour ajouter des éléments à une file d’attente. Au lieu de cela, les éléments doivent être ajoutés à une file d’attente par le biais d’une action de glissement.

Traîner

Utilisez le glisser pour déplacer un ou plusieurs objets d’un emplacement vers un autre.

Si plusieurs objets doivent être déplacés, laissez les utilisateurs sélectionner plusieurs éléments, puis faites glisser tout à la fois.

Articles connexes

Exemples

• Exemple d’entrée de base
• Exemple d’entrée à faible latence
• Exemple de mode d’interaction utilisateur
• Exemples de visuels de focus

Exemples d’archive

• Entrée : exemple d’événements d’entrée utilisateur XAML
• Entrée : exemple de fonctionnalités d’appareil
• Entrée : exemple de test de positionnement tactile
• Exemple de zoom, de mouvement panoramique et de défilement XAML
• Entrée : exemple d’entrée manuscrite simplifié
• Entrée : exemple de manipulations et de mouvements
• Exemple d’entrée tactile DirectX