通过

在 Windows 11 桌面应用中应用 Mica 或 Acrylic 材料。

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

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

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

本文介绍如何将 Mica 或 Acrylic 应用到 Windows App SDK/WinUI 3 XAML 应用的底层。

注释

如何使用背景材料

  • 重要 API：Window.SystemBackdrop 属性、MicaBackdrop 类、DesktopAcrylicBackdrop 类、SystemBackdropConfiguration 类

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

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

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

这些元素具有属性 ：

  • CommandBarFlyoutCommandBar.SystemBackdrop (系统背景)
  • ContentIsland.SystemBackdrop
  • DesktopWindowXamlSource.SystemBackdrop
  • FlyoutBase.SystemBackdrop
  • MenuFlyoutPresenter.SystemBackdrop
  • Popup.SystemBackdrop
  • Window.SystemBackdrop

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

Mica

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

<Window
    ... >

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

</Window>

Mica Alt

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

<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来应用材料，如上一部分所述。 这是为大多数应用程序设置材质的推荐方法。

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

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

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

创建 MicaController

  • C#
  • C++ 
MicaController micaController;

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

创建 DesktopAcrylicController

  • C#
  • C++ 
DesktopAcrylicController acrylicController;

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

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

  • FallbackColor
  • 亮度不透明度
  • TintColor
  • TintOpacity

注释

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

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

  • 系统支持

    运行应用的系统必须支持背景材料。 调用 MicaController.IsSupported 或 DesktopAcrylicController.IsSupported 方法来确保背景材料在运行时受到支持。

  • 有效目标

    必须提供一个实现 ICompositionSupportsSystemBackdrop 接口的目标。 在 XAML 应用中，XAML 窗口可实现此接口并用作背景目标。

  • SystemBackdropConfiguration 对象

    SystemBackdropConfiguration 为系统背景控制器提供特定于应用的策略信息，便于正确配置系统背景材料。

  • DispatcherQueue 对象

    主 XAML 线程上需要有可用的 Windows.System.DispatcherQueue。 调用 以确保存在一个。

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

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

小窍门

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

C#：WinUI 画廊中的 SampleSystemBackdropsWindow。

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

  • C#
  • C++ 
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