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

Question

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

更新：

微软已发布官方Acrylic material文档

注意：

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

Answer 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

Answer 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，因为当应用窗口失去焦点或设备处于省电模式时，您将失去亚克力效果。