Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Materials in Windows 11 sind visuelle Effekte, die auf UX-Oberflächen angewendet werden und echten Artefakten ähneln. Verdeckende Materialien wie Acryl und Mica werden als Basisebenen unter interaktiven Benutzeroberflächen-Steuerelementen verwendet.
Mica ist ein undurchsichtiges Material, das das Design und das Desktophintergrundbild der Benutzer*innen enthält, um ein sehr personalisiertes Aussehen zu schaffen. Mica ist für Leistung konzipiert, da es das Hintergrundbild nur einmal erfasst, um die Visualisierung zu erstellen. Es wird daher für die Basisebene Ihrer App und insbesondere für den Titelleistenbereich empfohlen.
Acryl ist ein semitransparentes Material, das einen Milchglaseffekt erzeugt. Es wird nur für kurzlebige Oberflächen mit einfachem Ausblenden wie Flyouts und Kontextmenüs verwendet.
In diesem Artikel wird beschrieben, wie Mica oder Acryl als Basisschicht Ihrer Windows App SDK/WinUI 3 XAML-App angewendet wird.
Hinweis
- Informationen zum Verwenden von Hintergrundmaterialien in einer Win32-App finden Sie unter Apply Mica in Win32-Desktop-Apps für Windows 11.
- Informationen zu In-App-Acryl, das auf UI-Elemente angewendet wird (nicht der Fensterhintergrund), finden Sie unter In-App-Acryl.
Wie man ein Hintergrundmaterial verwendet
![]()
Die WinUI 3 Gallery-App enthält interaktive Beispiele für WinUI-Steuerelemente und -Features. Rufen Sie die App aus dem Microsoft Store ab, oder durchsuchen Sie den Quellcode auf GitHub.
Um Mica oder Acrylmaterial auf Ihre App anzuwenden, legen Sie die SystemBackdrop Eigenschaft auf ein XAML-SystemBackdrop (in der Regel eines der integrierten Kulissen, MicaBackdrop oder DesktopAcrylicBackdrop) fest.
Diese Elemente weisen eine SystemBackdrop Eigenschaft auf:
- CommandBarFlyoutCommandBar.SystemBackdrop
- ContentIsland.SystemBackdrop
- DesktopWindowXamlSource.SystemBackdrop
- FlyoutBase.SystemBackdrop
- MenuFlyoutPresenter.SystemBackdrop
- Popup.SystemHintergrund
- Window.SystemBackdrop
In diesen Beispielen wird gezeigt, wie der Systemhintergrund in XAML festgelegt wird.
Mica
Mica wird in der Regel als Hintergrund für ein App-Fenster verwendet.
<Window
... >
<Window.SystemBackdrop>
<MicaBackdrop/>
</Window.SystemBackdrop>
</Window>
Mica Alt
Um die Mica Alt-Variante zu verwenden, legen Sie die Kind Eigenschaft auf BaseAlt.
<Window
... >
<Window.SystemBackdrop>
<MicaBackdrop Kind="BaseAlt"/>
</Window.SystemBackdrop>
</Window>
Acrylic
Desktop-Acryl kann als Hintergrund für ein Fenster verwendet werden.
<Window
... >
<Window.SystemBackdrop>
<DesktopAcrylicBackdrop/>
</Window.SystemBackdrop>
</Window>
Acryl auf vorübergehender Benutzeroberfläche
Acryl wird auch häufig als Hintergrund für vorübergehende UI verwendet, z. B. ein Flyout. Sie können dies in XAML oder im Code festlegen, da Flyouts häufig dynamisch erstellt werden.
<Flyout
... >
<Flyout.SystemBackdrop>
<DesktopAcrylicBackdrop/>
</Flyout.SystemBackdrop>
</Flyout>
Flyout flyout = new Flyout()
{
SystemBackdrop = new DesktopAcrylicBackdrop()
};
Fortgeschritten: Nutzung eines System-Backdrop-Controllers
Hinweis
Ab Windows App SDK 1.3 können Sie Material anwenden, indem Sie die Eigenschaft Window.SystemBackdrop auf eine XAML-SystemBackdrop festlegen, wie im vorherigen Abschnitt beschrieben. Dies ist die empfohlene Methode, um ein Material für die meisten Apps anzuwenden.
Im restlichen Teil dieses Artikels wird gezeigt, wie Sie die Composition MicaController - und DesktopAcrylicController-APIs verwenden, die Ihnen mehr Kontrolle über das Hintergrundverhalten bieten.
Um ein Hintergrundmaterial in Ihrer App zu verwenden, können Sie einen der Controller verwenden, die die ISystemBackdropController-Schnittstelle implementieren (MicaController oder DesktopAcrylicController). Diese Klassen verwalten sowohl das Rendern des Systemhintergrundmaterials als auch die Verwaltung von Systemrichtlinien für das Material.
Um Mica als Hintergrundmaterial zu verwenden, erstellen Sie ein MicaController-Objekt. Zum Verwenden von Acryl erstellen Sie ein DesktopAcrylicController-Objekt. Die Einrichtung und der unterstützende Code sind für jeden Typ von Systemhintergrundmaterial gleich.
Erstellen eines MicaControllers
MicaController micaController;
bool TrySetMicaBackdrop(bool useMicaAlt)
{
if (MicaController.IsSupported())
{
...
micaController = new MicaController();
micaController.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;
...
}
}
Erstellen eines DesktopAcrylicController
DesktopAcrylicController acrylicController;
bool TrySetAcrylicBackdrop(bool useAcrylicThin)
{
if (DesktopAcrylicController.IsSupported())
{
...
acrylicController = new DesktopAcrylicController();
acrylicController.Kind = useAcrylicThin
? DesktopAcrylicKind.Thin : DesktopAcrylicKind.Base;
...
}
}
Der Controller reagiert standardmäßig auf die Systemdesigns „Hell“ und „Dunkel“. Sie können dieses Verhalten außer Kraft setzen, indem Sie die folgenden Eigenschaften für den Controller festlegen:
Hinweis
Nachdem Sie eine der vier Eigenschaften des Controllers angepasst haben, werden beim Ändern der zugeordneten SystemBackdropConfiguration.Theme-Werte keine standardmäßigen Light- oder Dark-Werte mehr angewendet. Sie müssen diese Eigenschaften manuell aktualisieren, um dem neuen Design zu entsprechen.
Um das Hintergrundmaterial in Ihrer App verwenden zu können, benötigen Sie Folgendes:
Systemunterstützung
Das System, auf dem die App ausgeführt wird, muss das Hintergrundmaterial unterstützen. Rufen Sie die Methode MicaController.IsSupported oder DesktopAcrylicController.IsSupported auf, um sicherzustellen, dass das Hintergrundmaterial zur Laufzeit unterstützt wird.
Ein gültiges Ziel
Sie müssen ein Ziel bereitstellen, das die ICompositionSupportsSystemBackdrop-Schnittstelle implementiert. In einer XAML-App implementiert das XAML-Window-Objekt diese Schnittstelle und wird als Hintergrundziel verwendet.
Ein SystemBackdropConfiguration-Objekt
Das SystemBackdropConfiguration-Objekt stellt App-spezifische Richtlinieninformationen für den Systemhintergrundcontroller bereit, damit er das Systemhintergrundmaterial korrekt konfigurieren kann.
Ein DispatcherQueue-Objekt
Sie benötigen eine verfügbare Windows.System.DispatcherQueue für den XAML-Hauptthread. Rufen Sie
DispatcherQueue.EnsureSystemDispatcherQueue()auf, um sicherzustellen, dass eine vorhanden ist.
Beispiel: Verwenden von Mica mit einem Controller in einer WinUI-App
In diesem Beispiel wird gezeigt, wie Sie das Mica-Hintergrundmaterial mithilfe eines Controllers in einer XAML-App einrichten.
Tipp
Siehe auch diese Beispielprojekte zu GitHub:
C#: SampleSystemBackdropsWindow im WinUI-Katalog.
C++/WinRT: Windows App SDK Mica-Beispiel.
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;
}
}
Verwandte Artikel
Windows developer