アクリル素材Acrylic material

ヒーロー イメージ

アクリルは、半透明のテクスチャを作成するブラシの一種です。Acrylic is a type of Brush that creates a translucent texture. アクリルをアプリ サーフェスに適用すると、奥行きを加えたり、視覚的な階層を確立したりすることができます。You can apply acrylic to app surfaces to add depth and help establish a visual hierarchy.

重要な API:AcrylicBrush クラスBackground プロパティImportant APIs: AcrylicBrush class, Background property

淡色テーマのアクリル 淡色テーマのアクリルAcrylic in light theme Acrylic in light theme

濃色テーマのアクリル 濃色テーマのアクリルAcrylic in dark theme Acrylic in dark theme

アクリルと Fluent Design SystemAcrylic and the Fluent Design System

Fluent Design System では、ライト、深度、モーション、マテリアル、スケールを取り入れた、モダンで目を引く UI を作成できます。The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. アクリルは、アプリに物理的なテクスチャ (マテリアル) と深度を追加する Fluent Design System コンポーネントです。Acrylic is a Fluent Design System component that adds physical texture (material) and depth to your app. 詳しくは、Fluent Design の概要に関するページをご覧ください。To learn more, see the Fluent Design overview.

ビデオの概要Video summary

Examples

画像

XAML コントロール ギャラリーXAML Controls Gallery
XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、アクリルの動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see acrylic in action.

XAML コントロール ギャラリー アプリを入手する (Microsoft Store)Get the XAML Controls Gallery app (Microsoft Store)
ソース コード (GitHub) を入手するGet the source code (GitHub)

アクリル ブレンドの種類Acrylic blend types

アクリルの最も注目すべき特徴は、その透明度です。Acrylic's most noticeable characteristic is its transparency. アクリル ブレンドの種類は 2 つあり、素材を通して何が表示されるかを変更することができます。There are two acrylic blend types that change what’s visible through the material:

  • 背景アクリルでは、デスクトップの壁紙と現在アクティブになっているアプリの背後にある他のウィンドウが表示されます。これにより、アプリケーション ウィンドウ間に奥行きが出て、ユーザーが個人的に優先する画面を明示しておくことができます。Background acrylic reveals the desktop wallpaper and other windows that are behind the currently active app, adding depth between application windows while celebrating the user’s personalization preferences.
  • アプリ内アクリルでは、アプリ フレーム内に奥行きの感覚がもたらされ、フォーカスと階層の両方が提供されます。In-app acrylic adds a sense of depth within the app frame, providing both focus and hierarchy.

背景アクリル

アプリ内アクリル

複数のアクリル サーフェスを重ねる場合は注意が必要です。背景アクリルを何層にも重ねると、目の錯覚の原因となることがあります。Layer multiple acrylic surfaces with caution: multiple layers of background acrylic can create distracting optical illusions.

アクリルの用途When to use acrylic

  • アプリ内アクリルは、スクロール時や操作時にコンテンツと重なる可能性のあるサーフェス上などで、UI をサポートするために使用します。Use in-app acrylic for supporting UI, such as on surfaces that may overlap content when scrolled or interacted with.
  • コンテキスト メニュー、ポップアップ、簡易非表示 UI など、一時的な UI 要素に対して背景アクリルを使用します。Use background acrylic for transient UI elements, such as context menus, flyouts, and light-dismissable UI.
    一時的なシナリオでアクリルを使用すると、一時的な UI をトリガーしたコンテンツとの視覚的な関係を維持するのに役立ちます。Using Acrylic in transient scenarios helps maintain a visual relationship with the content that triggered the transient UI.

ナビゲーション サーフェスでアプリ内アクリルを使用する場合、アプリでのフローを向上させるために、アクリル ウィンドウの下でコンテンツを拡張することを検討してください。If you are using in-app acrylic on navigation surfaces, consider extending content beneath the acrylic pane to improve the flow on your app. NavigationView を使用すると、これが自動的に行われます。Using NavigationView will do this for you automatically. ただし、ストライプ効果が生成されないようにするには、複数のアクリルを端と端を接して配置しないでください。これを行うと、2 つのぼやけたサーフェス間に不要な継ぎ目が作成される場合があります。However, to avoid creating a striping effect, try not to place multiple pieces of acrylic edge-to-edge - this can create an unwanted seam between the two blurred surfaces. アクリルは、デザインで視覚的な調和をとるためのツールですが、正しく使用しないと、視覚的なノイズになる場合があります。Acrylic is a tool to bring visual harmony to your designs, but when used incorrectly, can result in visual noise.

