UWP 以外のデスクトップ アプリケーションで Windows ランタイム API を使用して、WPF、Windows フォーム、C++ Win32 アプリケーションの外観、操作性、機能を強化し、UWP でのみ使用できる最新のWindows UI 機能を利用できるようになりました。
多くのシナリオでは、 XAML アイランド を使用して、最新の XAML コントロールをアプリに追加できます。 ただし、組み込みのコントロールを超えるカスタム エクスペリエンスを作成する必要がある場合は、Visual レイヤー API にアクセスできます。
ビジュアル レイヤーは、グラフィックス、効果、アニメーション用の高パフォーマンスの保持モード API を提供します。 これは、Windows デバイス全体の UI の基盤です。 UWP XAML コントロールはビジュアル レイヤー上に構築されており、光、深度、モーション、マテリアル、スケールなど、 Fluent Design System の多くの側面を実現します。
ビジュアル レイヤーを使用して作成されたユーザー インターフェイス
Windows アプリで視覚的に魅力的なユーザー インターフェイスを作成する
ビジュアル レイヤーを使用すると、カスタム描画コンテンツ (ビジュアル) の軽量な合成を使用し、アプリケーション内のそれらのオブジェクトに強力なアニメーション、効果、操作を適用することで、魅力的なエクスペリエンスを作成できます。 ビジュアル レイヤーでは、既存の UI フレームワークは置き換えられません。代わりに, それはこれらのフレームワークに貴重なサプリメントです。.
Visual レイヤーを使用すると、アプリケーションに一意の外観を与え、他のアプリケーションとは別に設定する ID を確立できます。 また、アプリケーションを使いやすくするために設計された Fluent Design の原則も可能になり、ユーザーのエンゲージメントを高めることができます。 たとえば、これを使用して、画面上の項目間の関係を示す視覚的な手掛かりやアニメーション化された画面切り替えを作成できます。
ビジュアル レイヤーの特徴
ブラシ
コンポジション ブラシ を使用すると、単色、グラデーション、画像、ビデオ、複雑な効果などを使用して UI オブジェクトを描画できます。
Material Creator デモ アプリで作成された卵。
エフェクツ
合成効果 には、光、影、フィルター効果の一覧が含まれます。 アニメーション化、カスタマイズ、チェーン化を行い、ビジュアルに直接適用できます。 SceneLightingEffect をコンポジション照明と組み合わせて、大気、深さ、マテリアルを作成できます。
Windows UI コンポジション サンプル ギャラリー で示されたライトと素材。
アニメーション
コンポジション アニメーションは、 UI スレッドとは関係なく、コンポジター プロセスで直接実行されます。 これにより、スムーズさとスケールが確保されるため、多数の同時に明示的なアニメーションを実行できます。 時間の経過とともにプロパティの変更を促進する使い慣れた KeyFrame アニメーションに加えて、式を使用して、ユーザー入力を含むさまざまなプロパティ間の数学的リレーションシップを設定できます。 入力駆動型アニメーションを使用すると、ユーザー入力に動的かつ流動的に応答する UI を作成でき、ユーザーエンゲージメントが向上する可能性があります。
Motion は、Windows UI コンポジションサンプル ギャラリーで示されています。
既存のコードベースを維持し、段階的に導入する
既存のアプリケーションのコードは、失いたくない大きな投資を表します。 コンテンツの アイランド を移行してビジュアル レイヤーを使用し、残りの UI を既存のフレームワークに保持することができます。 つまり、既存のコード ベースに大きな変更を加えることなく、アプリケーション UI に対して大幅な更新と機能強化を行うことができます。
サンプルおよびチュートリアル
サンプルを試して、アプリケーションでビジュアル レイヤーを使用する方法について説明します。 これらのサンプルとチュートリアルは、ビジュアル レイヤーの使用を開始し、機能のしくみを示すのに役立ちます。
Win32
Windows フォーム
WPF
Limitations
デスクトップ アプリケーションでホストされている場合、多くのビジュアル レイヤー機能は UWP アプリと同じように動作しますが、一部の機能には制限があります。 注意すべきいくつかの制限事項を次に示します。
- 効果チェーンは、効果の説明に Win2D に依存します。 Win2D NuGet パッケージはデスクトップ アプリケーションではサポートされていないため、source コードから再コンパイルする必要があります。
- ヒット テストを行うには、ビジュアル ツリーを自分で歩いて境界計算を行う必要があります。 これは UWP のビジュアル レイヤーと同じですが、この場合、ヒット テスト用に簡単にバインドできる XAML 要素はありません。
- ビジュアル レイヤーには、テキストをレンダリングするためのプリミティブがありません。
- WPFとビジュアル レイヤーなど、2 つの異なる UI テクノロジを組み合わせて使用する場合、それぞれが画面上に独自のピクセルを描画する役割を果たしており、ピクセルを共有することはできません。 その結果、Visual Layer コンテンツは常に他の UI コンテンツの上にレンダリングされます。 (これは 空域 の問題と呼ばれます)。ホスト UI を使用してビジュアル レイヤーのコンテンツのサイズが変更され、他のコンテンツが隠されないように、追加のコーディングとテストを行う必要がある場合があります。
- デスクトップ アプリケーションでホストされているコンテンツは、DPI のサイズ変更やスケーリングを自動的に行いません。 コンテンツで DPI の変更が確実に処理されるようにするには、追加の手順が必要になる場合があります。 (詳細については、プラットフォーム固有のチュートリアルを参照してください)。
追加リソース
API リファレンス