亚克力材料

Acrylic 是一种画笔，用于创建半透明纹理。 你可以将 Acrylic 应用到应用图面中，并帮助构建视觉层次结构。

重要的 API：AcrylicBrush 类、背景属性

浅色主题中的

深色主题中的

Acrylic 和 Fluent Design 系统

Fluent Design System 可帮助你创建包含光线、深度、动画、材料和比例的现代粗体 UI。 Acrylic 是一种 Fluent Design 系统组件，用于在你的应用中添加物理纹理（材料）和深度。 若要了解详细信息，请参阅 Fluent Design 概述。

示例

WinUI 2 库
如果已安装 WinUI 2 库应用， 请单击此处 打开应用并查看亚克力的实际应用。

获取 WinUI 2 库应用 (Microsoft Store)
获取源代码 (GitHub)

Acrylic 混合类型

Acrylic 最明显的特征是其透明度。 有两种 Acrylic 混合类型可改变材料透明度：

• 背景 Acrylic，显示桌面壁纸和当前处于活动状态的应用后的其他窗口，增加了应用程序窗口之间的层次感，同时允许用户进行个性化偏好设置 。
• 应用内 Acrylic，在应用框架内增加层次感，焦点清晰且层次分明 。

避免对多层 Acrylic 图面分层：多层背景 Acrylic 会造成令人分心的视觉错觉。

何时使用 Acrylic

• 将应用内 Acrylic 用于支持 UI，例如在滚动或交互时可能重叠内容的图面上。
• 将背景 Acrylic 用于瞬态 UI 元素，例如上下文菜单、浮出控件和可轻型消除的 UI。
  在瞬态场景中使用 Acrylic 有助于维护与触发瞬态 UI 的内容之间的视觉关系。

如果在导航图面上使用的是应用内 Acrylic，则考虑扩展 Acrylic 窗格下的内容，以改善应用上的流。 使用 NavigationView 将自动为你执行此操作。 但为避免产生条纹效果，尽量不要边对边放置多个 Acrylic - 这可能会在两个模糊图面之间产生多余接缝。 Acrylic 这种工具可让设计在视觉上更加协调，但使用不当可能会导致视觉干扰。

考虑以下使用模式，确定将 Acrylic 融入应用的最佳方式：

垂直窗格

对于有助于将应用内容分段的垂直窗格或图面，我们建议使用不透明背景，而不是 Acrylic。 如果垂直窗格在内容上方展开（比如在 NavigationView 的“精简”或“最小”模式下），建议使用应用内 acrylic 来帮助在用户展开此窗格时维护页面的上下文 。

瞬态图面

对于具有上下文菜单、浮出控件、非模式弹出窗口或轻型消除窗格的应用，建议使用背景 Acrylic，尤其是当这些图面绘制在主应用窗口的框架之外时。

默认情况下，许多 XAML 控件绘制 Acrylic。 MenuFlyout、AutoSuggestBox、ComboBox 和具有轻型消除弹出窗口的类似控件在打开时都使用 Acrylic。

注意

呈现 Acrylic 图面会大量占用 GPU，从而导致设备的功耗增加并缩短电池使用时间。 当设备进入节电模式时，会自动禁用 Acrylic 效果。 用户可以通过在“设置”>“个性化”>“颜色”中关闭透明度效果来禁用所有应用的 Acrylic 效果。

可用性和适应性

Acrylic 外观可自动适应各种设备和上下文。

在高对比度模式中，用户仍将看到自己选择的熟悉的背景颜色，而非 Acrylic。 此外，背景 Acrylic 和应用内 Acrylic 均显示为纯色：

• 用户关闭“设置”>“个性化设置”>“颜色”中的透明度效果时。
• 启用节电模式时。
• 应用在低端硬件上运行时。

此外，只有背景 Acrylic 会将半透明度和纹理替换为纯色：

• 桌面上的应用窗口停用时。
• 当应用在 Xbox、HoloLens 或平板电脑模式下运行时。

可读性注意事项

请务必确保应用上显示的任何文本满足对比率要求（请参阅可访问文本要求）。 我们优化了 Acrylic 资源，使文本在 Acrylic 之上满足对比度。 不建议在 Acrylic 图面上放置颜色鲜亮的文本，因为这种组合可能无法满足默认 14px 字体大小时的最低对比率要求。 请尽量避免在 Acrylic 元素上放置超链接。 此外，如果选择自定义 Acrylic 色调颜色或不透明度级别，请始终关注对可读性的影响。

Acrylic 主题资源

借助 XAML AcrylicBrush 或预定义的 AcrylicBrush 主题资源，可以在应用图面中轻松应用 Acrylic。 首先，需要确定是使用应用内 Acrylic 还是背景 Acrylic。 请务必仔细阅读上文描述的通用应用模式，以获取实用建议。

