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

问题描述

我找不到任何使用Acrylic Accent的详细文档（

解决方案

创建者更新

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> 
<！-在这里有内容，例如textblock等-> 
< / Grid> 
  

第二个 RelativePanel 用于设置

然后可以使用以下代码：

 私人无效applyAcrylicAccent（面板）
 {
 _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; 
 SpriteVisual _hostSprite; 
  

并使用 applyAcrylicAccent（MainGrid）调用它；
您还需要处理SizeChanged事件：

  private void Page_SizeChanged（object sender，SizeChangedEventArgs e）
 {
 if（_hostSprite！= null）
 _hostSprite.Size = e.NewSize.ToVector2（）; 
} 
  

当然，您需要在Creator Creator上运行它， CreateHostBackdropBrush（）在移动设备或平板电脑模式下均不起作用。

此外，请注意，用丙烯酸色设置的面板或网格不会起作用能够显示任何控件（到目前为止，我已经测试过）。因此，您需要使用没有任何控件的相对面板。

透明标题栏

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

  ApplicationViewTitleBar formattableTitleBar = ApplicationView.GetForCurrentView（）。TitleBar; 
 formattableTitleBar.ButtonBackgroundColor = Colors.Transparent; 
 CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView（）。TitleBar; 
 coreTitleBar.ExtendViewIntoTitleBar = true; 
  

下面是上述代码生成的示例（还添加了其他一些东西。） = https://i.stack.imgur.com/Zhqjk.png rel = noreferrer>

秋季更新10.0.16190及以上版本

正如贾斯汀XL在下面的答案中提到的从Build 16190及更高版本开始，开发人员可以访问位于 Windows.UI.Xaml.Media （）和Microsoft的指南：

I can't find any detailed document to use Acrylic Accent (CreateBackdropBrush). I found a post in StackOverflow which is somewhat useful but it doesn't help to get started. So please create a detailed answer to this post so that everyone can learn.

Update:

Microsoft has released an official Acrylic material document

Note:

If anyone doesn't know about Acrylic Accent. Acrylic Accent is the new feature in Windows 10 Creators Update that allows the app background to be Blurred and Transparent.

解决方案

CREATOR UPDATE

XAML

You need to use a component that you put on the background of your app, let's say a 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>

The second RelativePanel is used to set the shadow color above the Blur.

.CS

And then you can use the following code :

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;

and calling it with applyAcrylicAccent(MainGrid);You also will need to handle the SizeChanged event :

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (_hostSprite != null)
        _hostSprite.Size = e.NewSize.ToVector2();
}

Of course you will need to be on the Creator Update to run this, the CreateHostBackdropBrush() won't work on a mobile device, or in tablet mode.

Also, consider that the panel or grid that you set with a acrylic color won't be able to display any control (as far I've tested yet). So you need to use your relative panel without any control in it.

Transparent Title bar

The transparency of the title bar could be set using the following code

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

Here a example of what the above code generate (with some other things added too.)

Fall Update 10.0.16190 and above

As Justin XL mention in an answer below, starting from the Build 16190 and above, developers have access to different Acrylic Brushes located at Windows.UI.Xaml.Media (Acrylic API) and the guidelines from Microsoft : Acrylic material guidelines

这篇关于如何在Windows 10 Creators Update中使用Acrylic Accent？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！