通过

在 Windows 11 的桌面应用中使用 Mica 或 Acrylic 材质

在 Windows 11 中，材料 是应用于用户体验界面的视觉效果，类似于现实生活中的工艺品。 遮挡材料，比如云母和亚克力，被用作交互式 UI 控件下的基础层。

云母是一种不透明的材料，它将用户的主题和桌面壁纸相结合，创建高度个性化的外观。 Mica专为性能设计，因为它只需获取一次背景壁纸以生成其可视化，因此建议将其用于应用的基础层，尤其是在标题栏区域。

亚克力是一种复制毛玻璃效果的半透明材料。 它仅用于暂时性的轻型消除图面，例如浮出控件和上下文菜单。

本文介绍如何将 Mica 或 Acrylic 作为基础层应用到 Windows App SDK/WinUI 3 XAML 应用中。

注释

如何使用背景材料

打开 WinUI 3 画廊应用，体验系统幕布的功能

WinUI 3 示例集图标 WinUI 3 示例库应用包含 WinUI 控件和功能的交互式示例。 从 Microsoft Store 或浏览 GitHub 上的源代码获取应用。

若要将 Mica 或 Acrylic 材料应用于应用，请将该属性设置为 SystemBackdrop XAML SystemBackdrop（通常为内置背景之一、MicaBackdrop 或 DesktopAcrylicBackdrop）。

这些元素具有属性 SystemBackdrop ：

这些示例演示如何在 XAML 中设置系统背景。

Mica

Mica 通常用作应用窗口的背景。

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop/>
    </Window.SystemBackdrop>

</Window>

Mica Alt

若要使用 Mica Alt 变体，请将 Kind 属性设置为 BaseAlt.

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop Kind="BaseAlt"/>
    </Window.SystemBackdrop>

</Window>

亚克力

桌面亚克力可用作窗口的背景。

<Window
    ... >

    <Window.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Window.SystemBackdrop>

</Window>

临时 UI 上的亚克力效果

亚克力也通常用作暂时性 UI 的背景，如浮出控件。 可以在 XAML 或代码中设置此设置，因为浮出控件通常是动态创建的。

<Flyout
    ... >

    <Flyout.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Flyout.SystemBackdrop>
</Flyout>

Flyout flyout = new Flyout()
{
    SystemBackdrop = new DesktopAcrylicBackdrop()
};

高级：如何使用系统背景控制器

注释

从 Windows App SDK 1.3 开始，可以通过将 Window.SystemBackdrop 属性设置为 XAML SystemBackdrop来应用材料，如上一部分所述。 这是为大多数应用程序设置材质的推荐方法。

本文的其余部分介绍如何使用合成 MicaController 和 DesktopAcrylicController API，从而更好地控制背景行为。

若要在应用中使用背景材料，可使用实现 ISystemBackdropController 接口的控制器之一（MicaController 或 DesktopAcrylicController）。 这些类不仅管理系统背景材料的渲染，还管理材料的系统策略处理。

若要将云母用作背景材料，请创建 MicaController 对象。 若要使用亚克力，请创建 DesktopAcrylicController 对象。 对于每种类型的系统背景材料，设置和支持代码是相同的。

创建 MicaController

MicaController micaController;

bool TrySetMicaBackdrop(bool useMicaAlt)
{
    if (MicaController.IsSupported())
    {
        ...
        micaController = new MicaController();
        micaController.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;
        ...
    }
}

创建 DesktopAcrylicController

DesktopAcrylicController acrylicController;

bool TrySetAcrylicBackdrop(bool useAcrylicThin)
{
    if (DesktopAcrylicController.IsSupported())
    {
        ...
        acrylicController = new DesktopAcrylicController();
        acrylicController.Kind = useAcrylicThin 
            ? DesktopAcrylicKind.Thin : DesktopAcrylicKind.Base;
        ...
    }
}

默认情况下，控制器对系统的浅色和深色主题作出反应。 若要替代此行为，可将以下属性传递给控制器：

注释

自定义控制器的四个属性中的任何一个后，当关联的 SystemBackdropConfiguration.Theme 更改时，它将不再应用默认的浅色或深色值。 需要手动更新这些属性以匹配新主题。

若要在应用中使用背景材料，需要以下项：

示例：将 Mica 与 WinUI 应用中的控制器配合使用

此示例演示如何在 XAML 应用中使用控制器设置 Mica 背景材料。

小窍门

此外，请查看GitHub上的以下示例项目：

C#：WinUI Gallery 中的 SampleSystemBackdropsWindow。

C++/WinRT：Windows App SDK Mica 示例。

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;
    }
}
  • Last updated on