Freigeben über

Übersicht über die visuelle Ebene

Die Visual Layer bietet eine leistungsstarke API im Beibehaltungsmodus für Grafiken, Effekte und Animationen und bildet die Grundlage für das gesamte UI auf Windows-Geräten. Sie definieren Ihre Benutzeroberfläche deklarativ, und die visuelle Ebene basiert auf der Grafikhardwarebeschleunigung, um sicherzustellen, dass Ihre Inhalte, Effekte und Animationen reibungslos und glitchfrei gerendert werden, unabhängig vom UI-Thread der App.

Die Typen in Microsoft.UI.Composition bilden die Windows App SDK/WinUI 3-Implementierung der visuellen Ebene.

Wichtige Highlights:

  • Vertraute WinRT-APIs
  • Architektonisch gestaltet für dynamischere UI und Interaktionen
  • Auf Design-Tools ausgerichtete Konzepte
  • Lineare Skalierbarkeit ohne plötzliche Leistungsklippen

Ihre WinUI- und Windows App SDK-Apps verwenden bereits die visuelle Ebene über eines der UI-Frameworks. Sie können auch die visuelle Ebene direkt für benutzerdefiniertes Rendering, Effekte und Animationen mit nur geringem Aufwand nutzen.

Layering des UI-Frameworks: Die Frameworkebene (Microsoft.UI.Xaml) basiert auf der visuellen Ebene (Microsoft.UI.Composition), die auf der Grafikebene (DirectX) basiert.

Was befindet sich auf der visuellen Ebene?

Die wichtigsten Funktionen der visuellen Ebene sind:

  1. Inhalt: Einfaches Kompositing von benutzerdefinierten gezeichneten Inhalten
  2. Effekte: Echtzeit-UI-Effektsystem, dessen Effekte animiert, verkettet und angepasst werden können
  3. Animationen: Ausdrucksstarke, frameworkagnostische Animationen, die unabhängig vom UI-Thread ausgeführt werden

Content

Inhalte werden mit visuellen Elementen gehostet, transformiert und zur Verwendung durch das Animations- und Effektsystem zur Verfügung gestellt. Auf der untersten Ebene der Klassenhierarchie befindet sich die Visual-Klasse, ein einfacher, ressourcenschonender, thread-agiler Proxy im App-Prozess für den visuellen Zustand im Kompositor. Unterklassen von Visual umfassen ContainerVisual, mit dem hierarchische Strukturen bestehend aus visuellen Elementen erstellt werden können, und SpriteVisual, das Inhalte enthält und mit Volltonfarben, benutzerdefinierten Inhalten oder visuellen Effekten gestaltet werden kann. Zusammen bilden diese visuellen Typen den visuellen Baum für die 2D-Benutzeroberflächenstruktur und die sichtbaren XAML-FrameworkElemente.

Weitere Informationen finden Sie in der Übersicht über visuelle Kompositionen .

Effekte

Mit dem Effektsystem auf der Visuellen Ebene können Sie eine Kette von Filter- und Transparenzeffekten auf ein Visual oder einen Baum von Visuals anwenden. Dies ist ein Benutzeroberflächeneffektesystem, das nicht mit Bild- und Medieneffekten verwechselt werden soll. Effekte funktionieren in Verbindung mit dem Animationssystem, sodass Benutzer reibungslose und dynamische Animationen von Effekteigenschaften erzielen können, die unabhängig vom UI-Thread gerendert werden. Effekte in der visuellen Ebene bieten die kreativen Bausteine, die kombiniert und animiert werden können, um maßgeschneiderte und interaktive Oberflächen zu erstellen.

Zusätzlich zu animierbaren Effektketten unterstützt die Visuelle Ebene auch ein Beleuchtungsmodell, mit dem Visuelle Materialeigenschaften nachahmen können, indem sie auf animierbare Lichter reagieren. Visuelle Elemente können auch Schatten werfen. Licht und Schatten können kombiniert werden, um eine Wahrnehmung von Tiefe und Realismus zu schaffen.

