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

Question

我找不到任何使用 Acrylic Accent 的详细文档（CreateBackdropBrush). I found a 在 Whosebug 中，这有点用处，但对入门没有帮助。所以请对此创建一个详细的答案 post 以便大家学习。

更新：

Microsoft 已发布官方 Acrylic material 文档

注：

如果有人不知道 Acrylic Accent。 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用于设置模糊上方的阴影颜色。

.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 Brushes（Acrylic API) and the guidelines from 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 以从应用内容而不是应用背后的内容中采样 window。还要确保您定义了合适的 FallbackColor，因为当应用 window 失去焦点或设备处于节电模式时，您将失去亚克力效果。

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

How to use Acrylic Accent in Windows 10 Creators Update?

c#

uwp

win-universal-app

windows-composition-api

fluent-design

创作者更新

XAML

.CS

透明标题栏

秋季更新 10.0.16190 及更高版本