Materialien in Windows-Apps

Materialien sind visuelle Effekte, die auf UI-Oberflächen angewendet werden, um Tiefe, Hierarchie und visuelles Interesse zu schaffen. WinUI 3 bietet vier Mechanismen zum Anwenden von Materialien, die jeweils für ein anderes Szenario geeignet sind.

Wichtig

AcrylicBrush ist nur In-App-Acryl – er weicht XAML-Inhalte innerhalb des App-Fensters. Der Desktop oder andere Fenster hinter der App werden nicht angezeigt. Für Desktop-See-Through-Effekte verwenden Window.SystemBackdrop oder SystemBackdropElement.

Welches Material sollte ich verwenden?

Scenario Material API
App-Fenster mit Mica-Hintergrund (hintergrundtoniert) Mica Window.SystemBackdrop = new MicaBackdrop()
App-Fenster mit durchsichtigem Milchglashintergrund Desktop-Acryl Window.SystemBackdrop = new DesktopAcrylicBackdrop()
Flyout, Popup oder Kontextmenü mit Acrylhintergrund Systemkulisse auf einer Oberfläche Festlegen SystemBackdrop auf FlyoutBase, Popup usw.
Randleiste, Panel oder Element mit Mica oder Acryl (nicht das gesamte Fenster) SystemBackdropElement <SystemBackdropElement>-Kontrolle
Navigationsleiste oder Inhaltsbereich mit einem Weichzeichnungseffekt in der App In-app Acryl {ThemeResource AcrylicInAppFillColorDefaultBrush}

Kein Material (Standard)

Wenn kein Material verwendet wird, ist der Fensterhintergrund eine einheitliche Farbe, die aus dem aktiven hellen oder dunklen Design übernommen wird – ohne Unschärfe oder Transparenzeffekt.

Screenshot eines WinUI 3-App-Fensters ohne Material, das einen flachen weißen Hintergrund anzeigt.

Materialien basieren auf Kompositoreffekten, die Hardwareunterstützung und Benutzereinstellungen erfordern. WinUI 3 fällt nahtlos auf eine Volltonfarbe zurück, wenn ein Material nicht gerendert werden kann:

  • Remotedesktop oder virtuelle Computer – der Kompositor kann nicht mit Desktopinhalten über RDP mischen, sodass SystemBackdrop Materialien automatisch zurückfallen.
  • Unzureichende Grafikhardware – Mica und Desktop-Acryl erfordern DirectX 11 und angemessenen GPU-Speicher. Geräte, die unter dem Schwellenwert liegen, fallen auf eine einfarbige Designfarbe zurück.
  • Transparenzeffekte deaktiviert – wenn der Benutzer Transparenzeffekte unter Einstellungen > Personalisierung > Farben deaktiviert, greifen alle SystemBackdrop Materialien und AcrylicBrush auf ihre einfarbigen Alternativen zurück.
  • Stromsparmodus aktiv – Windows deaktiviert Acryl (DesktopAcrylicBackdrop und AcrylicBrush) beim Einschalten des Stromsparmodus. Mica ist nicht betroffen.
  • Modus mit hohem Kontrast – alle Materialien werden unterdrückt; das System wendet stattdessen Designfarben mit hohem Kontrast an.

Ihre App muss diese Bedingungen nicht erkennen – die APIs behandeln Fallback automatisch. Stellen Sie sicher, dass FallbackColor oder der Hintergrund des Designs, den Sie konfigurieren, auch als einfache Volltonfarbe gut wirkt.

Mica

Mica übernimmt die Farbe des Desktophintergrunds des Benutzers in einen dezenten, personalisierten Hintergrund. Es ist für den Hintergrund des Hauptfensters der App konzipiert, insbesondere im Titelleisten- und Navigationsbereich.

  • API: Window.SystemBackdrop = new MicaBackdrop()
  • Varianten: MicaKind.Base (Standard) oder MicaKind.BaseAlt (heller, für sekundäre Oberflächen)
  • Windows Version: nur Windows 11. Fällt auf eine vollfarbige Designfarbe auf Windows 10 zurück.

Screenshot einer WinUI 3-App mit angewendetem MicaBackdrop mit einem subtilen blaugrauen Hintergrund, der vom Desktophintergrund des Benutzers getönt ist.

Desktop-Acryleffekt

Desktop-Acryl zeigt eine live, verschwommene Ansicht des Desktops und des Inhalts hinter dem App-Fenster, wodurch ein Frostglas-Erscheinungsbild entsteht.

  • API: Window.SystemBackdrop = new DesktopAcrylicBackdrop()
  • Varianten: DesktopAcrylicKind.Base (mehr undurchsichtig) oder DesktopAcrylicKind.Thin (transparenter)
  • Windows Version: Windows 10 (Build 17763) und höher.

Screenshot einer WinUI 3-App mit angewendetem DesktopAcrylicBackdrop, das eine milchglasartige Unschärfe des Desktopinhalts hinter dem Fenster zeigt.

Acryl kann auch auf temporäre Oberflächen angewendet werden – legen Sie SystemBackdrop auf FlyoutBase, Popup, MenuFlyoutPresenter oder CommandBarFlyoutCommandBar fest. Die vollständige Liste finden Sie unter "Systemkulissen ".

SystemBackdropElement

SystemBackdropElement wendet ein Mica- oder Desktop-Acrylic-Material aus dem Kompositor des Betriebssystems auf ein bestimmtes XAML-Element an, nicht auf das gesamte Fenster. Verwenden Sie sie, wenn eine Randleiste, ein Panel oder eine Karte unabhängig vom restlichen Fenster einen eigenen Mica- oder Acrylhintergrund benötigt.

Acryl in der App (AcrylicBrush)

AcrylicBrush verwischt XAML-Inhalte im App-Fenster. Der Desktop oder andere Fenster werden nicht über die Oberfläche angezeigt. Verwenden Sie sie für Navigationsbereiche, Randleisten oder Inhaltsbereiche, in denen ein transluzenter In-App-Effekt angezeigt werden soll.

  • API: Wenden Sie {ThemeResource AcrylicInAppFillColorDefaultBrush} auf ein Element Background an, oder definieren Sie einen benutzerdefinierten AcrylicBrush mit TintColor, TintOpacity und TintLuminosityOpacity.
  • Die UWP-Eigenschaft BackgroundSource = HostBackdrop ist in WinUI 3 nicht verfügbar.
  • Ausführliche Informationen und Codebeispiele finden Sie unter In-App-Acryl.

Screenshot einer WinUI 3-App mit angewendetem AcrylicBrush, der ein transluzentes Panel zeigt, das XAML-Inhalte innerhalb des App-Fensters unscharf erscheinen lässt.

  • Last updated on