Material i Windows-appar

Material är visuella effekter som tillämpas på gränssnittsytor för att skapa djup, hierarki och visuellt intresse. WinUI 3 innehåller fyra mekanismer för att tillämpa material, som var och en passar för ett annat scenario.

Important

AcrylicBrush är endast akryl i appen – det suddar ut XAML-innehåll i appfönstret. Den visar inte skrivbordet eller andra fönster bakom appen. För desktop-see-through-effekter använder du Window.SystemBackdrop eller SystemBackdropElement.

Vilket material ska jag använda?

Scenario Material API
Appfönster med Mica-bakgrund (skrivbordsbakgrundstonad) Mica Window.SystemBackdrop = new MicaBackdrop()
Appfönster med en genomskinlig bakgrund av frostat glas Skrivbords-Akryl Window.SystemBackdrop = new DesktopAcrylicBackdrop()
Utfälld meny, popup-meny eller snabbmeny med akrylbakgrund Systembakgrund på en yta Ange SystemBackdrop på FlyoutBase, Popuposv.
Sidofält, panel eller element med glimmer eller akryl (inte hela fönstret) SystemBackdropElement <SystemBackdropElement> kontroll
Navigeringspanel eller innehållspanel med en oskärpeffekt i appen Akryl i appen {ThemeResource AcrylicInAppFillColorDefaultBrush}

Inget material (standard)

När inget material appliceras är fönsterbakgrunden en solid färg som dras från det aktiva ljust eller mörka temat – ingen oskärpa eller genomskinlighet.

Skärmbild av ett WinUI 3-appfönster utan material, som visar en platt vit bakgrund.

Material är beroende av kompositionseffekter som kräver maskinvarustöd och användarens inställningar. WinUI 3 återgår graciöst till en solid färg när ett material inte kan återges:

  • Fjärrskrivbord eller virtuella datorer – compositorn kan inte blandas med skrivbordsinnehåll via RDP, så SystemBackdrop materialen faller tillbaka automatiskt.
  • Otillräcklig grafikmaskinvara – Mica och Desktop Acrylic kräver DirectX 11 och tillräckligt GPU-minne. Enheter som inte uppfyller tröskelvärdet återgår till en solid temafärg.
  • Transparenseffekter inaktiverade – om användaren inaktiverar transparenseffekter i Inställningar > Anpassningsfärger>, allt SystemBackdrop material och AcrylicBrush återgår till sina solida färgalternativ.
  • Batterisparfunktionen är aktiv – Windows inaktiverar akryl (DesktopAcrylicBackdrop och AcrylicBrush) när batterisparfunktionen är på. Mica påverkas inte.
  • Högkontrastläge – alla material undertrycks; systemet använder högkontrasttemafärger i stället.

Appen behöver inte identifiera dessa villkor – API:erna hanterar återställning automatiskt. Se till att alla FallbackColor- eller temabakgrunder som du konfigurerar fungerar bra som en vanlig enfärgad yta.

Mica

Mica införlivar användarens skrivbordsunderläggsfärg i en dämpad, personlig bakgrund. Den är utformad för huvudappens bakgrund, särskilt i namnlisten och navigeringsfönstrets områden.

  • API: Window.SystemBackdrop = new MicaBackdrop()
  • Varianter: MicaKind.Base (standard) eller MicaKind.BaseAlt (ljusare, för sekundära ytor)
  • Windows version: endast Windows 11. Återgår till en solid temafärg på Windows 10.

Skärmbild av en WinUI 3-app med MicaBackdrop tillämpad, som visar en diskret blågrå bakgrund tonad av användarens skrivbordsunderlägg.

Skrivbordsakryl

Desktop Acrylic visar en levande, suddig vy över skrivbordet och innehåll bakom appfönstret, vilket skapar ett frostat glas.

  • API: Window.SystemBackdrop = new DesktopAcrylicBackdrop()
  • Varianter: DesktopAcrylicKind.Base (mer ogenomskinlig) eller DesktopAcrylicKind.Thin (mer transparent)
  • Windows version: Windows 10 (version 17763) och senare.

Skärmbild av en WinUI 3-app med DesktopAcrylicBackdrop tillämpad, som visar en frostad glasoskärpa av skrivbordsinnehåll bakom fönstret.

Akryl kan också appliceras på tillfälliga ytor – ange SystemBackdrop på FlyoutBase, Popup, MenuFlyoutPresenter eller CommandBarFlyoutCommandBar. Se Systembakgrunder för den fullständiga listan.

SystemBackdropElement

SystemBackdropElement använder ett Mica- eller Desktop Acrylic-material från OS-compositorn på ett specifikt XAML-element – inte hela fönstret. Använd den när ett sidofält, en panel eller ett kort behöver en egen glimmer- eller akrylbakgrund oberoende av resten av fönstret.

Akryl i appen (AkrylBrush)

AcrylicBrush suddar ut XAML-innehåll i appfönstret. Den visar inte skrivbordet eller andra fönster genom ytan. Använd den för navigeringsfönster, sidofält eller innehållspaneler där du vill ha en genomskinlig effekt i appen.

  • API: Använd {ThemeResource AcrylicInAppFillColorDefaultBrush} för ett element Backgroundeller definiera en anpassad AcrylicBrush med TintColor, TintOpacityoch TintLuminosityOpacity.
  • UWP-egenskapen BackgroundSource = HostBackdrop är inte tillgänglig i WinUI 3.
  • Mer information och kodexempel finns i Akryl i appen.

Skärmbild av en WinUI 3-app med AcrylicBrush tillämpad, som visar en genomskinlig panel som suddar ut XAML-innehåll i appfönstret.

  • Last updated on