Partager via

Utilisation de la couche visuelle dans les applications de bureau

  • Article

Vous pouvez maintenant utiliser des API Windows Runtime dans des applications de bureau non conçues pour UWP. Ces API vous permettent d’améliorer l’apparence, le comportement et les fonctionnalités de vos applications WPF, Windows Forms et Win32 C++, mais aussi de bénéficier des toutes dernières fonctionnalités d’interface utilisateur de Windows qui sont disponibles uniquement par le biais d’UWP.

Dans beaucoup de scénarios, vous pouvez utiliser les îlots XAML pour ajouter des contrôles XAML modernes à votre application. Toutefois, si vous devez créer des expériences utilisateur personnalisées plus avancées que les contrôles intégrés, vous pouvez faire appel aux API de la couche visuelle.

La couche visuelle fournit une API en mode retenu très performante pour les graphismes, les effets et les animations. Elle est la base de l’interface utilisateur sur les appareils Windows. Les contrôles XAML UWP sont basés sur la couche visuelle, ce qui permet de gérer de nombreux aspects du système Fluent Design, tels que la lumière, la profondeur, le mouvement, la matière et la mise à l’échelle.

Brève vidéo présentant une interface utilisateur créée avec la couche visuelle.

Interface utilisateur créée avec la couche visuelle

Créer une interface utilisateur attractive et esthétique dans les applications Windows

La couche visuelle vous permet de créer des expériences attractives en utilisant une composition légère de contenu dessiné personnalisé (les visuels) et en ajoutant des animations, des effets et des manipulations percutants à ces objets dans votre application. La couche visuelle ne remplace aucune des infrastructures d’interface utilisateur existantes ; elle est plutôt un complément qui améliore ces infrastructures.

Utilisez la couche visuelle pour personnaliser l’apparence de votre application et conférer à celle-ci une identité forte qui la distingue des autres applications. De plus, la couche visuelle applique les principes du Fluent Design, qui visent à faciliter l’utilisation de vos applications et encourager ainsi l’engagement des utilisateurs. Par exemple, vous pouvez l’utiliser pour créer des signaux visuels et des transitions d’écran animées qui montrent les relations entre les différents éléments à l’écran.

Fonctionnalités de la couche visuelle

Pinceaux

Avec les pinceaux de composition, vous peignez des objets d’interface utilisateur auxquels vous pouvez ajouter des couleurs unies, des dégradés, des images, des vidéos, des effets complexes et bien d’autres éléments.

Œuf créé avec Material Creator

Œuf créé avec l’application de démonstration Material Creator.

Effets

Les effets de composition incluent la lumière, l’ombre et différents effets de filtre. Ils peuvent être animés, personnalisés et chaînés, puis appliqués directement aux visuels. L’effet SceneLightingEffect peut être combiné avec la lumière de composition pour créer une ambiance, une profondeur et une matière.

Lumière et matière

Lumière et matière illustrés dans la Galerie d’exemples de composition d’interface utilisateur Windows.

Animations

Les animations de composition s’exécutent directement dans le processus du compositeur, indépendamment du thread d’interface utilisateur. Cela garantit la fluidité et la mise à l’échelle des animations quand vous exécutez simultanément un grand nombre d’animations explicites. En plus des animations d’images clés familières pour gérer les modifications de propriétés dans le temps, vous pouvez utiliser des expressions pour établir des relations mathématiques entre les différentes propriétés, y compris les entrées utilisateur. Avec les animations basées sur des entrées, vous créez une interface utilisateur qui répond de manière dynamique et fluide aux entrées utilisateur, ce qui favorise l’engagement de l’utilisateur.

Brève vidéo d’une autre interface utilisateur créée avec la couche visuelle.

Mouvement illustré dans la Galerie d’exemples de composition d’interface utilisateur Windows.

Conservation de votre codebase existant et adoption incrémentielle

Le code de vos applications existantes est le fruit d’un gros investissement que vous ne voudrez sans doute pas perdre. Vous pouvez migrer des îlots de contenu pour utiliser la couche visuelle et conserver le reste de l’interface utilisateur dans son infrastructure existante. Autrement dit, vous pouvez apporter d’importantes mises à jour et améliorations à l’interface utilisateur de votre application sans avoir à modifier de grandes parties de votre codebase actuel.

Exemples et tutoriels

Découvrez comment utiliser la couche visuelle dans vos applications en expérimentant nos exemples. Les exemples et tutoriels mis à votre disposition vous familiariseront avec la couche visuelle et vous montreront comment utiliser les différentes fonctionnalités.

Win32

Windows Forms

WPF

Limitations

La plupart des fonctionnalités de la couche visuelle ont le même comportement quand elles sont hébergées dans une application de bureau ou dans une application UWP, mais certaines fonctionnalités présentent des limitations. Voici quelques-unes des limitations à connaître :

  • Les chaînes d’effets s’appuient sur Win2D pour les descriptions des effets. Le package NuGet Win2D n’est pas pris en charge dans les applications de bureau. Vous devez donc le recompiler à partir du code source.
  • Pour effectuer un test de positionnement, vous devez effectuer des calculs de limites en parcourant manuellement l’arborescence des visuels. C’est la même chose que la couche visuelle dans UWP, sauf qu’ici, il n’y a pas d’élément XAML que vous pouvez lier facilement pour le test de positionnement.
  • La couche visuelle n’a pas de primitive de rendu du texte.
  • Quand deux technologies d’interface utilisateur différentes sont utilisées ensemble, telles que WPF et la couche visuelle, elles gèrent chacune le dessin de leurs propres pixels à l’écran, mais elles ne peuvent pas partager de pixels. Par conséquent, le contenu de la couche visuelle s’affiche toujours au-dessus des autres contenus d’interface utilisateur. (C’est le problème d’espace de rendu.) Vous devrez peut-être ajouter du code ou faire des tests supplémentaires pour vous assurer que le contenu de la couche visuelle se redimensionne correctement avec l’interface utilisateur hôte et qu’il n’occulte aucun autre contenu.
  • Le contenu hébergé dans une application de bureau n’est pas automatiquement redimensionné ou mis à l’échelle pour la résolution DPI. Vous devrez peut-être effectuer des étapes en plus pour vérifier que votre contenu gère les modifications de DPI. (Pour plus d’informations, consultez les tutoriels propres à la plateforme.)

Ressources supplémentaires

Informations de référence sur les API