如何在Windows 10创意者更新中使用亚克力强调？

Question

我找不到使用Acrylic Accent的详细文档(CreateBackdropBrush)。我在StackOverflow上找到了一个帖子，有点有用，但没有帮助入门。因此，请创建一个详细的答案，以便每个人都可以学习。

更新:

Microsoft发布了官方的Acrylic材料文档。

注意:

如果有人不知道Acrylic Accent是什么。Acrylic Accent是Windows 10 Creators Update中的新功能，允许应用程序背景模糊和透明。

- Vijay Nirmal

---

请问您能否在您的问题中插入“windows-composition-api”标签吗？这有助于更容易地找到您的问题。谢谢。 - Luca Lindholm

Answer 1

CREATOR UPDATE

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更新才能运行此代码，CreateHostBackdropBrush()在移动设备或平板模式下无法工作。

另外，请注意，您设置亚克力颜色的面板或网格将无法显示任何控件（根据我的测试）。因此，您需要使用不包含任何控件的相对面板。

透明标题栏

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

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

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

Fall Update 10.0.16190及以上版本

正如Justin XL在下面的答案中提到的，从Build 16190及以上版本开始，开发人员可以访问位于Windows.UI.Xaml.Media中的不同Acrylic Brushes（Acrylic API）和来自Microsoft的指南： Acrylic材料指南。

- Sven Borden

---

我们不能控制模糊的程度吗？如何将相同的效果应用于标题栏？ - Vijay Nirmal

我已经更新了关于透明标题栏的答案。关于模糊度的数量，据我所知，它是不可能改变的。 - Sven Borden

@DemCodeLines 你好。我使用了你发布的代码并得到了不错的结果（参见：http://imgur.com/jPsigJ9）。我的猜测是你的Windows安装存在问题，而不是代码本身的问题。另外也许检查一下你的应用程序针对的版本是什么？ - SonofNun

使用这段代码，初始状态下正常工作，但是当窗口失去焦点时，最小化/最大化/关闭按钮会失去亚克力纹理。然后过了一会儿，整个窗口变得不透明。有什么办法让窗口失去焦点时保持亚克力效果吗？ - Factor Mystic

@FactorMystic 这是预期的行为。失去焦点的窗口将失去亚克力效果。 - Razor

Answer 2

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

- Justin XL

---

我遇到了一个错误，提示：在XML命名空间'using:Windows.UI.Xaml.Media'中未知类型'AcrylicBrush'。我已经将Microsoft.NETCore.UniversalWindowsPlatform NuGet包更新到了5.3.3，重新构建了项目，并创建了一个仅针对Creator Update的新项目。你是如何使其编译通过的呢？ - Sven Borden

@SvenBorden，你的目标是哪个 SDK，运行的是什么版本？我用的是16193版本，带有16190的 SDK。 - Justin XL

我正在使用构建版本16193，目标SDK为15063。 - Sven Borden

@SvenBorden 是的，我猜你需要更新的SDK 16190版本，感谢你指出来，我会更新答案。 - Justin XL