Fenêtres d’affichage et contenu

Direct Manipulation utilise les fenêtres d’affichage, le contenu et les contacts pour décrire les éléments interactifs de l’interface utilisateur.

• Configuration d’une fenêtre d’affichage
• Points d’ancrage et limites
• Scénarios de décalage de point d’ancrage et RTL
• Comportements
• Système de coordonnées
• Transformations
• État de la fenêtre d’affichage
• Rubriques connexes

Une fenêtre d’affichage est une région d’une fenêtre qui peut recevoir et traiter des entrées provenant d’interactions utilisateur. La fenêtre d’affichage représente la région du contenu qui peut être vu par l’utilisateur final à un moment donné (également appelé clip de contenu). La fenêtre d’affichage a plusieurs fonctions :

• Il gère l’état d’interaction (par exemple, lorsque le contenu est prêt à être manipulé, quand le contenu est en cours de manipulation, lorsque le contenu est en animation d’inertie) et mappe les transformations d’entrée à sortie.
• Il contient du contenu qui se déplace en réponse à l’interaction de l’utilisateur. Il peut s’agir d’un élément div HTML (défilement), d’une liste panoramique (l’écran d’accueil Windows 8) ou du menu contextuel d’un contrôle select.

Une fenêtre d’affichage est créée en appelant CreateViewport. Plusieurs fenêtres d’affichage peuvent être créées dans une seule fenêtre pour produire une expérience d’interface utilisateur riche.

Le contenu représente l’élément qui est transformé en réponse à une interaction. En d’autres termes, le contenu est ce qui se déplace ou se met à l’échelle à mesure que l’utilisateur effectue des panoramiques ou des pincements. Il existe deux types de contenu :

• Le contenu principal est l’élément unique et intrinsèque d’une fenêtre d’affichage qui répond aux manipulations d’entrée et à l’inertie. Le contenu principal est créé en même temps que la fenêtre d’affichage et ne peut pas être ajouté ou supprimé d’une fenêtre d’affichage. Vous pouvez personnaliser le comportement du contenu principal à l’aide de points d’ancrage (abordé plus loin).
• Le contenu secondaire se déplace par rapport au mouvement du contenu principal. Le contenu secondaire est créé séparément de la fenêtre d’affichage et peut être ajouté ou supprimé d’une fenêtre d’affichage. Toutes les transformations de contenu secondaire sont calculées en fonction de la transformation du contenu principal. Des règles spécifiques peuvent être appliquées pour modifier la façon dont la transformation est calculée en fonction de l’objectif prévu de l’élément, identifié par son CLSID lors de la création.

Dans ce diagramme montrant avant et après un panoramique, un seul contact a été utilisé pour panoramiquer le contenu principal. Même si l’utilisateur n’interagit pas directement avec l’indicateur de panoramique (contenu secondaire), le contenu secondaire se déplace lorsque le contenu principal est en panne. Cela fournit des signaux visuels pour savoir jusqu’où l’utilisateur a été en panne.

Configuration d’une fenêtre d’affichage

Une fois que vous avez créé la fenêtre d’affichage. configurer son comportement à l’aide d’une configuration d’interaction. La configuration d’interaction spécifie les manipulations, telles que le panoramique, qui sont prises en charge.

Le panoramique modifie la position du contenu le long de l’axe horizontal ou vertical ou les deux en tant qu’utilisateur panoramique. Lorsque vous configurez la traduction sur les deux axes, le contenu se déplace librement dans n’importe quelle direction.

Pour limiter le mouvement du contenu, configurez des rails, généralement sur l’axe horizontal et vertical. Si l’interaction d’un utilisateur est principalement le long d’un seul axe (représenté par les régions bleues dans le diagramme suivant), le panoramique devient raillé et le contenu se déplace uniquement le long de l’axe raillé. Si l’utilisateur a mis en panne et est actuellement raillé et effectue un deuxième panoramique alors que le contenu est en inertie, le nouveau pan continue d’être raillé.

Exemple : Une fenêtre d’affichage est configurée pour un panoramique horizontal et vertical. Dans la première image, le contact descend. Dans la seconde, un panoramique vertical est lancé et le contact est verrouillé sur le rail vertical. Enfin, une fois que le panoramique est raillé, seul le composant vertical d’un panoramique diagonal est utilisé pour déplacer le contenu.