次の使用パターンを検討して、アクリルをアプリに組み込むのに最適な方法を決定してください。Consider the following usage patterns to decide how best to incorporate acrylic into your app:

垂直方向のウィンドウVertical Panes

アプリのコンテンツを分割するのに役立つ垂直方向のウィンドウまたはサーフェスの場合は、アクリルの代わりに不透明な背景を使用することをお勧めします。For vertical panes or surfaces that help section off content of your app, we recommend you use an opaque background instead of acrylic. NavigationView の Compact モードや Minimal モードのように、コンテンツの上部で垂直方向のウィンドウが開く場合、ユーザーがこのウィンドウを開いた状態にしているときにページのコンテンツを維持するために、アプリ内アクリルを使用することをお勧めします。If your vertical panes open on top of content, like in NavigationView's Compact or Minimal modes, we suggest you use in-app acrylic to help maintain the page's context when the user has this pane open.

一時的なサーフェスTransient surfaces

メニュー ポップアップ、非モーダル ポップアップ、または簡易非表示ウィンドウを使用するアプリの場合、背景アクリルを使用することをお勧めします。For apps with menu flyouts, non-modal popups, or light-dismiss panes, it is recommended to use background acrylic.

情報のポップアップを使用したメール アプリのパターン

コントロールの多くは、既定でアクリルを使用します。Many of our controls will use acrylic by default. MenuFlyoutsAutoSuggestBoxComboBox、および簡易非表示ポップアップを使用する類似のコントロールはすべて、呼び出されたときに一時的なアクリルを使用します。MenuFlyouts, AutoSuggestBox, ComboBox and similar controls with light-dismiss popups will all use the transient acrylic when they are invoked.

注意

アクリル サーフェスのレンダリングでは GPU を集中的に使用するため、デバイスの電力消費が増加し、バッテリー残量が少なくなる可能性があります。Rendering acrylic surfaces is GPU-intensive, which can increase device power consumption and shorten battery life. デバイスがバッテリー節約機能モードになると、アクリルの効果は自動的に無効になります。またユーザーは、必要に応じて、すべてのアプリでアクリルの効果を無効にすることができます。Acrylic effects are automatically disabled when devices enter Battery Saver mode, and users can disable acrylic effects for all apps, if they choose.

使いやすさと適応性Usability and adaptability

アクリルの外観は、さまざまなデバイスやコンテキストに合うように自動的に対応します。Acrylic automatically adapts its appearance for a wide variety of devices and contexts.

ハイ コントラスト モードでは、ユーザーが選んだ見慣れた背景色が、アクリルの代わりに引き続き表示されます。In High Contrast mode, users continue to see the familiar background color of their choosing in place of acrylic. また次の場合には、背景アクリルとアプリ内アクリルはどちらも、単色として表示されます。In addition, both background acrylic and in-app acrylic appear as a solid color:

  • ユーザーが [設定] > [個人用設定] > [色] で透明度をオフにした場合When the user turns off transparency in Settings > Personalization > Color
  • バッテリー節約機能モードがアクティブ化されている場合When Battery Saver mode is activated
  • アプリがローエンド ハードウェアで実行される場合When the app runs on low-end hardware

また次の場合には、背景アクリルのみ、その透明度とテクスチャを単色で置き換えることができます。In addition, only background acrylic will replace its translucency and texture with a solid color:

  • アプリ ウィンドウがデスクトップで非アクティブ化されている場合When an app window on desktop deactivates
  • Windows アプリが、電話、Xbox、HoloLens、またはタブレット モードで実行されている場合When the Windows app is running on phone, Xbox, HoloLens or tablet mode

見やすくするための考慮事項Legibility considerations

アプリによりユーザーに表示されるすべてのテキストでは、コントラスト比を適切な値にすることが重要です。It’s important to ensure that any text your app presents to users meets contrast ratios. ハイカラーの黒や白のテキスト、またはミディアムカラーの灰色のテキストがアクリル上で適切なコントラスト比になるように、アクリルのレシピを最適化しています。We’ve optimized the acrylic recipe so that high-color black, white or even medium-color gray text meets contrast ratios on top of acrylic. プラットフォームによって提供されるテーマ リソースは、既定で、濃淡の色のコントラストが 80% の不透明度に設定されます。The theme resources provided by the platform default to contrasting tint colors at 80% opacity. ハイカラーの本文テキストをアクリル上に配置する場合、濃淡の不透明度を下げて、見やすさを維持することができます。When placing high-color body text on acrylic, you can reduce tint opacity while maintaining legibility. ダーク モードでは濃淡の不透明度を 70% にすることができ、ライト モードのアクリルでは 50% の不透明度でコントラスト比が満たされます。In dark mode, tint opacity can be 70%, while light mode acrylic will meet contrast ratios at 50% opacity.

