次の方法で共有

ビジュアル レイヤーの概要

ビジュアル レイヤーは、グラフィックス、効果、アニメーション用の高パフォーマンスの保持モード API を提供し、Windows デバイス全体のすべての UI の基盤となります。 UI は宣言的な方法で定義します。ビジュアル レイヤーはグラフィックス ハードウェア アクセラレーションに依存して、アプリの UI スレッドとは無関係に、コンテンツ、効果、アニメーションがスムーズでグリッチフリーな方法でレンダリングされるようにします。

Microsoft.UI.Composition の型は、Visual レイヤーの Windows App SDK/WinUI 3 実装を形成します。

注目すべきハイライト:

  • 使い慣れた WinRT API
  • より動的な UI と対話のために設計されています
  • 設計ツールと整合されている概念
  • 突然の性能低下がないリニアなスケーラビリティ

WinUI アプリと Windows App SDK アプリでは、いずれかの UI フレームワークを介してビジュアル レイヤーが既に使用されています。 また、ユーザー設定のレンダリング、効果、アニメーションに対してビジュアル レイヤーを直接利用することもできます。

UI フレームワークの階層化: フレームワーク レイヤー (Microsoft.UI.Xaml) は、グラフィックス レイヤー (DirectX) 上に構築されたビジュアル レイヤー (Microsoft.UI.Composition) 上に構築されています

ビジュアル レイヤーの内容

ビジュアル レイヤーの主な機能は次のとおりです。

  1. コンテンツ: カスタム描画コンテンツの軽量合成
  2. 効果: 効果をアニメーション化、チェーン化、カスタマイズできるリアルタイム UI 効果システム
  3. アニメーション: UI スレッドから独立して実行される、フレームワークに依存しない表現力の高いアニメーション

Content

コンテンツはホストされ、変換され、ビジュアルを使用してアニメーションおよび効果システムで使用できるようになります。 クラス階層の基本には 、Visual クラスがあります。これは、コンポジター内の視覚的な状態に対するアプリ プロセスの軽量でスレッド アジャイルなプロキシです。 Visual のサブクラスには ContainerVisual が含まれており、子がコンテンツを含むビジュアルと SpriteVisual のツリーを作成でき、純色、カスタム描画コンテンツ、または視覚効果で描画できます。 これらのビジュアル型は、2D UI のビジュアル ツリー構造を構成し、最も目に見える XAML FrameworkElements を元に戻します。

詳細については、「 コンポジション ビジュアル の概要」を参照してください。

エフェクツ

ビジュアル レイヤーの効果システムでは、フィルター効果と透明度効果のチェーンをビジュアルまたはビジュアルのツリーに適用できます。 これは UI 効果システムであり、画像やメディアの効果と混同しないでください。 効果はアニメーション システムと連携して動作し、UI スレッドとは無関係にレンダリングされる Effect プロパティのスムーズで動的なアニメーションをユーザーが実現できます。 ビジュアルレイヤーの効果は、組み合わせてアニメーション化して、カスタマイズされたインタラクティブなエクスペリエンスを構築できる創造的な構成要素を提供します。

アニメーション化可能なエフェクト チェーンに加えて、ビジュアル レイヤーでは、アニメーション化可能なライトに応答してビジュアルがマテリアルプロパティを模倣できるようにする照明モデルもサポートされています。 ビジュアルは影を付けることもできます。 照明と影を組み合わせて、奥行きと現実感を生み出すことができます。

詳細については、「 コンポジション効果 の概要」を参照してください。

アニメーション

ビジュアル レイヤーのアニメーション システムを使用すると、ビジュアルの移動、効果のアニメーション化、変換、クリップ、その他のプロパティの駆動を行うことができます。 これは、パフォーマンスを念頭に置いてゼロから設計されたフレームワークに依存しないシステムです。 UI スレッドとは別に実行され、滑らかでスケーラビリティが確保されます。 使い慣れた KeyFrame アニメーションを使用して、時間の経過と共にプロパティの変更を促進できますが、ユーザー入力を含むさまざまなプロパティ間の数学的リレーションシップを設定して、シームレスな振り付けエクスペリエンスを直接作成することもできます。

詳細については、「 コンポジション アニメーション の概要」を参照してください。

WinUI XAML の操作

Microsoft.UI.Xaml.Hosting の ElementCompositionPreview クラスを使用して、XAML フレームワークによって作成されたビジュアルにアクセスし、表示されている FrameworkElement をバッキングできます。 フレームワークによって自動的に作成されるビジュアルには、カスタマイズに関するいくつかの制限があることに注意してください。 これは、フレームワークがオフセット、変換、および有効期間を管理しているためです。 ただし、独自のビジュアルを作成し、ElementCompositionPreview を使用して既存の WinUI 要素にアタッチしたり、ビジュアル ツリー構造内の既存の ContainerVisual に追加したりできます。

詳細については、「 XAML でのビジュアル レイヤーの使用 」の概要を参照してください。

デスクトップ アプリの操作

