Materialen in Windows-apps

Materialen zijn visuele effecten die worden toegepast op UI-oppervlakken om diepte, hiërarchie en visuele interesse te creëren. WinUI 3 biedt vier mechanismen voor het toepassen van materialen, elk geschikt voor een ander scenario.

Important

AcrylicBrush is alleen acryl binnen de app — het vervaagt XAML-inhoud in het appvenster. Het toont het bureaublad of andere vensters achter de app niet. Gebruik voor doorzichtseffecten op het bureaublad Window.SystemBackdrop of SystemBackdropElement.

Welk materiaal moet ik gebruiken?

Scenario Materiaal API
App-venster met een Mica-achtergrond (achtergrondtinten) Mica Window.SystemBackdrop = new MicaBackdrop()
App-venster met een doorgerijpte glasachtergrond Desktop Acryl Window.SystemBackdrop = new DesktopAcrylicBackdrop()
Flyout, pop-up of contextmenu met een acrylachtergrond Systeemachtergrond op een oppervlak Stel SystemBackdrop in op FlyoutBase, Popup enzovoort.
Zijbalk, paneel of element met Mica of Acryl (niet het hele venster) SystemBackdropElement <SystemBackdropElement> besturingselement
Navigatiedeelvenster of inhoudsvenster met een vervagingseffect binnen de app In-app Acrylic {ThemeResource AcrylicInAppFillColorDefaultBrush}

Geen materiaal (standaard)

Wanneer er geen materiaal wordt toegepast, is de achtergrond van het venster een effen kleur die is getekend van het actieve licht- of donkere thema, zonder vervagen of doorzichtigheid.

Schermopname van een WinUI 3-app-venster waarop geen materiaal is toegepast, met een platte witte achtergrond.

Materialen zijn afhankelijk van compositor-effecten waarvoor hardwareondersteuning en gebruikersvoorkeuren zijn vereist. WinUI 3 valt correct terug op een effen kleur wanneer een materiaal niet kan worden gerenderd:

  • Extern bureaublad of virtuele machines — de compositor kan niet met bureaubladinhoud blenden via RDP, dus SystemBackdropmaterialen vallen automatisch terug.
  • Onvoldoende grafische hardware : Mica en Desktop Acryl vereisen DirectX 11 en voldoende GPU-geheugen. Apparaten die niet aan de drempelwaarde voldoen, vallen terug op een effen themakleur.
  • Transparantie-effecten uitgeschakeld — als de gebruiker Transparantie-effecten uitschakelt in Instellingen > Persoonlijke instellingen > Kleuren, vallen alle SystemBackdrop materialen en AcrylicBrush terug op hun effen kleurvarianten.
  • Batterijbesparing actief - Windows schakelt acryl (DesktopAcrylicBackdrop en AcrylicBrush) uit wanneer batterijbesparing is ingeschakeld. Mica wordt niet beïnvloed.
  • Modus hoog contrast : alle materialen worden onderdrukt; het systeem past in plaats daarvan themakleuren met hoog contrast toe.

Uw app hoeft deze voorwaarden niet te detecteren. De API's verwerken terugval automatisch. Zorg ervoor dat elke FallbackColor of thema-achtergrond die u configureert ook als een egale, effen kleur goed leesbaar is.

Mica

Mica neemt de achtergrondkleur van de gebruiker op in een gedempte, gepersonaliseerde achtergrond. Het is ontworpen voor de achtergrond van het hoofd-app-venster, met name in de titelbalk en het navigatiedeelvenster.

  • API: Window.SystemBackdrop = new MicaBackdrop()
  • Varianten: MicaKind.Base (standaard) of MicaKind.BaseAlt (lichter, voor secundaire oppervlakken)
  • Windows versie: alleen Windows 11. Valt terug op een effen themakleur op Windows 10.

Schermopname van een WinUI 3-app waarop MicaBackdrop is toegepast, met een subtiele blauwgrijze achtergrond die is getint door de bureaubladachtergrond van de gebruiker.

Bureaublad acryl

Desktop Acryl toont een live, vervaagd beeld van het bureaublad en de inhoud achter het appvenster, wat zorgt voor een matglaseffect.

  • API: Window.SystemBackdrop = new DesktopAcrylicBackdrop()
  • Varianten: DesktopAcrylicKind.Base (meer ondoorzichtig) of DesktopAcrylicKind.Thin (transparanter)
  • Windows versie: Windows 10 (build 17763) en hoger.

Schermopname van een WinUI 3-app waarop DesktopAcrylicBackdrop is toegepast, met een matglasvervaging van bureaubladinhoud achter het venster.

Acryl kan ook worden toegepast op tijdelijke oppervlakken - ingesteld SystemBackdrop op FlyoutBase, Popup, MenuFlyoutPresenterof CommandBarFlyoutCommandBar. Bekijk de achtergronden van het systeem voor de volledige lijst.

SystemBackdropElement

SystemBackdropElement past een Mica- of Desktop Acrylic-materiaal van de OS-compositor toe op een specifiek XAML-element — niet op het hele venster. Gebruik deze wanneer een zijbalk, paneel of kaart een eigen Mica- of Acrylachtergrond onafhankelijk van de rest van het venster nodig heeft.

In de app Acrylic (AcrylicBrush)

AcrylicBrush vervaagt XAML-inhoud in het app-venster. Het bureaublad of andere vensters worden niet via het oppervlak weergegeven. Gebruik deze optie voor navigatiedeelvensters, zijbalken of inhoudsvensters waar u een doorzichtig effect in de app wilt hebben.

  • API: Pas {ThemeResource AcrylicInAppFillColorDefaultBrush} toe op een element Background, of definieer een aangepaste AcrylicBrush met TintColor, TintOpacity en TintLuminosityOpacity.
  • De EIGENSCHAP UWP BackgroundSource = HostBackdrop is niet beschikbaar in WinUI 3.
  • Zie In-app acryl voor meer informatie en codevoorbeelden.

Schermopname van een WinUI 3-app waarop AcrylBrush is toegepast, met een doorzichtig paneel dat XAML-inhoud in het app-venster vervaagt.

  • Last updated on