Weitere Informationen finden Sie in der Übersicht über Kompositionseffekte .

Animationen

Mit dem Animationssystem in der Visualisierungsebene können Sie visuelle Darstellungen bewegen, Effekte animieren sowie Transformationen, Clips und andere Eigenschaften steuern. Es handelt sich um ein frameworkagnostisches System, das von Grund auf mit Blick auf die Leistung entworfen wurde. Sie wird unabhängig vom UI-Thread ausgeführt, um die Gleichmäßigkeit und Skalierbarkeit sicherzustellen. Sie können zwar vertraute Keyframeanimationen verwenden, um Eigenschaftsänderungen im Laufe der Zeit voranzutreiben, sie können aber auch mathematische Beziehungen zwischen verschiedenen Eigenschaften einrichten, einschließlich Benutzereingaben, sodass Sie nahtlose choreographierte Oberflächen direkt erstellen können.

Weitere Informationen finden Sie in der Übersicht über Kompositionsanimationen .

Arbeiten mit WinUI-XAML

Mit der ElementCompositionPreview-Klasse in Microsoft.UI.Xaml.Hosting können Sie zu einem vom XAML-Framework erstellten Visual gelangen und ein sichtbares FrameworkElement unterstützen. Beachten Sie, dass Visuals, die durch das Framework erstellt wurden, einige Grenzen bei der Anpassung haben. Dies liegt daran, dass das Framework Offsets, Transformationen und Lebensdauer verwaltet. Sie können jedoch Ihre eigenen Visuals erstellen und sie über ElementCompositionPreview an ein vorhandenes WinUI-Element anfügen oder sie einem vorhandenen ContainerVisual innerhalb der visuellen Baumstruktur hinzufügen.

Weitere Informationen finden Sie in der Übersicht über die Verwendung der visuellen Ebene mit XAML .

Arbeiten mit Ihrer Desktop-App

Sie können die visuelle Ebene verwenden, um das Erscheinungsbild und die Funktionalität von Win32-Desktop-Apps zu verbessern, die mit dem Windows App SDK erstellt wurden, sowie WPF-, Windows Forms- und C++-Win32-Desktop-Apps. Sie können Inhaltsinseln migrieren, um die visuelle Ebene zu verwenden und die restliche Benutzeroberfläche im vorhandenen Framework beizubehalten. Dies bedeutet, dass Sie erhebliche Aktualisierungen und Verbesserungen an ihrer Anwendungsbenutzeroberfläche vornehmen können, ohne umfangreiche Änderungen an Ihrer vorhandenen Codebasis vornehmen zu müssen.

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

Unterschiede zu UWP

Der Microsoft.UI.Composition-Namespace bietet Zugriff auf Funktionen, die nahezu identisch mit der visuellen UWP-Ebene (Windows.UI.Composition) in den am häufigsten verwendeten Szenarien sind. Es gibt jedoch Ausnahmen und Unterschiede.

Abrufen einer Kompositorinstanz

In Desktop-Apps (eine WinUI-App ist eine Desktop-App) ist Window.Currentnull. Sie können also keine Instanz von Compositor aus Window.Current.Compositor abrufen. In WinUI-Apps wird empfohlen, ElementCompositionPreview.GetElementVisual(UIElement) aufzurufen, um ein Composition-Visual abzurufen und die Compositor aus der Compositor-Eigenschaft des Visuals abzurufen. In Fällen, in denen Sie keinen Zugriff auf ein UIElement haben (z. B. wenn Sie einen CompositionBrush in einer Klassenbibliothek erstellen), können Sie CompositionTarget.GetCompositorForCurrentThread aufrufen.

Externer Inhalt

Der Microsoft.UI.Composition-Kompositor wird vollständig in einer Windows App SDK-App ausgeführt und hat nur Zugriff auf Pixel, die es gezeichnet hat. Dies bedeutet, dass externe Inhalte (Inhalte, die nicht vom Kompositor gezeichnet wurden) für den Kompositor unbekannt sind, der bestimmte Einschränkungen verursacht.

