Utilisation de la couche Visuelle dans les applications de bureau

Vous pouvez désormais utiliser des API Windows Runtime dans des applications de bureau non UWP pour améliorer l’apparence, l’apparence et les fonctionnalités de vos applications WPF, Windows Forms et Win32 C++ et tirer parti des dernières fonctionnalités d’interface utilisateur Windows disponibles uniquement via UWP.

Pour de nombreux scénarios, vous pouvez utiliser des îlots XAML pour ajouter des contrôles XAML modernes à votre application. Toutefois, lorsque vous devez créer des expériences personnalisées qui vont au-delà des contrôles intégrés, vous pouvez accéder aux API de couche Visuelle.

La couche visuelle fournit une API hautes performances en mode conservé pour les graphiques, les effets et les animations. C'est la base de l'interface utilisateur sur les appareils Windows. Les contrôles XAML UWP reposent sur la couche visuelle et permettent de nombreux aspects du système Fluent Design, tels que la lumière, la profondeur, le mouvement, le matériau et l’échelle.

Courte vidéo montrant une interface utilisateur créée avec la couche visuelle.

Interface utilisateur créée avec la couche visuelle

Créer une interface utilisateur visuellement attrayante dans n’importe quelle application Windows

La couche visuelle vous permet de créer des expériences attrayantes à l’aide d’une composition légère de contenu dessiné personnalisé (visuels) et d’appliquer des animations, des effets et des manipulations puissants sur ces objets dans votre application. La couche Visuelle ne remplace aucune infrastructure d’interface utilisateur existante ; Au lieu de cela, il s’agit d’un complément précieux à ces infrastructures.

Vous pouvez utiliser la couche Visuelle pour donner à votre application une apparence unique et établir une identité qui la distingue d’autres applications. Il active également les principes de Fluent Design, qui sont créés pour faciliter l’utilisation de vos applications, ce qui accroît l'engagement des utilisateurs. Par exemple, vous pouvez l’utiliser pour créer des repères visuels et des transitions d’écran animées qui affichent les relations entre les éléments à l’écran.

Fonctionnalités de couche visuelle

Pinceaux

Les pinceaux de composition vous permettent de peindre des objets d’interface utilisateur avec des couleurs unie, des dégradés, des images, des vidéos, des effets complexes, etc.

Un œuf créé avec Material Creator

Un oeuf créé avec l’application de démonstration Matérial Creator.

Effets

Les effets de composition incluent la lumière, l’ombre et une liste d’effets de filtre. Ils peuvent être animés, personnalisés et chaînés, puis appliqués directement aux visuels. Le SceneLightingEffect peut être combiné avec l’éclairage de composition pour créer une atmosphère, une profondeur et des matériaux.

Lumières et matériaux

Lumières et matériaux présentés dans la galerie d'exemples Windows UI Composition.

Animations

Les animations de composition s’exécutent directement dans le processus de compositeur, indépendamment du thread d’interface utilisateur. Cela garantit la douceur et la mise à l’échelle, afin que vous puissiez exécuter un grand nombre d’animations simultanées et explicites. En plus des animations d’images-clés familières pour provoquer des modifications de propriété à travers le temps, vous pouvez utiliser des expressions pour configurer des relations mathématiques entre différentes propriétés, y compris la saisie utilisateur. Les animations pilotées par les entrées vous permettent de créer une interface utilisateur qui répond dynamiquement et fluidement à l’entrée utilisateur, ce qui peut entraîner un engagement utilisateur plus élevé.

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

Mouvement illustré dans la galerie d'exemples de composition de l'interface utilisateur Windows.

Conserver votre base de code existante et adopter de façon incrémentielle

Le code de vos applications existantes représente un investissement important que vous ne souhaitez pas perdre. Vous pouvez migrer des îles de contenu pour utiliser la couche Visuelle et conserver le reste de l’interface utilisateur dans son infrastructure existante. Cela signifie que vous pouvez apporter des mises à jour et des améliorations significatives à l’interface utilisateur de votre application sans avoir à apporter de modifications approfondies à votre base de code existante.

Exemples et tutoriels

Découvrez comment utiliser la couche Visuelle dans vos applications en expérimentant nos exemples. Ces exemples et tutoriels vous aident à commencer à utiliser la couche Visuelle et à vous montrer comment fonctionnent les fonctionnalités.

Win32

Windows Forms

WPF

Limitations

Bien que de nombreuses fonctionnalités de couche visuelle fonctionnent de la même façon lorsqu’elles sont hébergées dans une application de bureau que dans une application UWP, certaines fonctionnalités ont 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 des tests de détection, vous devez effectuer les calculs de limites en parcourant vous-même l’arborescence visuelle. Il s’agit de l'équivalent de la couche visuelle dans UWP, sauf qu'ici, il n’existe aucun élément XAML auquel vous pouvez facilement vous lier pour les tests de collisions.
  • La couche visuelle n’a pas de primitive pour le rendu du texte.
  • Lorsque deux technologies d'interface utilisateur différentes sont utilisées ensemble, telles que WPF et la couche visuelle, elles sont chacune responsables du dessin de leurs propres pixels sur l'écran et ne peuvent pas partager de pixels. Par conséquent, le contenu de couche visuelle est toujours affiché sur d’autres contenus d’interface utilisateur. (Il s’agit de la question de l’espace aérien.) Vous devrez peut-être effectuer du codage et des tests supplémentaires pour vous assurer que le contenu de votre couche visuelle se redimensionne avec l’interface utilisateur hôte et ne masque pas d’autres contenus.
  • Le contenu hébergé dans une application de bureau ne se redimensionne pas automatiquement et n'est pas mis à l'échelle pour le DPI. Des étapes supplémentaires peuvent être nécessaires pour garantir que votre contenu gère les modifications DPI. (Consultez les didacticiels spécifiques à la plateforme pour plus d’informations.)

Ressources supplémentaires

Référence d’API

  • Last updated on