web-dev-qa-db-ja.com

Windows 10 Creators Updateでアクリルアクセントを使用する方法

アクリルアクセントを使用するための詳細なドキュメントが見つかりません（ CreateBackdropBrush ）。 StackOverflowで post を見つけましたが、これは多少便利ですが、使い始めるのに役立ちません。だから、誰もが学ぶことができるように、この投稿への詳細な回答を作成してください。

更新：

Microsoftは公式の アクリル素材 ドキュメントをリリースしました

注：

誰かがアクリルアクセントについて知らないなら。アクリルアクセントは、Windows 10 Creators Updateの新機能であり、アプリの背景をぼやけて透明にすることができます。 enter image description here（enter image description here

c#uwpwin-universal-appwindows-composition-apifluent-design
28
Vijay Nirmal

作成者の更新

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>
_

2番目の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;
_

ここで、上記のコードが生成するものの例（他にもいくつか追加されています。） Example

Fall Update 10.0.16190以降

ビルド16190以降から始まる以下の回答でJustin XLが言及しているように、開発者は_Windows.UI.Xaml.Media_（ Acrylic API ）とMicrosoftのガイドラインにあるさまざまなアクリルブラシにアクセスできます：- アクリル材料ガイドライン

27
Sven Borden

の中に クリエイターズアップデート Insider Preview16193（Windows 10 SDK16190と一緒に）、 new 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を定義してください。

9
Justin XL

注

これは、Windows 10 Insider Preview（v10.0.16190.0以降）でのみ機能します。 Creators Updateで使用する場合は、Sven Bordenによる answer を確認してください。

Windows 10 Insider Previewプログラムに参加できます こちら

Windows 10 SDK Preview Build 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カラー値とアルファチャネルの不透明度の両方を指定することを検討してください。

  • 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をコードで宣言する方法を示しています。アプリが複数のOSターゲットをサポートしている場合、この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;

出典： アクリル素材

9
Vijay Nirmal