Langage: HTML | XAML

Animation latérale de l’interface utilisateur (XAML)

Applies to Windows only

Utilisez les animations latérales de l’interface utilisateur pour afficher ou masquer l’interface utilisateur qui part du bord de l’écran. L’utilisateur ou l’application peuvent afficher cette interface utilisateur. Utilisez EdgeUIThemeTransition ou une interface utilisateur latérale plus petite telle que des barres de l’application ou des barres de commandes. Utilisez PaneThemeTransition pour une interface utilisateur plus grande telle que les volets ou les panneaux qui apparaissent par glissement. Ces animations s’utilisent principalement sur les contrôles personnalisés ; les contrôles existants tels que AppBar et CommandBar ont des animations de la bibliothèque intégrées pour l’interface utilisateur latérale et vous pouvez bénéficier du comportement animé simplement en incluant ces contrôles dans votre interface utilisateur.

L’interface utilisateur peut se superposer à l’application ou être intégrée à sa surface principale. Si l’interface utilisateur fait partie de la surface de l’application principale, vous devrez peut-être redimensionner le reste de l’application pour faire de la place à la nouvelle interface utilisateur lorsque celle-ci apparaît.

Diagramme basique d’un élément latéral

Il existe deux types d’éléments latéraux, chacun d’entre eux disposant de leur propre ensemble d’API d’animation : l’interface utilisateur latérale et l’interface utilisateur du volet.

  • Utilisez les animations d’interface utilisateur latérale avec l’interface utilisateur latérale plus petite si vous souhaitez animer un contrôle personnalisé dont le comportement est semblable à AppBar, CommandBar ou autre contrôle similaire. Vous souhaiterez peut-être aussi définir une zone/surface d’interface utilisateur pour les erreurs et avertissements qui résultent d’actions dans votre application. Si vous êtes concerné par ce scénario, assurez-vous de lire les Recommandations sur les menus volants ; il est possible que l’interface utilisateur latérale ne convienne pas à votre scénario.
  • Utilisez l’animation d’interface utilisateur du volet avec l’interface utilisateur latérale de plus grande taille qui couvre une plus grande partie de la fenêtre de l’application. Le clavier logiciel constitue un exemple de taille de volet dont nous parlons ici.

Illustration montrant la différence en taille entre l’interface utilisateur latérale et une interface utilisateur de volet

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

Les contrôles XAML n’utilisent pas de manière explicite les animations latérales dans leurs modèles de contrôle, mais ils disposent d’un comportement animé par défaut. Pour inclure une interface utilisateur latérale, la méthode recommandée consiste à ajouter une AppBar (ou CommandBar) via les propriétés Page.BottomAppBar et Page.TopAppBar, qui appliquent automatiquement tout le comportement d’interaction et de transition approprié pour vous. Pour plus d’informations, voir Ajout de barres d’application.

Si vous utilisez des menus volants (Flyout, MenuFlyout, SettingsFlyout), ils disposent également d’animations intégrées. Mais il ne s’agit pas vraiment d’une interface utilisateur latérale, car ils doivent être associés au contexte qui a provoqué leur affichage, et non au bord de la fenêtre d’application. Vous utilisez peut-être des menus volants pour l’interface utilisateur appelée à partir d’une AppBar, mais cette situation diffère d’une interface utilisateur latérale pure. Pour plus d’informations, voir Ajout de menus volants et de menus et Animation de l’interface utilisateur contextuelle.

Autres ressources

L’Exemple de fenêtre contextuelle montre une utilisation de PaneThemeTransition pour Popup.ChildTransitions.

Voir Recommandations et liste de vérification sur les animations latérales de l’interface utilisateur 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
Ajout de barres d’application
EdgeUIThemeTransition
PaneThemeTransition
Popup

 

 

Afficher:
© 2015 Microsoft