Si l’utilisateur effectue un panoramique en diagonale de manière à ne pas se trouver dans les régions de détection des rails (les régions blanches), le panoramique n’est pas déraillé et le contenu se déplace librement dans les deux axes.

Le zoom modifie le facteur de mise à l’échelle du contenu à mesure qu’un utilisateur pince ou s’étire. Le point autour duquel le contenu est mis à l’échelle (appelé centre de zoom) se trouve au centre des contacts. Si vous avez défini l’alignement horizontal ou vertical, le centre de zoom change pour préserver l’alignement.

Vous pouvez remplacer ce comportement en spécifiant le centre de déverrouillage, qui définit le centre de zoom au centre des contacts.

L’inertie est la décélération progressive d’une manipulation, à la fois le panoramique et le zoom, une fois que tous les contacts ont été levés (dans le cas du toucher) ou après une entrée clavier/souris (par exemple, en cliquant sur une barre de défilement ou en appuyant sur les touches de direction). Lorsqu’un utilisateur manipule le contenu, la manipulation ne s’arrête pas immédiatement après la levée du contact. Au lieu de cela, le contenu continue dans la direction et la vitesse actuelles, ralentissant progressivement jusqu’à un arrêt.

Points d’ancrage et limites

Une animation d’inertie se produit après la fin de la manipulation en raison d’un doigt levé de l’écran (dans le cas d’une action tactile) ou d’une action du clavier/de la souris (par exemple, touches de direction, page haut/bas, défilement de la roulette de la souris, etc.).

Il existe deux informations qui définissent l’animation d’inertie :

• Point de repos de l’animation : position de fin finale du composant de transformation particulier.
• Durée, courbe et vitesse de l’animation : ils sont déterminés par le type du point de repos.

L’animation d’inertie est affectée par les points d’ancrage et les limites. Les limites spécifient les points de repos maximum et minimum pour le contenu. Si le contenu atteint une limite pendant l’inertie, une animation de limite est appliquée. Les points d’ancrage sont définis sur le contenu principal pour modifier le point de repos et modifier la courbe d’animation d’inertie elle-même.

Vous définissez des points d’ancrage avec SetSnapInterval lorsque le contenu est régulièrement espacé ou avec SetSnapPoints lorsque le contenu est espacé de manière inégale. Voici un exemple de points d’ancrage :

Dans le diagramme, il existe un élément de contenu avec une série de blocs de sous-contenu : des éléments d’actualité dans une application de type lecteur d’actualités ou des éléments dans une vue grille. L’objectif est d’aligner le bord gauche d’un élément sur le bord gauche de la fenêtre d’affichage une fois l’inertie terminée.

Il existe deux groupes de types de points d’ancrage :

• Facultatif ou obligatoire : un point d’ancrage facultatif n’aligne l’animation d’inertie que si le point de repos d’inertie est proche du point d’ancrage. Un point d’ancrage obligatoire aligne toujours l’animation d’inertie sur un point d’ancrage spécifié.
• Unique ou multiple : un type de point d’ancrage multiple permet au contenu de passer au-delà de nombreux points d’ancrage avant de se reposer à un point d’ancrage proche de son point de repos naturel. Un type de point d’ancrage unique choisit le point d’ancrage le plus proche suivant comme point de repos pour l’animation d’inertie.

Le diagramme suivant montre comment les types de points d’ancrage modifient la position de repos de l’animation d’inertie.

Dans ce diagramme, le point de début d’inertie est étiqueté « Début » et la position de fin d’inertie naturelle en l’absence de points d’ancrage comme « Fin ». Les lignes verticales marquent les différents points d’ancrage. Ce tableau décrit comment chaque type de point d’alignement affecte la position de fin de l’animation.

Type de point	Description
Single obligatoire	Le point d’ancrage P1 est choisi, car il s’agit du premier point d’ancrage dans le sens de l’inertie
Multiple obligatoire	Le point d’ancrage P2 est choisi, car il est le plus proche du point de terminaison dans le sens de l’inertie
Single facultatif	Le point d’ancrage P1 est choisi, car il s’agit du premier point d’ancrage rencontré pendant l’inertie
Multiple facultatif	Le point d’ancrage P2 est choisi, car il est proche du point de terminaison naturel

