Share via

Verbessern der Benutzeroberfläche mit der visuellen Ebene (Windows App SDK/WinUI 3)

  • Artikel

Die visuelle Ebene im Windows App SDK/WinUI 3 bietet eine leistungsstarke Retained-Mode-API für Grafiken, Effekte, Animationen und Eingaben. Sie bildet die Grundlage für die sämtliche Benutzeroberflächen auf Windows-Geräten.

Die Typen in Microsoft.UI.Composition bilden die Windows App SDK/WinUI 3-Implementierung der visuellen Ebene. Sie hat große Ähnlichkeit mit der visuellen UWP-Ebene, die im Windows.UI.Composition-Namespace implementiert ist. Die Unterschiede zwischen den beiden und die fehlende Funktionalität aus der visuellen Ebene von Windows App SDK/WinUI 3 Visual Layer sind unten aufgeführt.

Unterschiede zu UWP

Der offensichtlichste Unterschied zwischen Microsoft.UI.Composition und der visuellen UWP-Ebene ist der Namespace. Microsoft.UI.Composition bietet Zugriff auf Funktionen, die in den gängigsten Szenarien nahezu identisch mit denen der visuellen UWP-Ebene sind. Es gibt jedoch Ausnahmen und Unterschiede.

Das Windows App SDK/WinUI 3 verwendet Microsoft.UI.Composition, um eine Struktur einzelner visueller Elemente zu beschreiben. Diese visuellen Elemente werden dann zusammengesetzt, um das vollständige Rendering des Fensters zu erstellen. Es ähnelt sehr der Funktionsweise von Windows.UI.Composition (für UWP-Apps). Ein großer Unterschied besteht jedoch darin, dass der Microsoft.UI.Composition-Compositor vollständig in einer Windows App SDK-App ausgeführt wird; und er hat nur Zugriff auf Pixel, die er gezeichnet hat. Das bedeutet, dass externe Inhalte (Inhalte, die nicht vom Compositor gezeichnet wurden) dem Compositor unbekannt sind. Dies führt zu bestimmten Einschränkungen.

Ein Beispiel für externe Inhalte ist das MediaPlayerElement (Microsoft.UI.Xaml.Controls). Der Windows-Medienstapel stellt XAML einen undurchsichtigen Medien-Swapchain-Ziehpunkt bereit. XAML übergibt diesen Ziehpunkt an den Compositor, der ihn wiederum an Windows (über Windows.UI.Composition) übergibt, um ihn anzuzeigen. Da der Compositor keine der Pixel in der Medien-Swapchain sehen kann, kann er dies nicht als Teil des Gesamtrenderings für das Fenster zusammensetzen. 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. Hier ist eine Visualisierung dieses Setups.

Diagram of rendering external content

Im Allgemeinen ermöglicht der Ansatz externen Inhalten (z. B. Swapchains), Teil des Gesamtrenderings für das Fenster zu sein; und er ermöglicht weiterhin, dass andere vom Compositor gezeichnete Inhalte die externen Inhalte überlappen, z. B. das MediaTransportControls-Rendering von XAML über den Medien. Er lässt jedoch keine erweiterten Effektinteraktionen mit diesen externen Inhalten zu. Dies gilt für alle Ansätze, die zum Einbinden einer Swapchain in eine Ansicht verwendet werden könnten: entweder über XAML (z. B. über SwapChainPanel) oder über Composition (z. B. über ICompositorInterop::CreateCompositionSurfaceForSwapChain).

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

Das oben beschriebene Modell zur Behandlung externer Inhalte erzeugt folgende Einschränkungen:

  • Es ist nicht möglich, Compositor-Inhalte hinter externen Inhalten zu haben (d. a. hinter/unterhalb der externen Ebene(n) im obigen Diagramm). So ist es z. B. nicht möglich, einer WebView2 einen transparenten Hintergrund zuzuweisen, um XAML-Schaltflächen oder -Bilder dahinter sehen zu können. 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 wird aus dem Bild des Compositors abtasten, das für externe Inhaltsbereiche transparent schwarz ist. Somit zeichnet AcrylicBrush das transparente Schwarz weich. Ebenso kann AcrylicBrush vor einem MicaBackdrop oder DesktopAcrylicBackdrop keine Farben sehen, die diese Hintergründe zeichnen. Stattdessen zeichnet der Pinsel das transparente Schwarz weich.
  • 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. Diese Umkehrung tastet auf ähnliche Weise die Compositor-Oberfläche ab und wird beeinflusst, wenn das Textfeld keinen undurchsichtigen Hintergrund aufweist, der vom Compositor gezeichnet wird.
  • Da das WinUI 3 SwapChainPanel externe Inhalte erstellt, unterstützt es keine Transparenz. Und es unterstützt auch nicht das Anwenden von AcrylicBrush und anderen Effekten davor, die einen CompositionBackdropBrush verwenden. AcrylicBrush und diese anderen CompositionBackdropBrush-basierten Effekte können nicht aus einem SwapChainPanel abtasten.
  • In Desktop-Apps (eine WinUI 3-App ist eine Desktop-App) ist Window.Currentnull. Sie können also keine Instanz von Compositor aus Window.Current.Compositor abrufen. In XAML-Apps (sowohl WinUI 3 als auch UWP) wird empfohlen, ElementCompositionPreview.GetElementVisual(UIElement) aufzurufen, um einen zusammengesetzten visuellen Inhalt und die Compositor aus der Compositor-Eigenschaft des visuellen Inhalts 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.

Weitere Informationen zur visuellen Ebene finden Sie in der Übersicht über die visuelle Ebene in der UWP-Dokumentation. In den meisten Fällen gelten die Dokumentationen und Beispiele auch für Microsoft.UI.Composition.

Voraussetzungen für die Verwendung von Microsoft.UI.Composition

So verwenden Sie Microsoft.UI.Composition-APIs im Windows App SDK/WinUI 3:

  1. Laden Sie das neueste experimentelle Release des Windows App SDK herunter und installieren Sie es. Weitere Informationen finden Sie unter Installieren von Tools für das Windows App SDK.
  2. Befolgen Sie dann die Anweisungen zum Erstellen Ihres ersten WinUI 3-Projekts oder zum Verwenden des Windows App SDK in einem vorhandenen Projekt.

Weitere Informationen zur Verfügbarkeit von Microsoft.UI.Composition im Windows App SDK/WinUI 3 finden Sie in den Release-Kanälen.

Wir haben die Windows Composition-Beispielgalerie aktualisiert, sodass diese jetzt von den Windows App SDK Composition-APIs abhängig ist. Besuchen Sie WindowsCompositionSamples, um die Microsoft.UI.Composition-APIs in Aktion zu sehen.

app gif