Visuelle EbeneVisual layer

Die visuelle Schicht bietet eine leistungsstarke API für den beibehaltenen Modus für Grafiken, Effekte und Animationen und bildet die Grundlage für alle Benutzeroberflächen auf Windows-Geräten.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.Sie definieren die Benutzeroberfläche auf deklarative Weise, und die visuelle Schicht basiert auf der Beschleunigung der Grafikhardware, um sicherzustellen, dass Ihre Inhalte, Effekte und Animationen unabhängig vom UI-Thread der APP nahtlos und problemlos gerendert werden. 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.

Wichtige Highlights:Notable highlights:

  • Vertraute WinRT-APIsFamiliar WinRT APIs
  • Architektur für eine dynamischere Benutzeroberfläche und InteraktionenArchitected for more dynamic UI and interactions
  • Konzepte, die mit Entwurfs Tools ausgerichtet sindConcepts aligned with design tools
  • Lineare Skalierbarkeit ohne plötzliche Leistungs KlippenLinear scalability with no sudden performance cliffs

Ihre Windows UWP-Apps verwenden bereits die visuelle Schicht über eines der Benutzeroberflächen-Frameworks.Your Windows UWP apps are already using the Visual layer via one of the UI frameworks. Sie können die visuelle Schicht auch direkt für benutzerdefiniertes Rendering, Effekte und Animationen nutzen, mit sehr geringem Aufwand.You can also take advantage of Visual layer directly for custom rendering, effects and animations with very little effort.

UI-Framework-Schichten: die Frameworkebene (Windows. UI. XAML) basiert auf der visuellen Ebene (Windows. UI. Composition), die auf der Grafik Schicht (DirectX) basiert.

Was ist in der visuellen Schicht?What's in the Visual layer?

Die primären Funktionen der visuellen Ebene sind:The primary functions of the Visual layer are:

  1. Inhalt: Lightweight Zusammensetzung of Custom Drawn ContentContent: Lightweight compositing of custom drawn content
  2. Effekte: echt Zeiteffekte der Benutzeroberflächen Effekte, deren Effekte animiert, verkettet und angepasst werden könnenEffects: Real-time UI effects system whose effects can be animated, chained and customized
  3. Animationen: ausdrucksstarke, Framework-agnostische Animationen, die unabhängig vom UI-Thread ausgeführt werdenAnimations: Expressive, framework-agnostic animations running independent of the UI thread

InhaltContent

Der Inhalt wird gehostet, transformiert und zur Verwendung durch das Animations-und Effekte System mithilfe von visuellen Elementen zur Verfügung gestellt.Content is hosted, transformed and made available for use by the animation and effects system using visuals. An der Basis der Klassenhierarchie befindet sich die visuelle Klasse, ein schlanker Thread-Agile-Proxy im App-Prozess für den visuellen Zustand im Compositor.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. Zu den untergeordneten Klassen von Visual gehört  ContainerVisual , damit untergeordnete Elemente Strukturen von visuellen Elementen und spritevisual erstellen können, die Inhalte enthalten und entweder mit voll Tonfarben, mit benutzerdefiniertem gezeichneten Inhalt oder mit visuellen Effekten gezeichnet werden können.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. Diese visuellen Typen bilden gemeinsame Struktur der visuellen Struktur für die 2D-Benutzeroberfläche und die meisten sichtbaren XAML-Frameworkelemente.Together, these Visual types make up the visual tree structure for 2D UI and back most visible XAML FrameworkElements.

Weitere Informationen finden Sie unter Übersicht über die Komposition .For more information, see the Composition Visual overview.

EffekteEffects

Mit dem Effects-System in der visuellen Schicht können Sie eine Kette von Filter-und Transparenz Effekten auf ein visuelles Element oder eine visuelle Struktur anwenden.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. Dabei handelt es sich um ein System mit Benutzeroberflächen Effekten, das nicht mit Bild-und Medien Effekten verwechselt werden kann.This is a UI effects system, not to be confused with image and media effects. Effekte funktionieren in Verbindung mit dem Animationssystem, sodass Benutzer Smooth-und dynamische Animationen von Effekt Eigenschaften erreichen können, die unabhängig vom UI-Thread gerendert werden.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. Effekte in der visuellen Ebene bieten die kreativen Bausteine, die kombiniert und animiert werden können, um maßgeschneiderte und interaktive Benutzeroberflächen zu erstellen.Effects in the Visual Layer provide the creative building blocks that can be combined and animated to construct tailored and interactive experiences.

