Kommentar
Åtkomst till den här sidan kräver auktorisering. Du kan prova att logga in eller ändra kataloger.
Åtkomst till den här sidan kräver auktorisering. Du kan prova att ändra kataloger.
Material i Windows 11 är visuella effekter som appliceras på UX-ytor och som efterliknar verkliga föremål. Skymmande material, som mica och akryl, används som baslager under de interaktiva gränssnittskontrollerna.
Mica är ett täckande material som innehåller användarens tema och skrivbordsunderlägg för att skapa ett mycket personligt utseende. Mica är utformat för prestanda eftersom det bara avbildar bakgrundsunderlägget en gång för att skapa sin visualisering, så vi rekommenderar det för grundskiktet i din app, särskilt i området med namnlisten.
Akryl är ett halvtransparent material som replikerar effekten av frostat glas. Den används endast för tillfälliga, lättslämda ytor som utfällbara menyer och snabbmenyer.
Den här artikeln beskriver hur du använder Mica eller Akryl som basskikt för din Windows App SDK/WinUI 3 XAML-app.
Anmärkning
- Information om hur du använder bakgrundsmaterial i en Win32-app finns i Apply Mica i Win32-skrivbordsappar för Windows 11.
- För akryl inom appen som tillämpas på gränssnittselement (inte fönsterbakgrunden), se avsnittet Akryl inom appen.
Så här använder du ett bakgrundsmaterial
![]()
WinUI 3-galleriappen innehåller interaktiva exempel på WinUI-kontroller och funktioner. Hämta appen från Microsoft Store eller bläddra i källkoden på GitHub.
Om du vill använda Mica- eller Akrylmaterial i din app ställer du in egenskapen SystemBackdrop till en XAML-SystemBackdrop- (vanligtvis en av de inbyggda bakgrunderna, MicaBackdrop eller DesktopAcrylicBackdrop).
Dessa element har en SystemBackdrop egenskap:
- CommandBarFlyoutCommandBar.SystemBackdrop
- ContentIsland.SystemBackdrop
- DesktopWindowXamlSource.SystemBackdrop
- FlyoutBase.SystemBackdrop
- MenuFlyoutPresenter.SystemBakgrund
- Popup.SystemBakgrund
- Window.SystemBackdrop
De här exemplen visar hur du ställer in systembakgrunden i XAML.
Mica
Mica används vanligtvis som bakgrund för ett appfönster.
<Window
... >
<Window.SystemBackdrop>
<MicaBackdrop/>
</Window.SystemBackdrop>
</Window>
Mica Alt
Om du vill använda Mica Alt-varianten anger du Kind egenskapen till BaseAlt.
<Window
... >
<Window.SystemBackdrop>
<MicaBackdrop Kind="BaseAlt"/>
</Window.SystemBackdrop>
</Window>
Acrylic
Desktop Acrylic kan användas som bakgrund för ett fönster.
<Window
... >
<Window.SystemBackdrop>
<DesktopAcrylicBackdrop/>
</Window.SystemBackdrop>
</Window>
Akryl i tillfälligt användargränssnitt
Akryl används också ofta som bakgrund för tillfälligt användargränssnitt, som en utfälld skärm. Du kan ange detta i XAML eller i kod, eftersom utfällbara objekt ofta skapas dynamiskt.
<Flyout
... >
<Flyout.SystemBackdrop>
<DesktopAcrylicBackdrop/>
</Flyout.SystemBackdrop>
</Flyout>
Flyout flyout = new Flyout()
{
SystemBackdrop = new DesktopAcrylicBackdrop()
};
Avancerat: Så här använder du en systembakgrundskontrollant
Anmärkning
Från och med Windows App SDK 1.3 kan du använda material genom att ange egenskapen Window.SystemBackdrop till en XAML-SystemBackdrop enligt beskrivningen i föregående avsnitt. Det här är det rekommenderade sättet att använda ett material för de flesta appar.
Resten av den här artikeln visar hur du använder API:erna Composition MicaController och DesktopAcrylicController , vilket ger dig mer kontroll över bakgrundsbeteendet.
Om du vill använda ett bakgrundsmaterial i din app kan du använda en av de kontrollanter som implementerar ISystemBackdropController-gränssnittet (MicaController eller DesktopAcrylicController). Dessa klasser hanterar både återgivningen av systemets bakgrundsmaterial samt hanteringen av systempolicyn för materialet.
Om du vill använda Mica som bakgrundsmaterial skapar du ett MicaController- objekt. Om du vill använda Akryl skapar du ett DesktopAcrylicController--objekt. Den konfigurerade och stödjande koden är densamma för varje typ av systembakgrundsmaterial.
Skapa en MicaController
MicaController micaController;
bool TrySetMicaBackdrop(bool useMicaAlt)
{
if (MicaController.IsSupported())
{
...
micaController = new MicaController();
micaController.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;
...
}
}
Skapa en DesktopAcrylicController
DesktopAcrylicController acrylicController;
bool TrySetAcrylicBackdrop(bool useAcrylicThin)
{
if (DesktopAcrylicController.IsSupported())
{
...
acrylicController = new DesktopAcrylicController();
acrylicController.Kind = useAcrylicThin
? DesktopAcrylicKind.Thin : DesktopAcrylicKind.Base;
...
}
}
Styrenheten reagerar som standard på systemets ljusa och mörka teman. Om du vill åsidosätta det här beteendet kan du ange följande egenskaper på kontrollanten:
Anmärkning
När du har anpassat någon av kontrollantens fyra egenskaper tillämpas inte längre standardvärdena Ljus eller Mörk när den associerade SystemBackdropConfiguration.Theme ändras. Du måste uppdatera egenskaperna manuellt för att matcha det nya temat.
För att kunna använda bakgrundsmaterialet i din app krävs följande:
Systemstöd
Systemet där appen körs måste ha stöd för bakgrundsmaterialet. Anropa metoden MicaController.IsSupported eller DesktopAcrylicController.IsSupported för att säkerställa att bakgrundsmaterialet stöds under körning.
Ett giltigt mål
Du måste ange ett mål som implementerar gränssnittet ICompositionSupportsSystemBackdrop. I en XAML-app implementerar XAML Window det här gränssnittet och används som bakgrundsmål.
Ett SystemBackdropConfiguration-objekt
SystemBackdropConfiguration ger systembakgrundskontrollanten appspecifik principinformation för att korrekt konfigurera systemets bakgrundsmaterial.
Ett DispatcherQueue-objekt
Du behöver en tillgänglig Windows.System.DispatcherQueue på XAML-huvudtråden. Anropa
DispatcherQueue.EnsureSystemDispatcherQueue()för att se till att det finns en.
Exempel: Använda Mica med en kontrollant i en WinUI-app
Det här exemplet visar hur du konfigurerar Bakgrundsmaterial för Mica med hjälp av en styrenhet i en XAML-app.
Tips/Råd
Se även följande exempelprojekt på GitHub:
C#: SampleSystemBackdropsWindow i WinUI-galleriet.
C++/WinRT: Windows App SDK Mica-exempel.
using Microsoft.UI.Composition;
using Microsoft.UI.Composition.SystemBackdrops;
using Microsoft.UI.Xaml;
using WinRT; // required to support Window.As<ICompositionSupportsSystemBackdrop>()
public sealed partial class MainWindow : Window
{
MicaController micaController;
SystemBackdropConfiguration configurationSource;
public MainWindow()
{
this.InitializeComponent();
TrySetMicaBackdrop(false);
}
bool TrySetMicaBackdrop(bool useMicaAlt)
{
if (MicaController.IsSupported())
{
DispatcherQueue.EnsureSystemDispatcherQueue();
// Hooking up the policy object.
configurationSource = new SystemBackdropConfiguration();
Activated += Window_Activated;
Closed += Window_Closed;
((FrameworkElement)Content).ActualThemeChanged += Window_ThemeChanged;
// Initial configuration state.
configurationSource.IsInputActive = true;
SetConfigurationSourceTheme();
micaController = new MicaController
{
Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base
};
// Enable the system backdrop.
// Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
micaController.AddSystemBackdropTarget(
this.As<ICompositionSupportsSystemBackdrop>());
micaController.SetSystemBackdropConfiguration(configurationSource);
return true; // Succeeded.
}
return false; // Mica is not supported on this system.
}
private void Window_Activated(object sender, WindowActivatedEventArgs args)
{
if (configurationSource != null)
configurationSource.IsInputActive =
args.WindowActivationState != WindowActivationState.Deactivated;
}
private void Window_Closed(object sender, WindowEventArgs args)
{
// Make sure any Mica/Acrylic controller is disposed
// so it doesn't try to use this closed window.
micaController?.Dispose();
micaController = null;
Activated -= Window_Activated;
configurationSource = null;
}
private void Window_ThemeChanged(FrameworkElement sender, object args)
{
if (configurationSource != null)
SetConfigurationSourceTheme();
}
private void SetConfigurationSourceTheme()
{
if (configurationSource != null)
configurationSource.Theme =
(SystemBackdropTheme)((FrameworkElement)Content).ActualTheme;
}
}
Relaterade artiklar
Windows developer