デスクトップ アプリでのビジュアル層の使用Using the Visual layer in desktop apps

外観、外観と、Windows フォーム、WPF の機能を強化するために、デスクトップ アプリケーションを UWP 以外で UWP Api を使用することができますようになりましたしC++Win32 アプリケーションでのみ UWP を使用して利用できる最新の Windows 10 の UI 機能を活用してください。You can now use UWP APIs in non-UWP desktop applications to enhance the look, feel, and functionality of your WPF, Windows Forms, and C++ Win32 applications, and take advantage of the latest Windows 10 UI features that are only available via UWP.

使用することが多くのシナリオXAML Islandsアプリに最新の XAML コントロールを追加します。For many scenarios, you can use XAML islands to add modern XAML controls to your app. ただし、組み込みのコントロールだけでなくカスタム エクスペリエンスを作成する必要がある場合は、ビジュアル層の Api にアクセスできます。However, when you need to create custom experiences that go beyond the built-in controls, you can access the Visual layer APIs.

ビジュアル層では、高パフォーマンスのグラフィック、エフェクト、およびアニメーションの保持モード API を提供します。The Visual layer provides a high performance, retained-mode API for graphics, effects, and animations. Windows 10 デバイス間で UI の基盤になります。It's the foundation for UI across Windows 10 devices. UWP XAML コントロールは、ビジュアル層で構築され、これにより、さまざまな側面、 Fluent Design System光、深さ、モーション、マテリアル、およびスケールなど。UWP XAML controls are built on the Visual layer, and it enables many aspects of the Fluent Design System, such as Light, Depth, Motion, Material, and Scale.

ビジュアル層で作成されたユーザー インターフェイス

ビジュアル層で作成されたユーザー インターフェイスUser interface created with the visual layer

すべての Windows アプリでの視覚的に魅力的なユーザー インターフェイスを作成します。Create a visually engaging user interface in any Windows app

ビジュアル層では、カスタムの描画コンテンツ (ビジュアル) の軽量の合成を使用して、アプリケーションでそれらのオブジェクトに対して強力なアニメーション、エフェクト、および操作を適用して魅力的なエクスペリエンスを作成できます。The Visual layer lets you create engaging experiences by using lightweight compositing of custom drawn content (visuals) and applying powerful animations, effects, and manipulations on those objects in your application. ビジュアル層は、既存の UI フレームワークに代わるもの代わりに、これらのフレームワークを補足するため貴重になります。The Visual layer doesn't replace any existing UI framework; instead, it's a valuable supplement to those frameworks.

ビジュアル層を使用して、アプリケーションの一意のルック アンド フィールを提供し、他のアプリケーションとは別に設定された id を確立できます。You can use the Visual layer to give your application a unique look and feel, and establish an identity that sets it apart from other applications. ユーザーからに対するエンゲージメントの描画を使用するには、アプリケーションを簡単に設計された Fluent デザインの原則もできます。It also enables Fluent Design principles, which are designed to make your applications easier to use, drawing more engagement from users. たとえば、視覚的な手掛かりと画面上の項目間の関係を示すアニメーション遷移の作成に使用できます。For example, you can use it to create visual cues and animated screen transitions that show relationships among items on the screen.

ビジュアル層の機能Visual layer features

ブラシBrushes

合成ブラシ純色、グラデーション、イメージ、ビデオ、複雑な特殊効果、および詳細を UI オブジェクトを描画することができます。Composition brushes let you paint UI objects with solid colors, gradients, images, videos, complex effects, and more.

マテリアルの作成者で作成された、卵

作成された、egg、マテリアル作成者デモ アプリします。An egg created with the Material Creator demo app.

効果Effects

合成効果ライト、シャドウ、およびフィルター効果の一覧が含まれます。Composition effects include light, shadow, and a list of filter effects. それらをアニメーション化、カスタマイズすると連結するなどしてビジュアルに直接適用。They can be animated, customized, and chained, then applied directly to visuals. 大気、深さ、資料を作成する合成照明と組み合わせて、SceneLightingEffect 使用できます。The SceneLightingEffect can be combined with composition lighting to create atmosphere, depth and materials.

ライトとマテリアル

ライトと素材の説明、サンプル ギャラリーの Windows UI コンポジションします。Lights and material demonstrated in the Windows UI Composition sample gallery.

アニメーションAnimations

