如何在 Windows 10 Creators Update 中使用 Acrylic Accent？

Posted 2023-03-25

【中文标题】如何在 Windows 10 Creators Update 中使用 Acrylic Accent？

【英文标题】：How to use Acrylic Accent in Windows 10 Creators Update?

【发布时间】：2017-09-27 16:43:33

【问题描述】：

我找不到任何使用 Acrylic Accent (CreateBackdropBrush) 的详细文档。我在 *** 中找到了一个 post，这有点用，但对入门没有帮助。所以请为这篇文章写一个详细的答案，以便大家学习。

更新：

微软已发布官方Acrylic material文档

注意：

如果有人不知道亚克力口音。 Acrylic Accent 是 Windows 10 Creators Update 中的新功能，它允许应用背景模糊和透明。

【问题讨论】：

请您为您的问题插入“windows-composition-api”标签吗？它有助于轻松找到您的问题。谢谢

【参考方案1】：

创作者更新

XAML

您需要使用放置在应用背景上的组件，比如RelativePanel

<RelativePanel Grid.Column="0" Grid.ColumnSpan="2" MinWidth="40" x:Name="MainGrid" SizeChanged="Page_SizeChanged"/>
<RelativePanel Grid.Column="0" Width="Binding ElementName=MainGrid,Path=Width" Background="#28000000"/>
<Grid>
    <!--Having content here, for example textblock and so on-->
</Grid>

第二个RelativePanel用于设置Blur上方的阴影颜色。

.CS

然后你就可以使用下面的代码了：

private void applyAcrylicAccent(Panel panel)

    _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
    _hostSprite = _compositor.CreateSpriteVisual();
    _hostSprite.Size = new Vector2((float) panel.ActualWidth, (float) panel.ActualHeight);

    ElementCompositionPreview.SetElementChildVisual(panel, _hostSprite);
    _hostSprite.Brush = _compositor.CreateHostBackdropBrush();

Compositor _compositor;
SpriteVisual _hostSprite;

并用applyAcrylicAccent(MainGrid); 调用它 您还需要处理 SizeChanged 事件：

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)

    if (_hostSprite != null)
        _hostSprite.Size = e.NewSize.ToVector2();

当然，您需要在 Creator Update 上才能运行它，CreateHostBackdropBrush() 无法在移动设备上或平板电脑模式下工作。

另外，请考虑您使用丙烯酸颜色设置的面板或网格将无法显示任何控件（目前我已经测试过）。因此，您需要使用您的相关面板，而无需对其进行任何控制。

透明标题栏

标题栏的透明度可以使用以下代码设置

ApplicationViewTitleBar formattableTitleBar = ApplicationView.GetForCurrentView().TitleBar;
formattableTitleBar.ButtonBackgroundColor = Colors.Transparent;
CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;

这是上面代码生成的示例（还添加了一些其他内容。）

秋季更新 10.0.16190 及更高版本

正如 Justin XL 在下面的回答中提到的那样，从 Build 16190 及更高版本开始，开发人员可以访问位于 Windows.UI.Xaml.Media (Acrylic API) 的不同 Acrylic Brushes 以及来自 Microsoft 的指南：Acrylic material guidelines

【讨论】：

我们不能控制模糊量吗？如何对标题栏应用相同的效果？

我已经更新了透明标题栏的答案。关于模糊量。据我所知。无法更改

@DemCodeLines 你好。我使用了您发布的代码并获得了不错的结果（请参阅：imgur.com/jPsigJ9）。我的猜测是您的 Windows 安装存在问题，而不是代码本身。还可以检查您的应用程序的目标版本是什么？

@DemCodeLines 太好了！我很高兴你让它工作。 :)

使用此代码，它最初可以工作，但是当窗口失去焦点时，最小/最大/关闭按钮会失去丙烯酸纹理。片刻之后，整个窗口变得不透明。知道如何在窗口没有聚焦时保持亚克力效果吗？

【参考方案2】：

在 Creators Update Insider Preview 16193（连同 Windows 10 SDK 16190）中，您可以应用一个新的 AcrylicBrush就像普通的SolidColorBrush 一样直接到您的元素上。

<Page xmlns:media="using:Windows.UI.Xaml.Media" ...>
    <Page.Resources>
        <media:AcrylicBrush x:Key="HostBackdropBrush"
                            BackgroundSource="HostBackdrop"
                            TintColor="LightBlue"
                            TintOpacity="0.6"
                            FallbackColor="LightSkyBlue"
                            FallbackForced="False" />
    </Page.Resources>

    <Grid Background="StaticResource HostBackdropBrush" />
</Page>

请注意，您可以将 BackgroundSource 更改为 Backdrop 以从应用内容而不是应用窗口后面的内容中采样。还要确保定义了适当的FallbackColor，因为当应用窗口失去焦点或设备处于省电模式时，您将失去亚克力效果。

【讨论】：

我收到一条错误消息：Unknown type 'AcrylicBrush' in XML namespace 'using:Windows.UI.Xaml.Media。我已将Microsoft.NETCore.UniversalWindowsPlatform NuGet 包更新为5.3.3，重建项目并创建了一个仅针对 Creator Update 的新项目。你是如何编译的？

@SvenBorden 您针对的是哪个 sdk，您正在运行什么版本？我正在使用 sdk 16190 构建 16193。

我正在构建 16193，目标是 SDK 15063

@SvenBorden 是的，我想您将需要更新的 SDK 16190，感谢您指出，我会更新答案。