Langage: HTML | XAML

Animation de l’interface utilisateur contextuelle (XAML)

Applies to Windows and Windows Phone

Utilisez les animations contextuelles pour afficher et masquer l’interface utilisateur contextuelle, qui comprend des menus contextuels et des menus volants. Les éléments contextuels sont des conteneurs qui s’affichent sur le contenu de l’application et qui disparaissent si l’utilisateur appuie ou clique en dehors de l’élément contextuel. Ces animations s’utilisent principalement sur des contrôles personnalisés ; si vous utilisez des éléments Popup, Flyout et MenuFlyout dans votre XAML, ceux-ci possèdent déjà des animations de bibliothèque intégrées et vous n’avez pas à ajouter de comportement ici.

Les animations pertinentes pour le comportement contextuel sont les suivantes : PopInThemeAnimation, PopOutThemeAnimation, PopupThemeTransition.

Les animations contextuelles comprennent une translation, mouvement vertical depuis un emplacement d’origine vers un emplacement final, tandis que l’élément contextuel apparaît ou disparaît en fondu. L’amplitude de translation et la direction sont spécifiées par l’application. Dans la plupart des cas, la translation doit être de 50 pixels et se diriger vers le haut. Toutefois, si l’élément contextuel est affiché sous l’élément d’interface utilisateur qui l’a déclenché, la translation doit être de 50 pixels et se diriger vers le bas. Par exemple, cette translation vers le bas serait utilisée avec un menu volant déclenché à partir d’une barre de navigation ou d’un en-tête d’application. L’objectif est de fournir à l’utilisateur un lien visuel entre l’élément contextuel et son élément déclencheur.

Comportement des animations contextuelles dans les contrôles Windows Runtime par défaut

Le code par défaut pour Popup, Flyout et MenuFlyout n’utilise pas les animations. Ces types ont leurs propres animations intégrées qui existent en dehors des modèles et des styles. Popup a une propriété ChildTransitions qui commence comme null, et si vous le souhaitez vous pouvez ajouter PopupThemeTransition à cet endroit. Cela vous permet d’ajuster FromHorizontalOffset ou FromVerticalOffset.

Autres ressources

L’exemple d’animations de caractéristiques XAML montre comment utiliser des objets PopInThemeAnimation et PopOutThemeAnimation définis dans une classe Storyboard et appelés de manière explicite. (Il s’agit du Scénario 1 dans l’exemple.)

Voir Recommandations et liste de vérification sur les animations de l’interface utilisateur contextuelle pour consulter les meilleures pratiques de conception dans l’utilisation de ces animations.

Rubriques associées

Animation de votre interface utilisateur
Animation latérale de l’interface utilisateur
Démarrage rapide : animation de votre interface utilisateur avec des animations de la bibliothèque
Exemple d’animations de caractéristiques XAML
PopInThemeAnimation
PopOutThemeAnimation
PopupThemeTransition

 

 

Afficher:
© 2015 Microsoft