31

我找不到任何使用 Acrylic Accent ( CreateBackdropBrush ) 的详细文档。我在 StackOverflow 中找到了一篇文章，它有些用处，但对入门没有帮助。所以请为这篇文章创建一个详细的答案，以便每个人都可以学习。

更新：

微软已发布官方亚克力材质文档

笔记：

如果有人不知道亚克力口音。Acrylic Accent 是 Windows 10 Creators Update 中的新功能，可让应用背景变得模糊和透明。在此处输入图像描述在此处输入图像描述

4

2 回答 2

32

创作者更新

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 API ) 的不同 Acrylic Brushes 以及来自 Microsoft 的指南：Acrylic material Guidelines

于 2017-04-30T21:17:10.790 回答
12

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

于 2017-05-15T05:54:25.033 回答