Vue d’ensemble de la couche visuelle

La couche visuelle fournit une API hautes performances en mode conservé pour les graphiques, les effets et les animations, et constitue la base de toutes les interfaces utilisateur sur tous les appareils Windows. Vous définissez votre interface utilisateur de manière déclarative et la couche visuelle s’appuie sur l’accélération matérielle graphique pour vous assurer que votre contenu, vos effets et vos animations sont rendus de manière fluide et sans problème, indépendamment du thread d’interface utilisateur de l’application.

Les types dans Microsoft.UI.Composition forment l’implémentation Windows App SDK/WinUI 3 de la couche visuelle.

Points forts notables :

• API WinRT familières
• Conçu pour une interface utilisateur et des interactions plus dynamiques
• Concepts alignés avec les outils de conception
• Extensibilité linéaire sans chutes soudaines de performance

Vos applications WinUI et Windows App SDK utilisent déjà la couche Visuelle via l’une des infrastructures d’interface utilisateur. Vous pouvez également tirer parti de la couche visuelle directement pour le rendu, les effets et les animations personnalisés avec très peu d’efforts.

Qu’est-ce qui se trouve dans la couche Visuelle ?

Les fonctions principales de la couche visuelle sont les suivantes :

1. Contenu : composition légère du contenu dessiné personnalisé
2. Effets : système d’effets d’interface utilisateur en temps réel dont les effets peuvent être animés, chaînés et personnalisés
3. Animations : animations expressives, indépendantes du framework et fonctionnant indépendamment du thread de l'interface utilisateur

Contenu

Le contenu est hébergé, transformé et mis à disposition pour une utilisation par le système d’animation et d’effets via des visuels. À la base de la hiérarchie de classes se trouve la classe Visual, un proxy léger et à fil agile dans le processus de l’application pour l’état visuel du compositeur. Les sous-classes de Visuel incluent ContainerVisual pour permettre aux enfants de créer des arborescences de visuels et SpriteVisual qui contiennent du contenu et peuvent être peintes avec des couleurs unie, du contenu dessiné personnalisé ou des effets visuels. Ensemble, ces types de visuels composent la structure de l’arborescence visuelle pour l’interface utilisateur 2D et sauvegardent les éléments XAML FrameworkElements les plus visibles.

Pour plus d’informations, consultez la vue d’ensemble de Composition Visual.

Effets

Le système Effets de la couche Visuel vous permet d’appliquer une chaîne d’effets de filtre et de transparence à un visuel ou à une arborescence de visuels. Il s’agit d’un système d’effets d’interface utilisateur, qui ne doit pas être confondu avec les effets d’image et de média. Les effets fonctionnent conjointement avec le système d’animation, ce qui permet aux utilisateurs d’obtenir des animations fluides et dynamiques des propriétés Effect, rendues indépendantes du thread d’interface utilisateur. Les effets dans la couche visuelle fournissent les blocs de construction créatifs qui peuvent être combinés et animés pour construire des expériences personnalisées et interactives.

Outre les chaînes d’effets animatables, la couche visuelle prend également en charge un modèle d’éclairage qui permet aux visuels d’imiter les propriétés matérielles en répondant aux lumières animatables. Les visuels peuvent également projeter des ombres. L’éclairage et les ombres peuvent être combinés pour créer une perception de profondeur et de réalisme.

Pour plus d’informations, consultez la vue d’ensemble des effets de composition .

Animations

Le système d’animation dans la couche visuelle vous permet de déplacer des visuels, d’animer des effets et de générer des transformations, des clips et d’autres propriétés. Il s’agit d’un système indépendant des frameworks qui a été conçu depuis le début avec la performance à l’esprit. Il s’exécute indépendamment du thread d’interface utilisateur pour garantir la fluidité et l’extensibilité. Bien qu’il vous permet d’utiliser des animations KeyFrame familières pour générer des modifications de propriété au fil du temps, il vous permet également de configurer des relations mathématiques entre différentes propriétés, y compris les entrées utilisateur, ce qui vous permet de créer directement des expériences chorégraphiques transparentes.

Pour plus d'informations, consultez la vue d'ensemble des animations de composition.

Travail avec WinUI XAML

Vous pouvez accéder à un visuel créé par l’infrastructure XAML et sauvegarder un FrameworkElement visible à l’aide de la classe ElementCompositionPreview dans Microsoft.UI.Xaml.Hosting. Notez que les visuels créés pour vous par l’infrastructure sont fournis avec certaines limites sur la personnalisation. Cela est dû au fait que l’infrastructure gère les décalages, les transformations et les durées de vie. Toutefois, vous pouvez créer vos propres visuels et les attacher à un élément WinUI existant via ElementCompositionPreview, ou en les ajoutant à un ConteneurVisual existant quelque part dans la structure de l’arborescence visuelle.

Pour plus d’informations, consultez la vue d’ensemble de l’utilisation de la couche visuelle avec XAML .

Utilisation de votre application de bureau

Vous pouvez utiliser la couche Visuelle pour améliorer l’apparence, l’apparence et les fonctionnalités des applications de bureau Win32 créées avec le Kit de développement logiciel (SDK) d’application Windows, ainsi que les applications de bureau WPF, Windows Forms et C++ Win32. Vous pouvez migrer des îles de contenu pour utiliser la couche Visuelle et conserver le reste de votre 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.

