Couche visuelleVisual layer

La couche visuelle fournit une API haute performance, en mode mémorisé pour les graphiques, les effets et les animations, et constitue la base de toute l’interface utilisateur sur les appareils Windows.The Visual layer provides a high performance, retained-mode API for graphics, effects and animations, and is the foundation for all UI across Windows devices.Vous définissez votre interface utilisateur de façon déclarative et la couche visuelle s’appuie sur l’accélération matérielle graphique pour s’assurer que le contenu, les effets et les animations sont rendus de manière lisse et sans problème, indépendamment du thread d’interface utilisateur de l’application. You define your UI in a declarative manner and the Visual layer relies on graphics hardware acceleration to ensure your content, effects and animations are rendered in a smooth, glitch-free manner independent of the app's UI thread.

Principales mises en évidence :Notable highlights:

  • API WinRT familièresFamiliar WinRT APIs
  • Conçu pour une interface utilisateur et des interactions plus dynamiquesArchitected for more dynamic UI and interactions
  • Concepts alignés avec les outils de conceptionConcepts aligned with design tools
  • Évolutivité linéaire sans falaise soudaine sur les performancesLinear scalability with no sudden performance cliffs

Vos applications UWP Windows utilisent déjà la couche visuelle via l’un des frameworks d’interface utilisateur.Your Windows UWP apps are already using the Visual layer via one of the UI frameworks. Vous pouvez également tirer parti de la couche visuelle directement pour le rendu personnalisé, les effets et les animations avec très peu d’efforts.You can also take advantage of Visual layer directly for custom rendering, effects and animations with very little effort.

Superposition d’infrastructure d’interface utilisateur : la couche d’infrastructure (Windows. UI. XAML) repose sur la couche visuelle (Windows. UI. composition) qui repose sur la couche Graphics (DirectX).

Contenu de la couche visuelleWhat's in the Visual layer?

Les fonctions principales de la couche visuelle sont les suivantes :The primary functions of the Visual layer are:

  1. Contenu: composition légère de contenu dessiné personnaliséContent: Lightweight compositing of custom drawn content
  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ésEffects: Real-time UI effects system whose effects can be animated, chained and customized
  3. Animations: animations expressifs et non indépendantes de l’infrastructure s’exécutant indépendamment du thread d’interface utilisateurAnimations: Expressive, framework-agnostic animations running independent of the UI thread

ContenuContent

Le contenu est hébergé, transformé et rendu disponible pour être utilisé par le système d’animation et d’effets à l’aide d’éléments visuels.Content is hosted, transformed and made available for use by the animation and effects system using visuals. À la base de la hiérarchie de classes se trouve la classe Visual , un proxy léger thread-agile dans le processus d’application pour l’état visuel dans le compositeur.At the base of the class hierarchy is the Visual class, a lightweight, thread-agile proxy in the app process for visual state in the compositor. Les sous-classes de Visual incluent  ContainerVisual pour permettre aux enfants de créer des arborescences d’éléments visuels et SpriteVisual qui contiennent du contenu et qui peuvent être peints avec des couleurs unies, du contenu dessiné personnalisé ou des effets visuels.Sub-classes of Visual include  ContainerVisual to allow for children to create trees of visuals and SpriteVisual that contains content and can be painted with either solid colors, custom drawn content or visual effects. Ensemble, ces types d’éléments visuels composent la structure de l’arborescence visuelle pour l’interface utilisateur 2D et les FrameworkElement XAML les plus visibles.Together, these Visual types make up the visual tree structure for 2D UI and back most visible XAML FrameworkElements.

Pour plus d’informations, consultez vue d’ensemble visuelle de la composition .For more information, see the Composition Visual overview.

Effects (Effets)Effects

Le système Effects de la couche visuelle vous permet d’appliquer une chaîne d’effets de filtre et de transparence à un visuel ou à une arborescence d’éléments visuels.The Effects system in the Visual layer lets you apply a chain of filter and transparency effects to a Visual or a tree of Visuals. Il s’agit d’un système d’effets d’interface utilisateur, à ne pas confondre avec les effets d’image et de support.This is a UI effects system, not to be confused with image and media effects. Les effets fonctionnent conjointement avec le système d’animation, permettant aux utilisateurs d’obtenir des animations lisses et dynamiques des propriétés d’effet, rendues indépendantes du thread d’interface utilisateur.Effects work in conjunction with the Animation system, allowing users to achieve smooth and dynamic animations of Effect properties, rendered independent of the UI thread. Les effets de 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.Effects in the Visual Layer provide the creative building blocks that can be combined and animated to construct tailored and interactive experiences.