Scénarios de décalage de point d’ancrage et RTL

Vous appliquez le décalage du point d’ancrage et le système de coordonnées à l’aide de l’API SetSnapCoordinate , qui décale tous les points d’ancrage ou intervalles d’ancrage à l’aide du système de décalage/coordonnées spécifié.

Le système de coordonnées est très utile dans les scénarios RTL, où vous souhaitez décrire les points d’ancrage à partir du bord gauche du contenu dans le sens inverse. Dans le diagramme précédent, SetSnapCoordinate est utilisé avec l’indicateur DIRECTMANIPULATION_MOTION_TRANSLATEX et DIRECTMANIPULATION_COORDINATE_MIRRORED , qui décale automatiquement les points d’ancrage du bord gauche du contenu et les fournit dans l’ordre de droite à gauche : S1 est à 0 px, S2 à 50 px (et ainsi de suite). Tout jeu de décalages utilisant SetSnapCoordinate effectue automatiquement un décalage supplémentaire de ce bord gauche du contenu, y compris le facteur de mise à l’échelle correct.

Vous utiliserez presque toujours SetSnapCoordinate avec le paramètre d’origine défini pour éviter de définir des points d’ancrage en dehors de la zone de contenu.

Par exemple, si la fenêtre d’affichage est de 200 x 200, que le contenu est 1000 x 200 et que l’interface est RTL, la fenêtre d’affichage a son bord gauche à x=800 lorsque la fenêtre d’affichage est présentée pour la première fois. Appelez SetSnapCoordinate avec SetSnapCoordinate(DIRECTMANIPULATION_MOTION_TRANSLATEX, DIRECTMANIPULATION_COORDINATE_MIRRORED, 1000.0) pour spécifier que les points d’ancrage doivent être calculés de droite à gauche en commençant par le bord DROIT du contenu.

Comportements

Un comportement est un objet qui peut être attaché à une fenêtre d’affichage afin de modifier la façon dont La manipulation directe gère la transformation de sortie du contenu principal ou secondaire d’une fenêtre d’affichage. Un objet de comportement peut affecter un ou plusieurs aspects d’une manipulation, tels que le traitement de l’entrée ou l’application de l’animation d’inertie. Par exemple, un comportement de inscription automatique affecte l’animation d’inertie en effectuant une animation de défilement vers une extrémité du contenu principal. Un comportement de configuration de diapositives croisées affecte le traitement d’entrée de manipulation directe qui détecte quand une action de diapositive croisée est en cours d’exécution.

Un objet de comportement est créé en appelant CreateBehavior, ajouté à une fenêtre d’affichage, puis son comportement est configuré de manière asynchrone. La suppression du comportement de la fenêtre d’affichage supprime ses effets.

Système de coordonnées

Il existe trois systèmes de coordonnées main utilisés par la manipulation directe :

• Système de coordonnées du client : décrit le rectangle de la fenêtre cliente. Les unités sont exprimées en pixels.
• Système de coordonnées de fenêtre d’affichage : décrit le rectangle d’une région dans le client qui peut traiter l’entrée. Les unités sont définies par l’application (à l’aide de SetViewportRect).
• Système de coordonnées de contenu : décrit le rectangle ou la taille du contenu principal. Les unités sont définies par l’application (à l’aide de SetContentRect).

Pour les trois systèmes, les coordonnées sont définies par rapport à leur origine respective en haut à gauche et sont positives à droite et vers le bas. Ces systèmes de coordonnées sont illustrés dans le diagramme suivant. Seule la section du contenu dans le rectangle de fenêtre d’affichage peut être vue ou manipulée par l’utilisateur final.

Transformations

La manipulation directe conserve plusieurs transformations différentes qui contribuent à la sortie globale affichée.

• Transformation de contenu : transformation initiale calculée par manipulation directe basée sur une manipulation ou une inertie. Il capture les effets des animations de points d’ancrage, de railing, de surpannage par défaut (manipulation), de surbounce par défaut (inertie) et d’animations ZoomToRect.
• Transformation de sortie : transformation visuelle ou de sortie finale. Il s’agit de la combinaison du contenu et des transformations de synchronisation.
• Transformation de synchronisation : calculée lorsque vous appelez SyncContentTransform. Il permet à La manipulation directe d’appliquer une nouvelle transformation de contenu fournie par l’application tout en conservant la transformation de sortie existante.
• Transformation d’affichage : appliquée par l’application dans le cadre du post-traitement. Pour plus d’informations, consultez SyncDisplayTransform .