Zusätzlich zu den animier baren Effektketten unterstützt die visuelle Schicht auch ein Beleuchtungsmodell, das visuellen Elementen das imitieren von Materialeigenschaften ermöglicht, indem Sie auf animier Bare Leuchten antwortet.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. Visuelle Elemente können auch Schatten umwandeln.Visuals may also cast shadows. Beleuchtung und Schatten können kombiniert werden, um einen Eindruck von Tiefe und Realismus zu schaffen.Lighting and shadows can be combined to create a perception of depth and realism.

Weitere Informationen finden Sie in der Übersicht Kompositionseffekte.For more information, see the Composition Effects overview.

AnimationenAnimations

Das Animationssystem in der visuellen Ebene ermöglicht Ihnen das Verschieben von visuellen Elementen, das Animieren von Effekten und das Steuern von Transformationen, Clips und anderen Eigenschaften.The animation system in the Visual layer lets you move visuals, animate effects, and drive transformations, clips, and other properties.Dabei handelt es sich um ein Framework-agnostisches System, das von Grund auf im Hinblick auf die Leistung entworfen wurde.  It is a framework agnostic system that has been designed from the ground up with performance in mind.Sie wird unabhängig vom UI-Thread ausgeführt, um glätbarkeit und Skalierbarkeit zu gewährleisten.  It runs independently from the UI thread to ensure smoothness and scalability.Obwohl Sie mit Ihnen vertraute Keyframe-Animationen verwenden können, um Eigenschafts Änderungen im Laufe der Zeit zu steuern, können Sie auch mathematische Beziehungen zwischen verschiedenen Eigenschaften einrichten, einschließlich der Benutzereingaben, sodass Sie nahtlose, choreographte Umgebungen direkt erstellen können.  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.

Weitere Informationen finden Sie in der Übersicht Kompositionsanimationen.For more information, see the Composition animations overview.

Arbeiten mit ihrer XAML-UWP-AppWorking with your XAML UWP app

Mithilfe der elementcompositionpreview -Klasse in Windows. UI. XAML. Hostingkönnen Sie zu einem vom XAML-Framework erstellten visuellen Element gelangen und ein sichtbares FrameworkElement-Element unterstützen.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. Beachten Sie, dass die für Sie durch das Framework erstellten Visualisierungen einige Beschränkungen für die Anpassung haben.Note that Visuals created for you by the framework come with some limits on customization. Dies liegt daran, dass das Framework Offsets, Transformationen und Lebens dauern verwaltet.This is because the framework is managing offsets, transforms and lifetimes. Sie können jedoch eigene Visualisierungen erstellen und Sie über elementcompositionpreview an ein vorhandenes XAML-Element anfügen, oder indem Sie es einer vorhandenen containervisualisierung irgendwo in der visuellen Struktur hinzufügen.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.

Weitere Informationen finden Sie in der Übersicht über das Verwenden der visuellen Ebene mit XAML .For more information, see the Using the Visual layer with XAML overview.

Arbeiten mit ihrer Desktop-AppWorking with your desktop app

Mithilfe der visuellen Ebene können Sie das Aussehen, das Gefühl und die Funktionalität Ihrer WPF-, Windows Forms-und C++ Win32-Desktop-Apps verbessern.You can use the Visual layer to enhance the look, feel, and functionality of your WPF, Windows Forms, and C++ Win32 desktop apps. Sie können Inhalts Inseln migrieren, um die visuelle Schicht zu verwenden, und den Rest der Benutzeroberfläche im vorhandenen Framework beibehalten.You can migrate islands of content to use the Visual layer and keep the rest of your UI in its existing framework. So kannst du erhebliche Updates und Verbesserungen an der Benutzeroberfläche deiner Anwendung vornehmen, ohne die vorhandene Codebasis umfassend ändern zu müssen.This means you can make significant updates and enhancements to your application UI without needing to make extensive changes to your existing code base.

Weitere Informationen finden Sie unter Modernize your desktop app using the Visual layer (Modernisieren Ihrer Desktop-App über die visuelle Ebene).For more information, see Modernize your desktop app using the Visual layer.

Zusätzliche RessourcenAdditional resources