如何在 Windows 10 创意者更新中使用亚克力口音? [英] How to use Acrylic Accent in Windows 10 Creators Update?

问题描述

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

解决方案

CREATOR UPDATE

XAML

您需要使用一个放置在应用程序背景中的组件，例如 RelativePanel

<RelativePanel Grid.Column="0" Width="{Binding ElementName=MainGrid,Path=Width}" Background="#28000000"/><网格><!--此处有内容，例如文本块等--></网格>

第二个RelativePanel用于设置Blur上方的阴影颜色.

.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;SpriteVisual _hostSprite;

并使用 applyAcrylicAccent(MainGrid); 调用它您还需要处理 SizeChanged 事件:

private void Page_SizeChanged(object sender, SizeChangedEventArgs e){如果(_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 的指南:亚克力材料指南

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 创意者更新中使用亚克力口音?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！