Verwenden der visuellen Ebene in Desktop-Apps

Sie können jetzt Windows-Runtime-APIs in Nicht-UWP-Desktopanwendungen verwenden, um das Aussehen, Verhalten und die Funktionalität Ihrer WPF, Windows Forms- und C++-Win32-Anwendungen zu verbessern und die neuesten Windows UI-Features zu nutzen, die nur über UWP verfügbar sind.

In vielen Szenarien können Sie XAML-Inseln verwenden, um Ihrer App moderne XAML-Steuerelemente hinzuzufügen. Wenn Sie jedoch benutzerdefinierte Oberflächen erstellen müssen, die über die integrierten Steuerelemente hinausgehen, können Sie auf die Visuellen Layer-APIs zugreifen.

Die Visual Layer bietet eine leistungsstarke API im behaltenen Modus für Grafiken, Effekte und Animationen. Dies ist die Grundlage für die Benutzeroberfläche auf Windows Geräten. UWP-XAML-Steuerelemente basieren auf der visuellen Ebene und ermöglichen viele Aspekte des Fluent Design Systems, z. B. Licht, Tiefe, Bewegung, Material und Skalierung.

Kurzes Video mit einer Benutzeroberfläche, die mit der visuellen Ebene erstellt wurde.

Mit der visuellen Ebene erstellte Benutzeroberfläche

Erstellen einer visuell ansprechenden Benutzeroberfläche in einer beliebigen Windows App

Mit der visuellen Ebene können Sie ansprechende Oberflächen erstellen, indem Sie einfache Kompositing von benutzerdefinierten gezeichneten Inhalten (visuelle Elemente) und leistungsstarke Animationen, Effekte und Manipulationen auf diese Objekte in Ihrer Anwendung anwenden. Die visuelle Ebene ersetzt kein vorhandenes Benutzeroberflächenframework; Stattdessen ist es eine wertvolle Ergänzung zu diesen Frameworks.

Sie können die visuelle Ebene verwenden, um Ihrer Anwendung ein einzigartiges Aussehen und Verhalten zu verleihen und eine Identität festzulegen, die sie von anderen Anwendungen unterscheidet. Darüber hinaus fördert es die Anwendung der Fluent Design-Prinzipien, die Ihre Anwendungen benutzerfreundlicher machen und mehr Benutzerengagement fördern. Sie können es beispielsweise verwenden, um visuelle Hinweise und animierte Bildschirmübergänge zu erstellen, die Beziehungen zwischen Elementen auf dem Bildschirm anzeigen.

Features der visuellen Ebene

Bürsten

Mit Kompositionspinsel können Sie UI-Objekte mit Volltonfarben, Farbverläufen, Bildern, Videos, komplexen Effekten usw. zeichnen.

Ein Ei, das mit Material Creator geschaffen wurde

Ein Ei, das mit der Material Creator Demo-App erstellt wurde.

Effekte

Kompositionseffekte umfassen Licht, Schatten und eine Liste von Filtereffekten. Sie können animiert, angepasst und verkettet werden und anschließend direkt auf visuelle Elemente angewendet werden. Die SceneLightingEffect kann mit Kompositionsbeleuchtung kombiniert werden, um Atmosphäre, Tiefe und Materialien zu schaffen.

Licht und Material

Die Verwendung von Lichtern und Materialien wird im Windows UI Composition Sample Gallery demonstriert.

Animationen

Kompositionsanimationen werden direkt im Kompositorprozess ausgeführt, unabhängig vom UI-Thread. Dadurch wird die Gleichmäßigkeit und Skalierung sichergestellt, sodass Sie eine große Anzahl gleichzeitiger, expliziter Animationen ausführen können. Zusätzlich zu vertrauten Keyframeanimationen zum Steuern von Eigenschaftsänderungen im Laufe der Zeit können Sie Ausdrücke verwenden, um mathematische Beziehungen zwischen verschiedenen Eigenschaften einzurichten, einschließlich Der Benutzereingabe. Mit eingabegesteuerten Animationen können Sie eine Benutzeroberfläche erstellen, die dynamisch und flüssig auf Benutzereingaben reagiert, was zu einer höheren Benutzerbindung führen kann.

Kurzes Video einer anderen Benutzeroberfläche, die mit der visuellen Ebene erstellt wurde.

Die Bewegung wird im Beispielkatalog der Windows UI-Komposition gezeigt.

Halten Sie Ihre vorhandene Codebasis, und übernehmen Sie sie inkrementell

Der Code in Ihren vorhandenen Anwendungen stellt eine erhebliche Investition dar, die Sie nicht verlieren möchten. 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.

Beispiele und Anleitungen

Erfahren Sie, wie Sie die visuelle Ebene in Ihren Anwendungen verwenden, indem Sie mit unseren Beispielen experimentieren. Diese Beispiele und Lernprogramme helfen Ihnen bei den ersten Schritten mit der visuellen Ebene und zeigen Ihnen, wie Features funktionieren.

Win32

Windows Forms

WPF

Einschränkungen

Viele Visual Layer-Features funktionieren zwar genauso, wenn sie in einer Desktopanwendung wie in einer UWP-App gehostet werden, einige Features weisen Jedoch Einschränkungen auf. Hier sind einige der Einschränkungen, die Sie beachten müssen:

  • Effektketten basieren auf Win2D für die Effektbeschreibungen. Das Win2D NuGet-Paket wird in Desktopanwendungen nicht unterstützt. Daher müssen Sie es aus dem code source neu kompilieren.
  • Um Treffertests durchzuführen, müssen Sie Grenzberechnungen anstellen, indem Sie den visuellen Baum selbst durchlaufen. Dies ist identisch mit der visuellen Ebene in UWP, außer in diesem Fall gibt es kein XAML-Element, an das Sie für Treffertests problemlos binden können.
  • Die visuelle Ebene verfügt nicht über einen Grundtyp zum Rendern von Text.
  • Wenn zwei verschiedene UI-Technologien zusammen eingesetzt werden, z. B. WPF und die Visualisierungsebene, sind sie jeweils für das Zeichnen eigener Pixel auf dem Bildschirm verantwortlich und können keine Pixel teilen. Daher wird der Inhalt der visuellen Ebene immer über anderen UI-Inhalten gerendert. (Dies wird als Luftraumproblem bezeichnet.) Möglicherweise müssen Sie zusätzliche Codierungen und Tests durchführen, um sicherzustellen, dass die Größe des visuellen Layerinhalts mit der Hostbenutzeroberfläche geändert wird und andere Inhalte nicht verdeckt werden.
  • Inhalte, die in einer Desktopanwendung gehostet werden, passen sich nicht automatisch an DPI-Anpassungen an. Zusätzliche Schritte sind möglicherweise erforderlich, um sicherzustellen, dass Ihre Inhalte DPI-Änderungen behandeln. (Weitere Informationen finden Sie in den plattformspezifischen Lernprogrammen.)

Zusätzliche Ressourcen

API-Referenz

  • Last updated on