Langage: HTML | XAML

Animation de séquences de glisser-déplacer (XAML)

Applies to Windows and Windows Phone

Utilisez ces animations pour les actions de glisser-déplacer lorsque des personnes déplacent des objets avec leurs doigts ou des périphériques d’entrée, tels qu’une souris ou un stylet. Les actions de glisser-déplacer courantes comprennent le déplacement d’un seul élément dans une liste et le positionnement d’un élément au-dessus d’un autre.

Remarque  Utilisez les animations par glissement uniquement si l’utilisateur déplace l’objet. Pour déplacer l’objet d’une autre manière, utilisez les animations de repositionnement.

Cet ensemble d’animations comprend les API suivantes :

La prise en charge du glissement par défaut est disponible dans ListView et GridView pour XAML. Les animations glisser-déplacer sont intégrées pour la prise en charge des éléments si vous les utilisez dans votre interface utilisateur et vous n’avez rien à faire pour obtenir ces animations. Elles seront toutefois plus utiles si vous étendez la fonctionnalité glisser-déplacer dans d’autres contrôles, en particulier vos propres contrôles personnalisés.

Début du glissement

Chaque séquence d’animation pour les actions de glisser-déplacer commence par un début de glissement (DragItemThemeAnimation), qui est affiché lorsque l’utilisateur commence à faire glisser un objet.

Cette animation modifie l’apparence de la source du déplacement (à savoir l’objet glissé) et du ou des objets affectés. Un objet affecté représente un objet susceptible de changer de position en réponse à la séquence de glisser-déplacer. Par exemple, si vous réorganisez une liste, tous les éléments qu’elle contient, hormis la source du déplacement, sont des objets affectés car leur emplacement dans la liste est à même de changer. Les éléments affectés sont animés afin de montrer à l’utilisateur comment leur emplacement changerait en réponse à l’action en cours. Notez que les sources de déplacement ne possèdent pas toutes des objets affectés.

Les images suivantes illustrent la relation entre la source du déplacement et les objets affectés dans l’animation de début du glissement. La première image montre l’objet à glisser et ses voisins avant que l’utilisateur commence à le faire glisser.

Quatre objets de même taille, l’un étant identifié comme source du déplacement

Lorsque l’utilisateur sélectionne l’objet et commence à le faire glisser, la taille de l’objet glissé s’accroît tandis que la taille des objets affectés diminue.

Quatre objets, dont la source du déplacement est de taille accrue et les trois autres objets affectés sont de taille diminuée

L’image suivante illustre le scénario dans lequel les objets voisins ne sont pas affectés.

Quatre objets, dont la source du déplacement est de taille accrue et les trois autres objets affectés sont de même taille

Fin du glissement

Chaque séquence d’animation pour les actions de glisser-déplacer se termine par l’animation de fin du glissement (DropTargetItemThemeAnimation), qui est affichée ici lorsque l’utilisateur dépose un objet glissé. L’animation de fin du glissement n’est jamais utilisée à moins que l’animation de début du glissement ne soit utilisée en premier.

L’animation de fin du glissement place la source du déplacement (l’objet glissé) dans sa position finale. En même temps, elle supprime les changements visuels apportés à la source et aux éléments affectés qui ont été appliqués par l’animation de début du glissement. Les objets affectés dans un appel à DropTargetItemThemeAnimation sont toujours les mêmes objets que ceux utilisés dans l’appel à DragItemThemeAnimation.

Les images suivantes illustrent la relation entre la source du déplacement et ses objets affectés dans l’animation de fin du glissement. La première image illustre un objet avant que l’utilisateur ne le dépose dans un ensemble d’objets affectés. La source du déplacement est affichée avec une taille accrue par rapport à sa taille normale, et est décalée par rapport à la liste. Les objets affectés sont affichés avec une taille inférieure à leur taille normale.

Quatre objets, dont la source du déplacement est de taille accrue et est décalée par rapport aux trois autres objets affectés, dont la taille a légèrement diminué

Cette image illustre le scénario dans lequel l’objet déposé n’affecte pas d’autres objets. La source du déplacement est à nouveau de taille accrue et décalée par rapport aux autres, mais les autres objets sont affichés avec leur taille normale.

Quatre objets, dont la source du déplacement est de taille accrue et est décalée par rapport aux trois autres objets, dont la taille n’a pas changé

Une fois que l’utilisateur dépose la source du déplacement, tous les objets reprennent leur taille d’origine, et sont repositionnés si nécessaire.

Quatre objets de même taille, l’un étant identifié comme source du déplacement

Glissement entre les objets

Utilisez l’animation de glissement entre les objets (DragOverThemeAnimation) lorsque l’utilisateur fait glisser un objet (c’est-à-dire la source du déplacement) entre deux autres objets où l’objet peut être déposé. Cette animation montre à l’utilisateur les objets affectés qui s’écartent pour faire de la place à la source de déplacement s’il choisit de la déposer à l’emplacement désigné.

Les images suivantes affichent le déplacement des objets affectés en réponse à la source de déplacement. La première image affiche les objets affectés avant que la source de déplacement ne déclenche l’animation de glissement entre les objets.

Chevauchement de l’objet de la source de déplacement et de deux objets affichés dans leurs emplacements d’origine

Dans l’image suivante, l’animation de glissement entre les objets a entraîné l’écartement des deux objets de chaque côté de la source de déplacement.

Chevauchement de l’objet source de déplacement et des deux objets affectés qui se sont séparés pour montrer l’emplacement cible

Comportement des animations glisser-déplacer dans les contrôles Windows Runtime par défaut

  • ListViewItem et GridViewItem : ces modèles définissent les états visuels pour le glissement et le glissement multiple. Les états de début de glissement incluent une méthode DragItemThemeAnimation appliquée à deux composants. Les états de cible de déplacement incluent une méthode DropTargetItemThemeAnimation. La méthode DragOverThemeAnimation est utilisée dans les états visuels indicateurs de réorganisation. Il en existe un pour chaque direction (bas, haut, gauche et droite) à partir de laquelle un élément pourrait être déplacé.

Gestion des événements pour le glisser-déplacer personnalisé

Il existe une prise en charge de base des événements d’entrée d’élément pour le glisser-déplacer et vous devez gérer ces événements pour définir un comportement de glisser-déplacer dans un contrôle personnalisé. Pour plus d’informations, voir UIElement.Drop.

Autres ressources

Téléchargez Exemple d’utilisation des contrôles ListView et GridView XAML et Exemple d’interactivité de personnalisation de ListView et GridView XAML ; exécutez les exemples pour essayer vous-même les animations ListView et GridView.

Voir Recommandations et liste de vérification sur les animations pour les actions de glisser-déplacer pour consulter les meilleures pratiques de conception dans l’utilisation de ces animations.

Rubriques associées

Animation de votre interface utilisateur
Démarrage rapide : animation de votre interface utilisateur avec des animations de la bibliothèque
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation
UIElement.Drop event
ListViewItem
GridViewItem

 

 

Afficher:
© 2014 Microsoft