アクリル サーフェスの上にアクセントカラーのテキストを配置することはお勧めしません。これは、これらの組み合わせが、15 ピクセルのフォント サイズでのコントラスト比の最小要件を満たさない可能性があるためです。We don't recommend placing accent-colored text on your acrylic surfaces because these combinations are likely to not pass minimum contrast ratio requirements at 15px font size. ハイパーリンクはアクリル要素上には配置しないようにしてください。Try to avoid placing hyperlinks over acrylic elements. また、アクリルの濃淡の色や不透明度を、テーマ リソースによって提供されるプラットフォームの既定値以外にカスタマイズする場合は、見やすさへの影響を考慮してください。Also, if you choose to customize the acrylic tint color or opacity level outside of the platform defaults provided by the theme resource, keep the impact on legibility in mind.

アクリルのテーマ リソースAcrylic theme resources

新しい XAML AcrylicBrush テーマ リソースや定義済みの AcrylicBrush テーマ リソースを使用して、アクリルをアプリのサーフェスに簡単に適用できます。You can easily apply acrylic to your app’s surfaces using the new XAML AcrylicBrush or predefined AcrylicBrush theme resources. まず、アプリ内アクリルまたは背景アクリルのどちらを使用するかを決める必要があります。First, you’ll need to decide whether to use in-app or background acrylic. この記事で推奨事項として既に説明した一般的なアプリのパターンを確認してください。Be sure to review common app patterns described earlier in this article for recommendations.

背景アクリルやアプリ内アクリルの両方を対象としたブラシのテーマ リソースのコレクションが作成されています。これらのリソースでは、アプリのテーマが重視され、必要に応じて、単色にフォール バックします。We’ve created a collection of brush theme resources for both background and in-app acrylic types that respect the app’s theme and fall back to solid colors as needed. AcrylicWindow という名前のリソースは背景アクリルを表し、AcrylicElement はアプリ内アクリルを表します。Resources named AcrylicWindow represent background acrylic, while AcrylicElement refers to in-app acrylic.

リソース キーResource key 濃淡の不透明度Tint opacity フォールバックの色 Fallback color
SystemControlAcrylicWindowBrush、SystemControlAcrylicElementBrushSystemControlAcrylicWindowBrush, SystemControlAcrylicElementBrush
SystemControlChromeLowAcrylicWindowBrush、SystemControlChromeLowAcrylicElementBrushSystemControlChromeLowAcrylicWindowBrush, SystemControlChromeLowAcrylicElementBrush
SystemControlBaseHighAcrylicWindowBrush、SystemControlBaseHighAcrylicElementBrushSystemControlBaseHighAcrylicWindowBrush, SystemControlBaseHighAcrylicElementBrush
SystemControlBaseLowAcrylicWindowBrush、SystemControlBaseLowAcrylicElementBrushSystemControlBaseLowAcrylicWindowBrush, SystemControlBaseLowAcrylicElementBrush
SystemControlAltHighAcrylicWindowBrush、SystemControlAltHighAcrylicElementBrushSystemControlAltHighAcrylicWindowBrush, SystemControlAltHighAcrylicElementBrush
SystemControlAltLowAcrylicWindowBrush、SystemControlAltLowAcrylicElementBrushSystemControlAltLowAcrylicWindowBrush, SystemControlAltLowAcrylicElementBrush
80%80% ChromeMediumChromeMedium
ChromeLowChromeLow

BaseHighBaseHigh

BaseLowBaseLow

AltHighAltHigh

