トレーニング
モジュール
共有リソースを使用して一貫性のある .NET MAUI XAML ページを設計する - Training
静的共有リソースと動的共有リソースを使用して MAUI ユーザー インターフェイスを構築する方法について説明します。 また、スタイルを使用することで、ユーザー インターフェイスが一貫性とアクセス性の両方を備えたものになることを確認します。
このブラウザーはサポートされなくなりました。
Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。
マイカは、アプリや設定などの長時間のウィンドウの背景を塗り分け、テーマとデスクトップの壁紙を組み込んだ不透明で動的な素材です。 アプリケーションの背景に Mica を適用して、フォーカスのあるウィンドウをいっそう明確にすることで、ユーザーを満足させ、視覚階層を作成し、生産性を向上させることができます。 Mica は、視覚エフェクトを作成するためにデスクトップの壁紙を 1 回サンプリングするだけであり、アプリのパフォーマンスを目的として特に設計されています。 マイカは、Windows 11 バージョン 22000 以降で実行中に、WinUI 2 を使用する UWP アプリと Windows App SDK 1.1 以降を使用するアプリで使用できます。
ライトテーマのマイカ
ダーク テーマでのマイカ
Mica Alt はマイカのバリエーションで、ユーザーのデスクトップ背景色の濃淡が強くなります。 Mica Alt をアプリの背景に適用すると、特にタブ付きのタイトル バーを使用してアプリを作成する場合に、マイカよりも深いビジュアル階層を提供できます。 Mica Alt は、Windows 11 バージョン 22000 以降で実行中に、Windows App SDK 1.1 以降を使用するアプリで使用できます。
これらの画像は、タブ付きのタイトル バーでのマイカと Mica Alt の違いを示しています。 最初の画像はマイカを使用し、2 番目の画像は Mica Alt を使用しています。
マイカと Mica Alt は、他のすべてのコンテンツの背後で、アプリケーションの背景に表示される素材です。 各素材は、ユーザーのテーマとデスクトップの壁紙を組み込み、高度にカスタマイズされた外観を作成する不透明な素材です。 ユーザーが画面上でウィンドウを動かすと、マイカ素材が動的に適応し、アプリケーションの下にある壁紙を使用して豊富な視覚エフェクトを作成します。 さらに、この素材は、アプリが非アクティブな場合に中間色に戻ることで、ユーザーが現在のタスクに集中するのに役立ちます。
マイカまた Mica Alt をアプリの基本レイヤーとして適用し、タイトル バー領域の可視性を優先することをお勧めします。 より具体的なレイヤー化のガイダンスについては、この記事の「 レイヤー化と標高 と Mica を使用した App layering 」セクションを参照してください。
マイカ素材の外観は、さまざまなデバイスやコンテキストに合うように自動的に対応します。 背景の壁紙を 1 回だけキャプチャして視覚エフェクトが作成されるため、パフォーマンスを考慮した設計になっています。
ハイ コントラスト モードでは、Mica または Mica Alt の代わりに、ユーザーが選択した使い慣れた背景色が引き続き表示されます。さらに、Mica マテリアルは、次の場合に単色のフォールバック カラー (マイカの場合はSolidBackgroundFillColorBase
、Mica Alt の場合は SolidBackgroundFillColorBaseAlt
) として表示されます。
標準パターン コンテンツ レイヤー
カード パターン コンテンツ レイヤー
マイカは、非アクティブとアクティブの状態があり、微妙なパーソナル化が可能なため、アプリの階層内の基板レイヤーとして最適です。 2 層のレイヤー化と昇格システムに従う場合は、アプリの基本レイヤーとしてマイカを適用し、基本レイヤーの上に配置される追加のコンテンツ レイヤーを追加してください。 コンテンツ レイヤーは、背景として不透明度の低い単色の LayerFillColorDefaultBrush
を使用して、その背後にある素材 (マイカ) を選択する必要があります。 推奨されるコンテンツ レイヤー パターンは次のとおりです。
LayerFillColorDefaultBrush
WinUIアプリサーフェスのコンテナ背景(Grids、StackPanels、Framesなど)に適用する必要があります。LayerFillColorDefaultBrush
を使用したカード UI の定義については、「レイヤーと昇格ガイダンス」を参照してください。アプリのウィンドウをシームレスに見えるようにするには、アプリに素材を適用する場合に、マイカがタイトル バーに表示されている必要があります。 マイカをタイトル バーに表示するには、アプリをクライアント以外の領域に拡張し、透過的なカスタム タイトル バーを作成します。 詳しくは、「タイトル バー」をご覧ください。
次の例では、タイトル バー領域にマイカが表示される NavigationView を使用したレイヤー戦略の一般的な実装を紹介しています。
既定では、左モードの NavigationView にはコンテンツ領域にコンテンツ レイヤーが含まれます。 この例では、マイカをタイトル バー領域に拡張し、カスタム タイトル バーを作成します。
既定では、上部モードの NavigationView にはコンテンツ領域にコンテンツ レイヤーが含まれます。 この例では、マイカをタイトル バー領域に拡張し、カスタム タイトル バーを作成します。
NavigationView を使用してカード パターンに従う場合は、背景と境界線のテーマ リソースをオーバーライドして、既定のコンテンツ レイヤーを削除する必要があります。 次に、コントロールのコンテンツ領域にカードを作成できます。 この例では、複数のカードを作成し、マイカをタイトル バー領域に拡張して、カスタム タイトル バーを作成します。 カード UI の詳細については、レイヤー化と昇格に関するガイダンスを参照してください。
Mica Alt は、アプリの階層内の基盤レイヤーとしてマイカに代わるもので、非アクティブおよびアクティブの状態と繊細なパーソナル化などの同じ機能を備えています。 タイトル バー要素とアプリのコマンド領域 (ナビゲーション、メニューなど) のコントラストが必要な場合は、アプリの基本レイヤーとして Mica Alt を適用することをお勧めします。
Mica Alt を使用する一般的なシナリオは、タブ付きのタイトル バーを使用してアプリケーションを作成する場合です。 レイヤーと昇格のガイダンスに従うには、Mica Alt をアプリの基本レイヤーとして適用し、ベース レイヤーの上に配置するコマンド レイヤーを追加し、最後にコマンド レイヤーの上に配置する追加のコンテンツ レイヤーを追加することをお勧めします。 コマンドレイヤーは、その背後にあるマテリアルMica AltをピックアップしLayerOnMicaBaseAltFillColorDefaultBrush
、背景として不透明度の低いソリッドカラーを使用します。 コンテンツレイヤーは、その下のレイヤーをピックアップしLayerFillColorDefaultBrush
、別の不透明度の低いソリッド・カラーを使用します。 レイヤー システムは次のとおりです。
LayerOnMicaBaseAltFillColorDefaultBrush
WinUIアプリサーフェスのコマンド領域(MenuBar、ナビゲーション構造など)に適用する必要があります。LayerFillColorDefaultBrush
WinUIアプリサーフェスのコンテナ背景(Grids、StackPanels、Framesなど)に適用する必要があります。アプリのウィンドウをシームレスに見えるようにするには、アプリに素材を適用する場合に、Mica Alt がタイトル バーに表示されている必要があります。 Mica Alt をタイトル バーに表示するには、アプリを非クライアント領域に拡張し、透過的なカスタム タイトル バーを作成します。
WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。
Mica は、WinUI 2 を使用する UWP アプリ、または Windows App SDK 1.1 以降を使用するアプリで使用できます。 Mica Alt は、Windows App SDK 1.1 以降を使用するアプリで使用できます。
WinUI 3 XAML アプリで Mica を使用するには、Windows 11 用デスクトップ アプリの Apply Mica またはアクリル素材を参照してください。
Win32 アプリで Mica を使用するには、Windows 11 用 Win32 デスクトップ アプリの Apply Micaを参照してください。
WinUI 2 で UWP アプリで Mica を使用する方法については、「UWP 用 WinUI 2 を使用したマイカの適用を参照してください。
Windows developer に関するフィードバック
Windows developer はオープンソース プロジェクトです。 フィードバックを提供するにはリンクを選択します。
トレーニング
モジュール
共有リソースを使用して一貫性のある .NET MAUI XAML ページを設計する - Training
静的共有リソースと動的共有リソースを使用して MAUI ユーザー インターフェイスを構築する方法について説明します。 また、スタイルを使用することで、ユーザー インターフェイスが一貫性とアクセス性の両方を備えたものになることを確認します。
ドキュメント
奥行きを加えたり視覚的な階層を確立したりするための半透明のテクスチャを作成するブラシの一種である、アクリルの使用方法について説明します。
Win32 アプリでマイカ素材を使用する - Windows apps
Win32 アプリケーションでマイカ素材を適用する方法について説明します。
WinUI 3 XAML での SystemBackdropController の使用 - Windows apps
WinUI 3 アプリケーションでマイカを適用するためのサンプル コード。