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

Question

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

更新:

微软发布了官方的丙烯酸材料文件

注意:

如果有人不知道丙烯酸口音.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); You 调用它也需要处理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)的不同丙烯酸刷子和Microsoft的指南:丙烯酸材料指南

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因为当应用程序窗口失去焦点或设备处于节电模式时,您将失去丙烯酸效果.

Answer 3

注意

这仅适用于Windows 10 Insider Preview(v10.0.16190.0及更高版本).如果您想在Creators Update中使用它,请检查Sven Borden 的答案.

您可以在此处加入Windows 10 Insider预览程序

您可以在此处加入下载Windows 10 SDK预览版16190

亚克力主题资源

名为Acrylic\WindowBrush*的资源代表背景丙烯酸,而Acrylic\ElementBrush*代表应用内丙烯酸

资源键 - > 色调不透明度 - > 后备颜色

SystemControlAcrylicWindowBrush - > 80% - > ChromeMedium

SystemControlAcrylicElementBrush - > 80% - > ChromeMedium

SystemControlAcrylicMediumHighWindowBrush - > 70% - > ChromeMedium

SystemControlAcrylicMediumHighElementBrush - > 70% - > ChromeMedium

SystemControlAcrylicMediumWindowBrush - > 60% - > ChromeMediumLow

SystemControlAcrylicMediumElementBrush - > 60% - > ChromeMediumLow

SystemControlAcrylicAccentMediumHighWindowBrush - > 70% - > SystemAccentColor

SystemControlAcrylicAccentMediumHighElementBrush - > 70% - > SystemAccentColor

SystemControlAcrylicAccentDark1WindowBrush - > 80% - > SystemAccentColorDark1

SystemControlAcrylicAccentDark1ElementBrush - > 80% - > SystemAccentColorDark1

SystemControlAcrylicAccentDark2MediumHighWindowBrush - > 70% - > SystemAccentColorDark2

SystemControlAcrylicAccentDark2MediumHighElementBrush - > 70% - > SystemAccentColorDark2

要绘制特定曲面,请将上述主题资源之一应用于元素背景,就像应用任何其他画笔资源一样

<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">

定制亚克力刷

• TintColor:颜色/色调覆盖层.请考虑指定RGB颜色值和Alpha通道不透明度.

• TintOpacity:色调层的不透明度.我们建议将80%的不透明度作为起点,尽管不同的颜色在其他透明胶片上看起来更具吸引力.

• BackgroundSource:用于指定是否需要背景或应用内丙烯酸的标志.

• FallbackColor:在低电池模式下取代丙烯酸的纯色.对于背景丙烯酸,当应用程序不在活动桌面窗口中或应用程序在手机和Xbox上运行时,后备颜色也会替换丙烯酸.

  <ResourceDictionary.ThemeDictionaries>
  <ResourceDictionary x:Key="Default">
      <AcrylicBrush x:Key="MyAcrylicBrush"
          BackgroundSource="HostBackdrop"
          TintColor="#FFFF0000"
          TintOpacity="0.8"
          FallbackColor="#FF7F0000"/>
  </ResourceDictionary>
  
  <ResourceDictionary x:Key="HighContrast">
      <SolidColorBrush x:Key="MyAcrylicBrush"
          Color="{ThemeResource SystemColorWindowColor}"/>
  </ResourceDictionary>
  
  <ResourceDictionary x:Key="Light">
      <AcrylicBrush x:Key="MyAcrylicBrush"
          BackgroundSource="HostBackdrop"
          TintColor="#FFFF0000"
          TintOpacity="0.8"
          FallbackColor="#FFFF7F7F"/>
  </ResourceDictionary>
  </ResourceDictionary.ThemeDictionaries>
  

以下示例显示如何在代码中声明AcrylicBrush.如果您的应用支持多个操作系统目标,请务必检查用户计算机上是否有此API.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.XamlCompositionBrushBase"))
{
    Windows.UI.Xaml.Media.AcrylicBrush myBrush = new Windows.UI.Xaml.Media.AcrylicBrush();
    myBrush.BackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource.HostBackdrop;
    myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.TintOpacity = 0.6;

    grid.Fill = myBrush;
}
else
{
    SolidColorBrush myBrush = new SolidColorBrush(Color.FromArgb(255, 202, 24, 37));
    grid.Fill = myBrush;
}

将丙烯酸延伸到标题栏中

CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
titleBar.ButtonBackgroundColor = Colors.Transparent;
titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;

来源:丙烯酸材料