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

时间：2017-04-29 18:41:24

标签： c# uwp win-universal-app windows-composition-api fluent-design

我找不到任何详细的文档来使用Acrylic Accent（CreateBackdropBrush）。我在StackOverflow中找到了一个post，它有点用处，但它并没有帮助我们开始。所以请为这篇文章创建一个详细的答案，以便每个人都可以学习。

更新

Microsoft已发布官方Acrylic material文档

注意：

如果有人不了解Acrylic Accent。 Acrylic Accent是Windows 10 Creators Update中的新功能，允许应用程序背景模糊和透明。enter image description here enter image description here

3 个答案:

答案 0 :(得分：26)

CREATOR UPDATE

XAML

您需要使用放在应用背景上的组件，让我们说<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

第二个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; 用于在阴影上方设置阴影颜色。

.CS

然后您可以使用以下代码：

applyAcrylicAccent(MainGrid);

并使用private void Page_SizeChanged(object sender, SizeChangedEventArgs e) { if (_hostSprite != null) _hostSprite.Size = e.NewSize.ToVector2(); } 调用它 您还需要处理SizeChanged事件：

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

当然，你需要在Creator Update上运行它，CreateHostBackdropBrush（）不能在移动设备上运行，或者在平板电脑模式下运行。

另外，请考虑使用丙烯酸颜色设置的面板或网格不能显示任何控件（到目前为止我已经测试过）。所以你需要使用你的相对面板而不需要任何控制。

透明标题栏

可以使用以下代码

设置标题栏的透明度 
Windows.UI.Xaml.Media

这里是上面代码生成的示例（还添加了一些其他内容。）Example

秋季更新10.0.16190及以上

正如Justin XL在下面的答案中提到的，从Build 16190及更高版本开始，开发人员可以访问位于SpeechToText service = new SpeechToText(); service.setUsernameAndPassword("{username"}, "{password}"); RecognizeOptions options = new RecognizeOptions.Builder() .contentType("audio/wav") .continuous(true) .model("en-US_NarrowbandModel") .inactivityTimeout(-1) // Seconds after which the connection is closed if no audio is detected .build(); String[] files = {"file1.wav", "file2.wav"}; for (String file : files) { SpeechResults results = service.recognize(new File(file), options).execute(); System.out.println(results); // print results(you could write them to a file) } （Acrylic API）的不同Acrylic Brushes以及Microsoft的指南：{{3 }}

答案 1 :(得分：9)

在 Creators Update 内幕预览 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，因为当应用程序窗口失去焦点或设备处于节电模式时，您将失去丙烯酸效果。

答案 2 :(得分：9)

注意

这仅适用于Windows 10 Insider Preview（v10.0.16190.0及更高版本）。如果您想在Creators Update中使用它，请查看Sven Borden的answer。

您可以加入Windows 10内幕预览计划here

您可以加入下载Windows 10 SDK预览版16190 here

亚克力主题资源

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

资源键 - ＆gt; 色调不透明度 - ＆gt; 后备颜色

SystemControlAcrylicWindowBrush - ＆gt; 80％ - ＆gt; ChromeMedium

SystemControlAcrylicElementBrush - ＆gt; 80％ - ＆gt; ChromeMedium

SystemControlAcrylicMediumHighWindowBrush - ＆gt; 70％ - ＆gt; ChromeMedium

SystemControlAcrylicMediumHighElementBrush - ＆gt; 70％ - ＆gt; ChromeMedium

SystemControlAcrylicMediumWindowBrush - ＆gt; 60％ - ＆gt; ChromeMediumLow

SystemControlAcrylicMediumElementBrush - ＆gt; 60％ - ＆gt; ChromeMediumLow

SystemControlAcrylicAccentMediumHighWindowBrush - ＆gt; 70％ - ＆gt; SystemAccentColor

SystemControlAcrylicAccentMediumHighElementBrush - ＆gt; 70％ - ＆gt; SystemAccentColor

SystemControlAcrylicAccentDark1WindowBrush - ＆gt; 80％ - ＆gt; SystemAccentColorDark1

SystemControlAcrylicAccentDark1ElementBrush - ＆gt; 80％ - ＆gt; SystemAccentColorDark1

SystemControlAcrylicAccentDark2MediumHighWindowBrush - ＆gt; 70％ - ＆gt; SystemAccentColorDark2

SystemControlAcrylicAccentDark2MediumHighElementBrush - ＆gt; 70％ - ＆gt; 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;

来源：Acrylic material

相关问题
最新问题