AltLowAltLow
推奨される使用法:これらは、汎用的なアクリルのリソースであり、さまざまな使用方法で適切に機能します。Recommended usage: These are general-purpose acrylic resources that work well in a wide variety of usages. アプリで使用するセカンダリ テキストの色が AltMedium で、そのサイズが 18 ピクセルよりも小さい場合は、コントラスト比の要件を満たすように、80% のアクリル リソースをテキストの背景に配置してください。If your app uses secondary text of AltMedium color with text size smaller than 18px, place an 80% acrylic resource behind the text to meet contrast ratio requirements.
SystemControlAcrylicWindowMediumHighBrush、SystemControlAcrylicElementMediumHighBrushSystemControlAcrylicWindowMediumHighBrush, SystemControlAcrylicElementMediumHighBrush
SystemControlBaseHighAcrylicWindowMediumHighBrush、SystemControlBaseHighAcrylicElementMediumHighBrushSystemControlBaseHighAcrylicWindowMediumHighBrush, SystemControlBaseHighAcrylicElementMediumHighBrush
70%70% ChromeMediumChromeMedium

BaseHighBaseHigh
推奨される使用法:アプリで使用するセカンダリ テキストの色が AltMedium で、そのサイズが 18 ピクセル以上になる場合は、これらのより透過的な 70% のアクリル リソースをテキストの背景に配置できます。Recommended usage: If your app uses secondary text of AltMedium color with a text size of 18px or larger, you can place these more translucent 70% acrylic resources behind the text. これらのリソースは、アプリの最上部にある水平方向のナビゲーション領域やコマンド実行領域で使用することをお勧めします。We recommend using these resources in your app's top horizontal navigation and commanding areas.
SystemControlChromeHighAcrylicWindowMediumBrush、SystemControlChromeHighAcrylicElementMediumBrushSystemControlChromeHighAcrylicWindowMediumBrush, SystemControlChromeHighAcrylicElementMediumBrush
SystemControlChromeMediumAcrylicWindowMediumBrush、SystemControlChromeMediumAcrylicElementMediumBrushSystemControlChromeMediumAcrylicWindowMediumBrush, SystemControlChromeMediumAcrylicElementMediumBrush
SystemControlChromeMediumLowAcrylicWindowMediumBrush、SystemControlChromeMediumLowAcrylicElementMediumBrushSystemControlChromeMediumLowAcrylicWindowMediumBrush, SystemControlChromeMediumLowAcrylicElementMediumBrush
SystemControlBaseHighAcrylicWindowMediumBrush、SystemControlBaseHighAcrylicElementMediumBrushSystemControlBaseHighAcrylicWindowMediumBrush, SystemControlBaseHighAcrylicElementMediumBrush
SystemControlBaseMediumLowAcrylicWindowMediumBrush、SystemControlBaseMediumLowAcrylicElementMediumBrushSystemControlBaseMediumLowAcrylicWindowMediumBrush, SystemControlBaseMediumLowAcrylicElementMediumBrush
SystemControlAltMediumLowAcrylicWindowMediumBrush、SystemControlAltMediumLowAcrylicElementMediumBrushSystemControlAltMediumLowAcrylicWindowMediumBrush, SystemControlAltMediumLowAcrylicElementMediumBrush
60%60% ChromeHighChromeHigh

ChromeMediumChromeMedium

ChromeMediumLowChromeMediumLow

BaseHighBaseHigh

BaseLowBaseLow

AltMediumLowAltMediumLow
推奨される使用法:プライマリ テキストの色が AltHigh で、このテキストのみをアクリルの上に配置する場合は、これらの 60% のリソースをアプリで利用できます。Recommended usage: When placing only primary text of AltHigh color over acrylic, your app can utilize these 60% resources. アプリの垂直方向のナビゲーション ペイン (ハンバーガー メニュー) を描画するときは、60% のアクリルを使用することをお勧めします。We recommend painting your app's vertical navigation pane, i.e. hamburger menu, with 60% acrylic.

中間色のアクリルに加え、ユーザーが指定したアクセント カラーを使用してアクリルに濃淡を付けるリソースも追加しました。In addition to color-neutral acrylic, we've also added resources that tint acrylic using the user-specified accent color. 色が付いたアクリルは慎重に使用してください。We recommend using colored acrylic sparingly. 提供されている dark1 と dark2 のバリアントを使用する場合、濃色テーマのテキストの色と調和するように、白または明るい色のテキストをこれらのリソース上に配置してください。For the dark1 and dark2 variants provided, place white or light-colored text consistent with dark theme text color over these resources.

