ビジュアル レイヤーVisual layer

ビジュアル レイヤーは、グラフィックス、効果、アニメーション用の高パフォーマンスの保持モード API を提供し、Windows デバイス間ですべての UI の基盤となります。The Visual layer provides a high performance, retained-mode API for graphics, effects and animations, and is the foundation for all UI across Windows devices. 宣言的な方法で UI を定義すると、ビジュアル レイヤーは、グラフィックス ハードウェア アクセラレータを利用し、アプリの UI スレッドから独立して、エラーのない、なめらかな方法でコンテンツ、効果、アニメーションをレンダリングします。 You define your UI in a declarative manner and the Visual layer relies on graphics hardware acceleration to ensure your content, effects and animations are rendered in a smooth, glitch-free manner independent of the app's UI thread.

主な特長は次のとおりです。Notable highlights:

  • 使い慣れた WinRT APIFamiliar WinRT APIs
  • さらに動的な UI と対話式操作を実現する設計Architected for more dynamic UI and interactions
  • デザイン ツールとの一貫した概念Concepts aligned with design tools
  • 突然パフォーマンスが低下することがない直線的なスケーラビリティLinear scalability with no sudden performance cliffs

Windows UWP アプリは、いずれかの UI フレームワークを介してビジュアル レイヤーを既に使用しています。Your Windows UWP apps are already using the Visual layer via one of the UI frameworks. 非常にわずかな労力で、カスタム レンダリング、効果、アニメーションに直接ビジュアル レイヤーを利用することもできます。You can also take advantage of Visual layer directly for custom rendering, effects and animations with very little effort.

UI フレームワークの階層: フレームワーク レイヤー (Windows.UI.XAML) はビジュアル レイヤー (Windows.UI.Composition) を基盤とし、ビジュアル レイヤーはさらにグラフィック レイヤー (DirectX) を基盤としている

ビジュアル レイヤーとはWhat's in the Visual layer?

ビジュアル レイヤーの主な機能は次のとおりです。The primary functions of the Visual layer are:

  1. [コンテンツ] :カスタムの描画コンテンツの軽量の複合Content: Lightweight compositing of custom drawn content
  2. 効果:リアルタイム UI 効果システムが効果をアニメーション化、連鎖してカスタマイズできます。Effects: Real-time UI effects system whose effects can be animated, chained and customized
  3. アニメーション:UI スレッドから独立して実行されているアニメーションの表現力豊かな、フレームワークに依存しません。Animations: Expressive, framework-agnostic animations running independent of the UI thread

ContentContent

コンテンツは、ビジュアルを使用するアニメーションおよび効果システムで使用できるように、ホスト、変換、提供されます。Content is hosted, transformed and made available for use by the animation and effects system using visuals. クラス階層の基底クラスは Visual クラスで、コンポジターでビジュアル状態を処理するアプリ プロセスにおける、軽量でスレッド アジャイルなプロキシです。At the base of the class hierarchy is the Visual class, a lightweight, thread-agile proxy in the app process for visual state in the compositor. ビジュアルのサブ クラスが含まれます  ContainerVisual 子のビジュアル ツリーを作成するために、 SpriteVisual ですコンテンツを含み、いずれかの純色、カスタムの描画コンテンツまたは視覚的効果を描画することができます。Sub-classes of Visual include  ContainerVisual to allow for children to create trees of visuals and SpriteVisual that contains content and can be painted with either solid colors, custom drawn content or visual effects. また、これらの種類のビジュアルは 2D UI 用のビジュアル ツリー構造を構成し、多くの表示される XAML FrameworkElements を強化します。Together, these Visual types make up the visual tree structure for 2D UI and back most visible XAML FrameworkElements.

詳しくは、コンポジションのビジュアルの概要をご覧ください。For more information, see the Composition Visual overview.

効果Effects

ビジュアル レイヤーの効果システムでは、ビジュアルやビジュアル ツリーにフィルターや透明効果のチェーンを適用できます。The Effects system in the Visual layer lets you apply a chain of filter and transparency effects to a Visual or a tree of Visuals. これは UI 効果システムであり、画像やメディアの効果を混同しないでください。This is a UI effects system, not to be confused with image and media effects. 効果はアニメーション システムとの組み合わせで動作し、ユーザーは、UI スレッドから独立してレンダリングされる、スムーズで動的な効果プロパティのアニメーションを実現できます。Effects work in conjunction with the Animation system, allowing users to achieve smooth and dynamic animations of Effect properties, rendered independent of the UI thread. ビジュアル レイヤーの効果は、カスタマイズされたと対話型エクスペリエンスを構築するために組み合わせてアニメーション化できる、創造的な構成要素を提供します。Effects in the Visual Layer provide the creative building blocks that can be combined and animated to construct tailored and interactive experiences.