Pour plus d’informations, consultez Moderniser votre application de bureau à l’aide de la couche Visuel.

Différences par rapport à UWP

L’espace de noms Microsoft.UI.Composition permet d’accéder aux fonctionnalités qui sont presque identiques à la couche visuelle UWP (Windows.UI.Composition), dans les scénarios les plus couramment utilisés. Mais il existe des exceptions et des différences.

Obtention d’une instance compositor

Dans les applications de bureau (une application WinUI est une application de bureau), Window.Current est null. Vous ne pouvez donc pas récupérer une instance de Compositeur à partir de Window.Current.Compositor. Dans les applications WinUI, nous vous recommandons d’appeler ElementCompositionPreview.GetElementVisual(UIElement) pour obtenir un Visual de composition, et de récupérer le Compositor à partir de la propriété Compositor du visuel. Dans les cas où vous n'avez pas accès à un UIElement (par exemple, si vous créez un CompositionBrush dans une bibliothèque de classes), vous pouvez appeler CompositionTarget.GetCompositorForCurrentThread.

Contenu externe

Le compositeur Microsoft.UI.Composition s’exécute entièrement dans une application du Kit de développement logiciel (SDK) d’application Windows et n’a accès qu’aux pixels qu’il a dessinés. Cela signifie que tout contenu externe (contenu qui n’a pas été dessiné par le compositeur) est inconnu du compositeur, ce qui crée certaines limitations.

Un exemple de contenu externe est le (Microsoft.UI.Xaml.Controls) MediaPlayerElement. La pile multimédia Windows fournit au code XAML une poignée de chaîne d'échange de média opaque. XAML transmet cette poignée au compositeur, qui la transmet à son tour à Windows (via Windows.UI.Composition) pour qu'il l'affiche. Étant donné que le compositeur ne peut voir aucun des pixels de la chaîne d’échange de média, il ne peut pas le composite dans le cadre du rendu global de la fenêtre. Au lieu de cela, il donne la chaîne d'échange de médias à Windows pour qu'elle soit rendue sous le rendu du compositeur, avec un trou découpé dans le rendu du compositeur afin de permettre à la chaîne d'échange de médias qui se trouve en dessous d'elle d'être visible.

Dans le Kit de développement logiciel (SDK) d’application Windows/WinUI, les API suivantes créent tous du contenu externe :

• MediaPlayerElement
• SwapChainPanel
• WebView2
• MicaBackdrop et DesktopAcrylicBackdrop, ainsi que les MicaController et DesktopAcrylicController sous-jacents qu'ils utilisent.

Le modèle de gestion du contenu externe crée ces limitations :

• Il n’est pas possible d’avoir du contenu compositor derrière le contenu externe. Par exemple, il n’est pas possible de donner à un WebView2 un arrière-plan transparent pour afficher des boutons XAML ou des images derrière celui-ci. Les seules choses qui peuvent se trouver derrière le contenu externe sont d'autres contenus externes et l'arrière-plan de la fenêtre. En conséquence, nous déconseillons/désactivons la transparence pour le contenu externe.
• Il n'est pas possible d'échantillonner le contenu du compositeur à partir d'un contenu externe. Par exemple, AcryliqueBrush n'est pas en mesure d'échantillonner et de flouter les pixels d'un MediaPlayerElement. AcrylicBrush échantillonne l'image du compositeur, qui est transparent noir pour les zones de contenu externes. De même, AcryliqueBrush devant un MicaBackdrop ou DesktopAcrylicBackdrop ne peut voir aucune couleur que ces toiles de fond dessinent. Au contraire, le pinceau floute le noir transparent.
• Un autre scénario connu sous le nom d'inversion de destination est utilisé pour le curseur des contrôles de zone de texte afin d'inverser les pixels devant lesquels se trouve le curseur du texte. Cette fonction d'inversion échantillonne similairement la surface du moteur de composition, et elle sera impactée si la zone de texte ne possède pas d'arrière-plan opaque dessiné par le moteur de composition.
• Étant donné que WinUI SwapChainPanel crée du contenu externe, il ne prend pas en charge la transparence. Il ne prend pas en charge l'application d'AcrylicBrush et d'autres effets qui utilisent un CompositionBackdropBrush devant lui.

Échantillons

Le projet Exemples du Kit de développement logiciel (SDK) d’application Windows inclut un ensemble complet d’exemples de composition qui montrent comment utiliser les API Microsoft.UI.Composition pour créer des expériences visuelles enrichies. Ces exemples couvrent un large éventail de scénarios, de la mise en page de base et des transformations aux effets avancés, à l’éclairage, aux ombres et à la gestion des entrées basées sur InteractionTracker, comme tirer pour actualiser et le défilement parallaxe. Que vous preniez en main la couche Visuelle ou que vous recherchiez des modèles à appliquer dans votre propre application, ces exemples constituent une référence pratique pour voir comment les blocs de construction se rassemblent.

Explorez les exemples sur GitHub : WindowsAppSDK-Samples / SceneGraph.

Rubriques connexes

• Informations de référence sur l’API Microsoft.UI.Composition
• Utilisation de la couche Visual dans les applications de bureau