ビジュアル レイヤーを使用すると、Windows アプリ SDK を使用してビルドされた Win32 デスクトップ アプリ、WPF、Windows フォーム、C++ Win32 デスクトップ アプリの外観、操作性、機能を強化できます。 ビジュアル レイヤーを使用するようにコンテンツのアイランドを移行し、UI の残りの部分を既存のフレームワークに保持することができます。 つまり、既存のコード ベースに大きな変更を加えることなく、アプリケーション UI に対して大幅な更新と機能強化を行うことができます。

詳しくは、「Modernize your desktop app using the Visual layer (ビジュアル レイヤーを使用したデスクトップ アプリの現代化)」をご覧ください。

UWP との相違点

Microsoft.UI.Composition 名前空間では、最も一般的に使用されるシナリオで、UWP ビジュアル レイヤー (Windows.UI.Composition) とほぼ同じ機能にアクセスできます。 ただし、例外と違いがあります。

Compositor インスタンスの取得

デスクトップ アプリ (WinUI アプリはデスクトップ アプリ) では 、Window.Current は null。 そのため、Compositor のインスタンスを Window.Current.Compositor から取得することはできません。 WinUI アプリでは、ElementCompositionPreview.GetElementVisual(UIElement) を呼び出してコンポジション ビジュアルを取得し、ビジュアルの Compositor プロパティからを取得することをお勧めします。 UIElement にアクセスできない (CompositionBrush をクラス ライブラリで作成する場合など) 場合は、CompositionTarget.GetCompositorForCurrentThread を呼び出すことができます。

外部コンテンツ

Microsoft.UI.Composition コンポジターは、Windows App SDK アプリ内で完全に実行され、描画されたピクセルにのみアクセスできます。 つまり、 外部 コンテンツ (コンポジターによって描画されなかったコンテンツ) はコンポジターに不明であるため、特定の制限が発生します。

外部コンテンツの例として、(Microsoft.UI.Xaml.Controls) MediaPlayerElement があります。 Windows メディア スタックは、不透明なメディア スワップ チェーン ハンドルを XAML に提供します。 XAML は、そのハンドルをコンポジターに渡し、コンポジターは Windows (Windows.UI.Composition 経由) に渡して表示します。 コンポジターはメディア スワップ チェーン内のどのピクセルも表示できないため、ウィンドウの全体的なレンダリングの一部として合成することはできません。 代わりに、メディア スワップ チェーンを Windows に渡してコンポジターのレンダリングの下にレンダリングし、その下のメディア スワップ チェーンを視覚化できるようにコンポジターのレンダリングから穴を開けます。

外部コンテンツのレンダリングの図

Windows App SDK/WinUI では、次の API はすべて外部コンテンツを作成します。

外部コンテンツを処理するモデルでは、次の制限が作成されます。

  • コンポジター コンテンツを外部コンテンツの背後に置くことはできません。 たとえば、WEBView2 の背後にある XAML ボタンや画像を表示するために、透明な背景を WebView2 に設定することはできません。 外部コンテンツの背後にすることができるのは、他の外部コンテンツとウィンドウの背景のみです。 そのため、外部コンテンツの透明性を推奨または無効にしています。
  • 外部コンテンツからコンポジター コンテンツをサンプリングすることはできません。 たとえば、AcrylicBrush では、MediaPlayerElement からピクセルをサンプリングしたりぼかしたりすることはできません。 AcrylicBrush はコンポジターの画像からサンプリングします。これは、外部のコンテンツ領域に対しては透明な黒として表示されます。 同様に、MicaBackdrop or DesktopAcrylicBackdrop の前にある AcrylicBrush では、背景に描かれる色は見えません。代わりに、ブラシは透明な黒をぼかします。
  • もう 1 つのシナリオは「宛先の反転」と呼ばれます。これは、テキスト ボックス コントロールのキャレットに使用され、テキスト挿入キャレットが前にあるピクセルを反転させます。 コンポジターのサーフェイスから同様にサンプリングされ、テキストボックスにコンポジターによって描画された不透明な背景がない場合には影響を受けます。
  • WinUI SwapChainPanel は外部コンテンツを作成するため、透過性をサポートしていません。 また、AcrylicBrush やその前に CompositionBackdropBrush を使用する他の効果の適用もサポートしていません。

サンプル

Windows App SDK サンプル プロジェクトには、 Microsoft.UI.Composition API を使用して豊富なビジュアル エクスペリエンスを構築する方法を示す包括的なコンポジション サンプル のセットが含まれています。 これらのサンプルは、基本的なレイアウトや変換から、高度な効果、照明、影、プルから更新、視差スクロールなどの InteractionTracker ベースの入力処理まで、さまざまなシナリオに対応しています。 Visual レイヤーの使用を開始する場合でも、独自のアプリで適用するパターンを探している場合でも、これらのサンプルは、構成要素がどのようにまとめられているかを確認するための実用的なリファレンスです。

GitHub のサンプルを調べる: WindowsAppSDK-Samples/ SceneGraph。

アプリ gif

  • Last updated on