Ein Beispiel für externe Inhalte ist das MediaPlayerElement (Microsoft.UI.Xaml.Controls). Der Windows Media-Stack stellt XAML einen undurchsichtigen Media-Swap-Kette-Handle bereit. XAML übergibt diesen Handle an den Compositor, der ihn wiederum an Windows (über Windows.UI.Composition) übergibt, um es anzuzeigen. Da der Compositor keine Pixel in der Medien-Swap-Chain sehen kann, kann er diese nicht in das Gesamtrendering des Fensters einfügen. Stattdessen übergibt er die Medien-Swapchain an Windows, um sie unter dem Rendering des Compositors zu rendern, wobei ein Loch aus dem Rendering des Compositors ausgeschnitten wird, um die Medien-Swapchain darunter sichtbar zu machen.

Diagramm des Renderns externer Inhalte

Im Windows App SDK/WinUI erstellen die folgenden APIs alle externen Inhalte:

Das Modell der Behandlung externer Inhalte erstellt diese Einschränkungen:

  • Es ist nicht möglich, Kompositorinhalte hinter externen Inhalten zu haben. Beispielsweise ist es nicht möglich, einem WebView2 einen transparenten Hintergrund zuzuweisen, um XAML-Schaltflächen oder Bilder dahinter anzuzeigen. Die einzigen Elemente, die sich hinter externen Inhalten befinden können, sind andere externe Inhalte und der Fensterhintergrund. Aus diesem Grund raten wir von Transparenz für externe Inhalte ab bzw. deaktivieren sie.
  • Es ist nicht möglich, Compositor-Inhaltsbeispiele aus externen Inhalten zu verwenden. AcrylicBrush kann z. B. keine Pixel aus einem MediaPlayerElement abtasten und weichzeichnen. AcrylicBrush tastet das Bild des Compositors ab, das für externe Inhaltsbereiche ein transparentes Schwarz aufweist. Ebenso kann AcrylicBrush vor einem MicaBackdrop oder DesktopAcrylicBackdrop keine der Farben erkennen, die von diesen Hintergründen dargestellt werden. Stattdessen wird der Pinsel das transparente Schwarz verschwimmen lassen.
  • Ein weiteres Szenario wird als Zielinvertierungbezeichnet, das für den Textcursor von Textfeld-Steuerelementen verwendet wird, um die Pixel umzukehren, vor denen sich der Einfüge-Textcursor befindet. Das Invertieren tastet auf ähnliche Weise die Oberfläche des Compositors ab und wird beeinflusst, wenn das Textfeld keinen undurchsichtigen Hintergrund aufweist, der vom Compositor gezeichnet wird.
  • Da das WinUI SwapChainPanel externe Inhalte erstellt, unterstützt es keine Transparenz. Und es unterstützt auch nicht das Anwenden von AcrylicBrush und anderen Effekten, die vor ihm einen CompositionBackdropBrush verwenden.

Beispiele

Das Windows App SDK Samples-Projekt enthält eine umfassende Reihe von Kompositionsbeispielen, die veranschaulichen, wie Sie die Microsoft.UI.Composition-APIs verwenden, um umfassende visuelle Erfahrungen zu erstellen. Diese Beispiele umfassen eine vielzahl von Szenarien – von grundlegenden Layouts und Transformationen bis hin zu erweiterten Effekten, Beleuchtung, Schatten und InteractionTracker-basierten Eingabebehandlung wie Pull-to-Refresh und Parallax-Bildlauf. Unabhängig davon, ob Sie mit der visuellen Ebene beginnen oder nach Mustern suchen, die in Ihrer eigenen App angewendet werden sollen, sind diese Beispiele eine praktische Referenz, um zu sehen, wie die Bausteine zusammenkommen.

Erkunden Sie die Beispiele auf GitHub: WindowsAppSDK-Samples / SceneGraph.

App-GIF

  • Last updated on