リソース キーResource key 濃淡の不透明度Tint opacity 濃淡とフォールバックの色 Tint and Fallback colors
SystemControlAccentAcrylicWindowAccentMediumHighBrush、SystemControlAccentAcrylicElementAccentMediumHighBrushSystemControlAccentAcrylicWindowAccentMediumHighBrush, SystemControlAccentAcrylicElementAccentMediumHighBrush 70%70% SystemAccentColorSystemAccentColor
SystemControlAccentDark1AcrylicWindowAccentDark1Brush、SystemControlAccentDark1AcrylicElementAccentDark1BrushSystemControlAccentDark1AcrylicWindowAccentDark1Brush, SystemControlAccentDark1AcrylicElementAccentDark1Brush 80%80% SystemAccentColorDark1SystemAccentColorDark1
SystemControlAccentDark2AcrylicWindowAccentDark2MediumHighBrush、SystemControlAccentDark2AcrylicElementAccentDark2MediumHighBrushSystemControlAccentDark2AcrylicWindowAccentDark2MediumHighBrush, SystemControlAccentDark2AcrylicElementAccentDark2MediumHighBrush 70%70% SystemAccentColorDark2SystemAccentColorDark2

特定のサーフェスを塗りつぶすには、上記のテーマ リソースのいずれかを、他のブラシ リソースを適用する要素の背景に適用します。To paint a specific surface, apply one of the above theme resources to element backgrounds just as you would apply any other brush resource.

<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">

カスタム アクリル ブラシCustom acrylic brush

色の濃淡をアプリのアクリルに加えて、ブランドを表示したり、ページ上にある他の要素と視覚的にバランスをとったりすることができます。You may choose to add a color tint to your app’s acrylic to show branding or provide visual balance with other elements on the page. グレースケール以外の色を表示するには、次のプロパティを使って、独自のアクリル ブラシを定義する必要があります。To show color rather than greyscale, you’ll need to define your own acrylic brushes using the following properties.

  • TintColor: 色/濃淡のオーバーレイ レイヤーです。TintColor: the color/tint overlay layer. RGB の色の値とアルファ チャネルの不透明度の両方を指定することを検討してください。Consider specifying both the RGB color value and alpha channel opacity.
  • TintOpacity: 濃淡レイヤーの不透明度です。TintOpacity: the opacity of the tint layer. 開始点として 80% の不透明度をお勧めします。ただし、透明度が異なると、別の色を使用したほうがより魅力的に表示される可能性もあります。We recommend 80% opacity as a starting point, although different colors may look more compelling at other translucencies.
  • TintLuminosityOpacity: 背景からアクリル サーフェスの間で許容される彩度の量を制御します。TintLuminosityOpacity: controls the amount of saturation that is allowed through the acrylic surface from the background.
  • BackgroundSource: 背景アクリルまたはアプリ内アクリルのどちらを使用するかを指定するフラグです。BackgroundSource: the flag to specify whether you want background or in-app acrylic.
  • FallbackColor: バッテリー節約機能でアクリルと置き換わる単色です。FallbackColor: the solid color that replaces acrylic in Battery Saver. 背景アクリルでは、フォールバックの色は、アプリが作業中のデスクトップ ウィンドウにない場合、またはアプリが電話や Xbox 上で実行されている場合にもアクリルと置き換わります。For background acrylic, fallback color also replaces acrylic when your app isn’t in the active desktop window or when the app is running on phone and Xbox.

淡色テーマのアクリルの見本

濃色テーマのアクリルの見本

明暗の不透明度と濃淡の不透明度の比較

アクリル ブラシを追加するには、濃色テーマ、淡色テーマ、ハイ コントラスト テーマの 3 つのリソースを定義します。To add an acrylic brush, define the three resources for dark, light and high contrast themes. ハイ コントラストでは、濃色/淡色の AcrylicBrush と同じ x:Key で SolidColorBrush を使用することをお勧めします。Note that in high contrast, we recommend using a SolidColorBrush with the same x:Key as the dark/light AcrylicBrush.

注意

TintLuminosityOpacity 値を指定しない場合、その値は、TintColor および TintOpacity に基づいてシステムによって自動的に調整されます。If you don't specify a TintLuminosityOpacity value, the system will automatically adjust its value based on your TintColor and TintOpacity.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            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"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

次のサンプルは、コードで AcrylicBrush を宣言する方法を示しています。The following sample shows how to declare AcrylicBrush in code. アプリで複数の OS ターゲットがサポートされている場合は、この API がユーザーのコンピューターで利用できることを確認してください。If your app supports multiple OS targets, be sure to check that this API is available on the user’s machine.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
{
    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;
}