Étant donné que la transformation de sortie est destinée à décaler visuellement une surface à l’écran, La manipulation directe effectue l’arrondi nécessaire sur les composants de transformation de sortie afin que le texte et d’autres contenus soient toujours rendus/composites à une limite de pixels intégral. Le mécanisme d’arrondi dépend de plusieurs facteurs, notamment la vitesse du mouvement et la présence du Bureau à distance. Le mécanisme d’arrondi du contenu secondaire correspond à celui du contenu principal, tout en tenant compte de la différence de mouvement entre les deux. Les clients de GetOutputTransform ne doivent pas dépendre du mécanisme d’arrondi exact de la transformation de sortie, car différents facteurs l’affectent.

Notes

Cela signifie que les composants d’une transformation de contenu peuvent ne pas être intégraux et peuvent contenir des décalages de sous-pixels. Les clients utilisant La manipulation directe sont encouragés à utiliser GetOutputTransform pour calculer la transformation visuelle appropriée à appliquer au contenu lors de l’utilisation du mode de mise à jour manuelle. Lors de l’utilisation du mode de mise à jour automatique à l’aide du compositeur intégré, La manipulation directe applique automatiquement cette transformation pour le compte du client. Cette transformation est générée par la manipulation directe pour garantir des résultats visuellement agréables lors de la composition de la sortie visuelle.

État de la fenêtre d’affichage

À mesure que l’entrée est traitée, la fenêtre d’affichage gère l’état d’interaction et le mappage des transformations d’entrée à sortie. Vérifiez l’état d’interaction de la fenêtre d’affichage en appelant GetStatus.

• Génération : la fenêtre d’affichage est en cours de création et n’est pas encore en mesure de traiter l’entrée. Pour traiter l’entrée, appelez IDirectManipulationViewport::Enable. Si l’option Activer n’est pas appelée, la fenêtre d’affichage passe à l’état Désactivé.

  Notes

  Il s’agit de l’état initial de l’interaction.

• Activé : la fenêtre d’affichage est prête à traiter l’entrée. Lorsqu’un contact tombe en panne (SetContact est appelé) et qu’une manipulation est détectée, la fenêtre d’affichage passe à En cours d’exécution.

• En cours d’exécution : la fenêtre d’affichage traite actuellement les entrées et met à jour le contenu. Lorsque le contact est levé, la fenêtre d’affichage passe à Inertie, si elle est configurée.

• Inertie : le contenu se déplace dans une animation d’inertie. Une fois l’inertie terminée, la fenêtre d’affichage passe à Prêt. Si la désactivation automatique a été définie sur la fenêtre d’affichage, elle passe d’Inertie à Prêt, puis à Désactivé.

• Prêt : la fenêtre d’affichage est prête à traiter l’entrée. Lorsqu’un contact tombe en panne (SetContact est appelé) et qu’une manipulation est détectée, la fenêtre d’affichage passe à En cours d’exécution.

• Suspendu : la fenêtre d’affichage peut devenir suspendue lorsque son entrée a été promue en parent dans la chaîne SetContact . Cela est abordé plus en détail dans Plusieurs fenêtres d’affichage : tests d’accès et hiérarchie de fenêtres d’affichage.

• Désactivé : la fenêtre d’affichage ne traite pas les entrées ou n’effectue pas de rappels. Une fenêtre d’affichage peut être désactivée à partir de différents états en appelant IDirectManipulationViewport::D isable. Si la désactivation automatique a été définie sur la fenêtre d’affichage, elle passe automatiquement à Désactivé après le traitement d’une manipulation. Pour réactiver une fenêtre d’affichage désactivée, appelez IDirectManipulationViewport::Enable.

Rubriques connexes

Plusieurs fenêtres d’affichage : test d’accès et hiérarchie de fenêtre d’affichage, ActivateConfiguration, GetOutputTransform, SyncDisplayTransform