合成アニメーションコンポジター プロセスでは、UI スレッドから独立してで直接実行します。Composition animations run directly in the compositor process, independent of the UI thread. これにより、滑らかさとスケール、多数の同時実行、明示的なアニメーションを実行できるようにします。This ensures smoothness and scale, so you can run large numbers of concurrent, explicit animations. 時間の経過と共にドライブ プロパティの変更に使い慣れたキーフレーム アニメーション、だけでなく、ユーザー入力を含む、各種プロパティ間の数学的な関係を設定する式を使用することができます。In addition to familiar KeyFrame animations to drive property changes over time, you can use expressions to set up mathematical relationships between different properties, including user input. 入力の駆動型アニメーションでは、動的かつ流動的に応答する可能性が高いユーザー エンゲージメントをユーザー入力の UI を作成できます。Input driven animations let you create UI that dynamically and fluidly responds to user input, which can result in higher user engagement.

ビジュアル層で作成されたユーザー インターフェイス

示されているモーション、サンプル ギャラリーの Windows UI コンポジションします。Motion demonstrated in the Windows UI Composition sample gallery.

既存のコードベースを保持し、段階的に採用Keep your existing codebase and adopt incrementally

既存のアプリケーションでコードが失われるしたくない多大な投資を表します。The code in your existing applications represents a significant investment that you don't want to lose. 移行することができます_Islands_ビジュアル層を使用し、その既存のフレームワークで、残りの UI へのコンテンツの。You can migrate islands of content to use the Visual layer and keep the rest of the 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.

サンプルおよびチュートリアルSamples and tutorials

サンプルを使って試してみる、アプリケーションで、ビジュアル レイヤーを使用する方法について説明します。Learn how to use the Visual layer in your applications by experimenting with our samples. これらのサンプルとチュートリアル ヘルプ ビジュアル層の使用を開始し、機能のしくみを説明します。These samples and tutorials help you get started using the Visual layer and show you how features work.

Win32Win32

Windows フォームWindows Forms

WPFWPF

制限事項Limitations

ビジュアル層の多くの機能は、UWP アプリでのように、デスクトップ アプリケーションでホストされているときでも同じ動作、一部の機能は制限があります。While many Visual Layer features work the same when hosted in a desktop application as they do in a UWP app, some features do have limitations. ここで注意すべき制限事項の一部を示します。Here are some of the limitations to be aware of:

  • 効果のチェーンが依存Win2D効果の説明についてはします。Effect chains rely on Win2D for the effect descriptions. Win2D NuGet パッケージから再コンパイルすることになるために、デスクトップ アプリケーションでサポートされていない、ソース コードします。The Win2D NuGet package is not supported in desktop applications, so you would need to recompile it from the source code.
  • 実行のヒット テストを自分でビジュアル ツリーをウォークして境界の計算を行う必要があります。To do hit testing, you need to do bounds calculations by walking the visual tree yourself. これは、UWP でのビジュアル層と同じです。 ここでのヒット テストにバインドできます簡単に XAML 要素がない点が異なります。This is the same as the Visual Layer in UWP, except in this case there's no XAML element you can easily bind to for hit testing.
  • ビジュアル層では、テキストのレンダリング プリミティブはありません。The Visual Layer does not have a primitive for rendering text.
  • 2 つの異なる UI テクノロジが一緒に使用される場合は各画面で、独自のピクセルの描画など、WPF とビジュアル層では、およびピクセルを共有することはできません。When two different UI technologies are used together, such as WPF and the Visual Layer, they are each responsible for drawing their own pixels on the screen, and they can't share pixels. その結果、ビジュアル層のコンテンツは常に、その他の UI コンテンツの上にレンダリングされます。As a result, Visual Layer content is always rendered on top of other UI content. (これと呼ばれますが、_空域_問題です)。追加のコーディングを行う必要があり、テスト、ビジュアル層のコンテンツをホストの UI とサイズを変更して、その他のコンテンツがありません。(This is known as the airspace issue.) You might need to do extra coding and testing to ensure your Visual layer content resizes with the host UI and doesn't occlude other content.
  • デスクトップ アプリケーションでホストされているコンテンツは、自動的にサイズを変更または DPI のスケール。Content hosted in a desktop application doesn't automatically resize or scale for DPI. 追加の手順は、コンテンツは、DPI の変更を処理することを確認する必要があります。Extra steps might required to ensure your content handles DPI changes. (詳細についてはプラットフォーム固有のチュートリアルを参照してください)。(See the platform specific tutorials for more info.)

その他のリソースAdditional Resources

API リファレンスAPI reference