ビジュアル レイヤーは、アニメーション化可能な効果のチェーンに加えて、アニメーション化可能なライトに応答することにより、ビジュアルでマテリアル プロパティを模倣できるようにする照明モデルもサポートします。In addition to animatable effect chains, the Visual Layer also supports a lighting model that allows Visuals to mimic material properties by responding to animatable lights. ビジュアルによって、シャドウを生じさせることもできます。Visuals may also cast shadows. 照明とシャドウを組み合わせて使うことで、奥行きとリアルさを感じられるようにすることができます。Lighting and shadows can be combined to create a perception of depth and realism.

詳しくは、「コンポジションの効果」をご覧ください。For more information, see the Composition Effects overview.

アニメーションAnimations

ビジュアル レイヤーのアニメーション システムによって、移動の視覚効果、効果のアニメーション化、変換、クリップ、その他のプロパティの駆動を実現できます。The animation system in the Visual layer lets you move visuals, animate effects, and drive transformations, clips, and other properties.  これは、パフォーマンスを考慮して一から設計された、フレームワークに依存しないシステムです。  It is a framework agnostic system that has been designed from the ground up with performance in mind.  UI スレッドから独立して実行されるため、滑らかさとスケーラビリティが実現されます。  It runs independently from the UI thread to ensure smoothness and scalability.  使い慣れたキー フレーム アニメーションを使って時間の経過に伴うプロパティの変化を駆動できる一方で、ユーザー入力を含む、さまざまなプロパティ間の数学的な関係を設定して、シームレスな演出エクスペリエンスを直接作成することもできます。  While it lets you use familiar KeyFrame animations to drive property changes over time, it also lets you set up mathematical relationships between different properties, including user input, letting you directly craft seamless choreographed experiences.

詳しくは、コンポジションのアニメーションの概要をご覧ください。For more information, see the Composition animations overview.

XAML UWP アプリの操作Working with your XAML UWP app

Windows.UI.Xaml.HostingElementCompositionPreview クラスを使用して、XAML フレームワークによってビジュアルを作成できるようになり、表示可能な FrameworkElement を強化することができます。You can get to a Visual created by the XAML framework, and backing a visible FrameworkElement, using the ElementCompositionPreview class in Windows.UI.Xaml.Hosting. フレームワークによって作成されたビジュアルには、カスタマイズに関するいくつかの制限があることに注意してください。Note that Visuals created for you by the framework come with some limits on customization. これは、フレームワークがオフセット、変換、有効期間を管理するためです。This is because the framework is managing offsets, transforms and lifetimes. ただし、独自のビジュアルを作成し、ElementCompositionPreview によって、またはビジュアル ツリー構造内のどこかに既にある ContainerVisual に追加することにより、既存の XAML 要素にアタッチできます。You can however create your own Visuals and attach them to an existing XAML element via ElementCompositionPreview, or by adding it to an existing ContainerVisual somewhere in the visual tree structure.

詳しくは、XAML でのビジュアル レイヤーの使用の概要をご覧ください。For more information, see the Using the Visual layer with XAML overview.

デスクトップ アプリの使用Working with your desktop app

ビジュアル レイヤーを使用することで、Windows フォーム、WPF、C++ Win32 デスクトップ アプリの外観、操作性、機能を向上させることができます 。You can use the Visual layer to enhance the look, feel, and functionality of your WPF, Windows Forms, and C++ Win32 desktop apps. Islands のコンテンツを移行してビジュアルレイヤーを使用し、残りのUIを既存のフレームワークに維持することができます。You can migrate islands of content to use the Visual layer and keep the rest of your UI in its existing framework. これは、既存のコードに広範な変更を加えることなく、アプリケーションの UI の重要なプログラム更新や機能強化ができます。This means you can make significant updates and enhancements to your application UI without needing to make extensive changes to your existing code base.

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

その他の資料Additional resources