我们创建了一套适用于背景 Acrylic 和应用内 Acrylic 类型的画笔主题资源，可根据应用主题进行调整并按需回退为纯色。 对于 WinUI 2，这些主题资源位于 microsoft-ui-xaml GitHub 存储库的 AcrylicBrush themeresources 文件中。 名称中包含“背景”的资源表示背景 Acrylic，而 InApp 是指应用内 Acrylic。

若要绘制特定图面，请将 WinUI 2 主题资源之一应用到元素背景中，如同应用任何其他画笔资源一样。

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

自定义 Acrylic 画笔

你可以选择在应用的 Acrylic 中添加颜色色调，以展示个性化设计或实现与页面其他元素之间的视觉平衡。 若要显示颜色而非灰度，你需要使用以下属性定义属于你自己的 Acrylic 画笔。

• TintColor：颜色/色调覆盖层。
• TintOpacity：色调层不透明度。
• TintLuminosityOpacity：控制可从背景穿过 Acrylic 图面的饱和度的量。
• BackgroundSource：指定使用背景 Acrylic 还是应用内 Acrylic 的标记。
• FallbackColor：在节电模式中替换 Acrylic 的纯色。 对于背景 Acrylic，当应用并非位于活动状态桌面窗口中或者应用正在手机和 Xbox 上运行时，回滚颜色也会替换 Acrylic。

若要添加 Acrylic 画笔，请定义用于深色、浅色和高对比度主题的三个资源。 请注意，在高对比度主题中，我们建议使用 x:Key 与深色/浅色 AcrylicBrush 相同的 SolidColorBrush。

注意

如果未指定 TintLuminosityOpacity 值，系统将根据 TintColor 和 TintOpacity 自动调整其值。

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FF7F0000"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="MyAcrylicBrush"
            Color="{ThemeResource SystemColorWindowColor}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

下面的示例显示了如何在代码中声明 AcrylicBrush。 如果你的应用支持多个操作系统目标，请务必检查以确认此 API 在用户计算机上可用。

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
{
    Windows.UI.Xaml.Media.AcrylicBrush myBrush = new Windows.UI.Xaml.Media.AcrylicBrush();
    myBrush.BackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource.HostBackdrop;
    myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.TintOpacity = 0.6;

    grid.Fill = myBrush;
}
else
{
    SolidColorBrush myBrush = new SolidColorBrush(Color.FromArgb(255, 202, 24, 37));

    grid.Fill = myBrush;
}

将 Acrylic 扩展到标题栏

若要创建无缝的应用窗口外观，可以将 Acrylic 应用到标题栏区域。 此示例中将 Acrylic 扩展到标题栏的方式是将 ApplicationViewTitleBar 对象的 ButtonBackgroundColor 和 ButtonInactiveBackgroundColor 属性设置为 Colors.Transparent。

private void ExtendAcrylicIntoTitleBar()
{
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

此代码可放在应用的 OnLaunched 方法 (App.xaml.cs) 中、对 Window.Activate 的调用后（如此处所示），或应用的第一页中 。

// Call your extend acrylic code in the OnLaunched event, after
// calling Window.Current.Activate.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }
        // Ensure the current window is active
        Window.Current.Activate();

        // Extend acrylic
        ExtendAcrylicIntoTitleBar();
    }
}

此外，你需要使用 CaptionTextBlockStyle 为应用程序标题（通常自动显示于标题栏）绘制 TextBlock。 有关详细信息，请参阅 标题栏自定义。

应做事项和禁止事项

• 在暂时性图面上使用 Acrylic。
• 请将 Acrylic 扩展到至少一个应用边缘，通过与应用周围环境巧妙融合营造无缝体验。
• 不要将桌面 Acrylic 放在应用的大背景图面上。
• 不要并列放置多个 Acrylic 窗格，因为这会导致出现不协调的明显接缝。
• 不要将主题色文本放在 Acrylic 图面上。

如何设计 Acrylic

我们微调 Acrylic 的关键组件以凸显其独特外观和属性。 我们从半透明度、模糊和噪点设置开始，为平滑图面增添视觉深度和维度。 我们添加了排除混合模式层，以确保放置在 Acrylic 背景上的 UI 的对比度和可读性。 最后，我们添加了各种颜色色调，以供用户进行个性化设置。 这些图层协同作用，形成了全新的实用材料。

Acrylic 设置：背景、模糊、排除混合、颜色/色调覆盖、噪点

获取示例代码

• WinUI 2 库示例 - 以交互式格式查看所有 XAML 控件。

相关文章

Fluent Design 概述