アクリルをタイトル バーに拡張するExtend acrylic into the title bar

アプリのウィンドウを滑らかな外観にするには、タイトル バー領域にアクリルを使います。To give your app's window a seamless look, you can use acrylic in the title bar area. この例では、ApplicationViewTitleBar オブジェクトの ButtonBackgroundColor および ButtonInactiveBackgroundColor プロパティを Colors.Transparent に設定することで、アクリルをタイトル バーに拡張します。This example extends acrylic into the title bar by setting the ApplicationViewTitleBar object's ButtonBackgroundColor and ButtonInactiveBackgroundColor properties to Colors.Transparent.

private void ExtendAcrylicIntoTitleBar()
{
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

このコードは、ここに示すようにアプリの OnLaunched メソッド (App.xaml.cs) 内の Window.Activate の呼び出しの後か、アプリの最初のページに配置できます。This code can be placed in your app's OnLaunched method (App.xaml.cs), after the call to Window.Activate, as shown here, or in your app's first page.

// Call your extend acrylic code in the OnLaunched event, after
// calling Window.Current.Activate.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }
        // Ensure the current window is active
        Window.Current.Activate();

        // Extend acrylic
        ExtendAcrylicIntoTitleBar();
    }
}

また、通常はタイトル バーに自動的に表示されるアプリのタイトルを、CaptionTextBlockStyle を使用した TextBlock で描画する必要もあります。In addition, you'll need to draw your app's title, which normally appears automatically in the title bar, with a TextBlock using CaptionTextBlockStyle. 詳しくは、「タイトル バーのカスタマイズ」をご覧ください。For more info, see Title bar customization.

推奨と非推奨Do's and don'ts

  • アクリルは、ナビゲーション ペインなど、アプリのプライマリ サーフェス以外のサーフェスで背景素材として使用してください。Do use acrylic as the background material of non-primary app surfaces like navigation panes.
  • シームレスなエクスペリエンスを実現するには、アプリの周囲とわずかにブレンドするようにして、アクリルをアプリの 1 つ以上の端にまで拡張してください。Do extend acrylic to at least one edge of your app to provide a seamless experience by subtly blending with the app’s surroundings.
  • アプリの大きな背景サーフェスにデスクトップ アクリルを配置しないでください。これを行うと、一時的なサーフェスに対して主に使用されるアクリルのメンタル モデルが破損します。Don't put desktop acrylic on large background surfaces of your app - this breaks the mental model of acrylic being used primarily for transient surfaces.
  • アプリ内アクリルと背景アクリルは、継ぎ目部分での視覚的なテンションを回避するために、隣接するようには配置しないでください。Don’t place in-app and background acrylics directly adjacent to avoid visual tension at the seams.
  • 複数のアクリル ペインを、同じ濃淡や不透明度で隣接するように配置しないでください。このようにすると、望ましくない継ぎ目が表示されます。Don't place multiple acrylic panes with the same tint and opacity next to each other because this results in an undesirable visible seam.
  • アクリル サーフェスの上には、アクセントカラーのテキストを配置しないでください。Don’t place accent-colored text over acrylic surfaces.

アクリルをどのように設計したかHow we designed acrylic

アクリルの主要なコンポーネントを微調整して、ユニークな外観とプロパティを作成しました。We fine-tuned acrylic’s key components to arrive at its unique appearance and properties. 設計の開始時には透明度、ぼかし、ノイズを使い、平坦なサーフェスに視覚的な奥行きとディメンションを追加しました。We started with translucency, blur and noise to add visual depth and dimension to flat surfaces. 除外ブレンド モード レイヤーを追加して、アクリルの背景に配置される UI のコントラストと見やすさを確保しました。We added an exclusion blend mode layer to ensure contrast and legibility of UI placed on an acrylic background. 最後に、ユーザーの個性を反映できるように、色の濃淡を追加しました。Finally, we added color tint for personalization opportunities. 次のレイヤーを組み合わせることで、新しくて使いやすい素材が生みだされます。In concert these layers add up to a fresh, usable material.

アクリルのレシピ Acrylic recipe
アクリルのレシピ: 背景、ぼかし、除外ブレンド、色/濃淡のオーバーレイ、ノイズThe acrylic recipe: background, blur, exclusion blend, color/tint overlay, noise

サンプル コードを入手するGet the sample code

表示ハイライトReveal highlight