En plus des chaînes d’effet pouvant être animées, la couche visuelle prend également en charge un modèle d’éclairage qui permet aux visuels de simuler des propriétés de matériau en répondant aux lumières pouvant être animées.In addition to animatable effect chains, the Visual Layer also supports a lighting model that allows Visuals to mimic material properties by responding to animatable lights. Les visuels peuvent également converser des ombres.Visuals may also cast shadows. L’éclairage et les ombres peuvent être combinés pour créer une perception de la profondeur et du réalisme.Lighting and shadows can be combined to create a perception of depth and realism.

Pour plus d’informations, consultez la vue d’ensemble Effets de composition.For more information, see the Composition Effects overview.

AnimationsAnimations

Le système d’animation de la couche visuelle vous permet de déplacer des éléments visuels, d’animer des effets et de générer des transformations, des clips et d’autres propriétés.The animation system in the Visual layer lets you move visuals, animate effects, and drive transformations, clips, and other properties.Il s’agit d’un système agnostique du cadre qui a été conçu dès le départ, avec des performances à l’esprit.  It is a framework agnostic system that has been designed from the ground up with performance in mind.Il s’exécute indépendamment du thread d’interface utilisateur pour assurer la fluidité et l’évolutivité.  It runs independently from the UI thread to ensure smoothness and scalability.Bien qu’il vous permette d’utiliser des animations d’image clé familières pour piloter les modifications de propriétés dans le temps, il vous permet également de définir des relations mathématiques entre différentes propriétés, y compris les entrées utilisateur, vous permettant de créer directement des expériences chorégraphiés transparents.  While it lets you use familiar KeyFrame animations to drive property changes over time, it also lets you set up mathematical relationships between different properties, including user input, letting you directly craft seamless choreographed experiences.

Pour plus d’informations, consultez la vue d’ensemble Animations de composition.For more information, see the Composition animations overview.

Utilisation de votre application UWP XAMLWorking with your XAML UWP app

Vous pouvez accéder à un visuel créé par l’infrastructure XAML, et en sauvegardant un FrameworkElement visible, à l’aide de la classe ElementCompositionPreview dans Windows. UI. Xaml. Hosting.You can get to a Visual created by the XAML framework, and backing a visible FrameworkElement, using the ElementCompositionPreview class in Windows.UI.Xaml.Hosting. Notez que les visuels créés pour vous par l’infrastructure sont fournis avec des limites de personnalisation.Note that Visuals created for you by the framework come with some limits on customization. Cela est dû au fait que le Framework gère les décalages, les transformations et les durées de vie.This is because the framework is managing offsets, transforms and lifetimes. Vous pouvez toutefois créer vos propres visuels et les attacher à un élément XAML existant via ElementCompositionPreview, ou en les ajoutant à un ContainerVisual existant dans l’arborescence d’éléments visuels.You can however create your own Visuals and attach them to an existing XAML element via ElementCompositionPreview, or by adding it to an existing ContainerVisual somewhere in the visual tree structure.

Pour plus d’informations, consultez la vue d’ensemble de l' utilisation de la couche visuelle avec XAML .For more information, see the Using the Visual layer with XAML overview.

Utilisation de votre application de bureauWorking with your desktop app

Vous pouvez utiliser la couche visuelle pour améliorer l’apparence, la convivialité et les fonctionnalités de vos applications de bureau WPF, Windows Forms et C++ Win32.You can use the Visual layer to enhance the look, feel, and functionality of your WPF, Windows Forms, and C++ Win32 desktop apps. Vous pouvez migrer des îlots de contenu pour utiliser la couche visuelle et conserver le reste de l’interface utilisateur dans son infrastructure existante.You can migrate islands of content to use the Visual layer and keep the rest of your UI in its existing framework. 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.This means you can make significant updates and enhancements to your application UI without needing to make extensive changes to your existing code base.

Pour plus d’informations, consultez Moderniser votre application de bureau à l’aide de la couche Visuel.For more information, see Modernize your desktop app using the Visual layer.

Ressources supplémentairesAdditional resources