WPFのためのPrism Libraryを使用して、ユーザー・インターフェイスを構築する

Composite Views

特定の機能をサポートするViewは、複雑にすることができます。その場合、いくつかの子Viewに、Viewを分割するといいかもしれません。そして、部品としての子Viewを使用して、それ自体を構築している親Viewを操作する機能があります。アプリケーションは、設計時に、静的にこれを行う可能性があります。あるいは、それは、実行時に、モジュールが含まれている領域を通して、子Viewを追加することを、サポートするかもしれません。あなたが、単一のビュークラスで、完全に定義されていないViewを持っているとき、あなたは、複合Viewとして、それを参照することができます。多くの状況では、複合Viewは、子Viewを構築するための、そして、それらの間で相互作用を調整することのための役割を果たします。あなたは、Prismライブラリ・コマンドとイベント・アグリゲータを使用して、それらの同類のViewとそれらの親の複合Viewから、より疎く結合している子Viewを設計することができます。

Views and Design Patterns

Prismライブラリは、あなたが使用する必要はありませんが、あなたは、いくつかのUIデザイン・パターンの１つを使うことを考える必要があります。Viewを実装するとき、株トレーダーRIとクイックスタートは、ViewのレイアウトとViewのロジックの間で、明確な分離を実装する方法として、Model-View-ViewModel（MVVM）パターンを説明します。

MVVM UIデザインパターンは、Microsoft XAMLプラットホームに自然に適合するため、推奨されます。依存関係プロパティ・システムとこれらのプラットホームの高機能なデータ結合の積み重ねは、疎く結合した方法で情報をやりとりするViewとView Modelに有効です。

ロジックをViewから分離することは、テスト容易性と保守性のために重要です。そして、それは、開発者-デザイナー間の仕事の流れを改善します。

あなたが、ユーザー・コントロールやカスタム・コントロール付きのViewを作成する場合、そして、分離コード・ファイルに、すべてのロジックを配置します。あなたは、ロジックの単体テストに、Viewのインスタンスを作成する必要があるため、あなたのViewは、検証することが困難です。これは、Viewが、その実行コンテクストの一部として、WPFコンポーネントから派生する、あるいは、依存する場合、特に問題です。あなたが、これらの依存関係なしで隔離した状態で、Viewロジックを単体テストできることを確認するために、あなたは、Viewとロジックのために、分離したクラスを必要とする実行コンテクストの依存関係を取り除くために、Viewのモックアップを作成できることが必要です。

あなたが、データ・テンプレートとしてViewを定義する場合、Viewそのものに、関連付けられたコードがありません。その結果、あなたは、他の場所で、関連するロジックを配置する必要があります。また、テスト容易性のためのレイアウトからロジックの同様の明確な分離は、保守するのがより簡単なViewを作成するのを支援するために必要です。

備考： 単体テストとUI自動化テストは、異なる適用範囲で検証するための2つの異なる形式です。

単体テストの推奨される最も効率のよい手法は、オブジェクトが、分離されて検証されます。オブジェクトの分離を達成するために、あなたは、それぞれの外部の依存関係のために、モックアップや下位モジュールの代用品が必要になります。続いて、粗い単体テストは、オブジェクトに対して実行されます。

UI自動化テストは、アプリケーションを実行し、UIにジェスチャーが適用され、そして、その次に、期待される結果のために検証が行われます。この種のテストは、UI要素が、アプリケーション・ロジックに正しく結合されていることを、確かめます。

ロジックをViewから分離することは、関係を明確に分離します。テスト容易性に関する注意事項に加えて、この分離は、UI上で、デザイナーが、開発者と独立して、働くことを可能にします。MVVMの詳細については、MVVMパターンを実装するを参照してください。

Commands, UI Triggers, Actions, and Behaviors

Viewが、分離コード・ファイルで、そのロジックを実装するとき、あなたは、UIの相互作用を便利にするためにイベントハンドラを追加します。しかしながら、あなたが、MVVMを使用すると、View Modelは、UIで呼び出されるイベントを直接処理することができません。View Modelに、UIのジェスチャー・イベントを送るために、あなたは、コマンドやUIのトリガ、動作とふるまいを使用することができます。

Commands

コマンドは、コマンドを実行するロジックから、コマンドを起動する意味規則とオブジェクトを分離します。動作が利用できるかどうかを示す機能が、コマンドに構築されます。UIのコマンドは、View ModelのICommandプロパティに結合されるデータです。コマンドの詳細については、コマンドのMVVMパターンを実装するを参照してください。

UI Triggers, Actions, and Behaviors

トリガ、動作とふるまいは、Microsoft.Expression.Interactivity名前空間の一部で、Visual Studio 2013のためのBlendで運ばれます。また、それらはBlend SDKの一部です。UIのイベントやコマンドを取り扱うための、トリガ、動作とふるまいは、包括的なAPIを提供します。 そして、その次に、それらを、DataContextによって公開されるICommandプロパティ・メソッドに、送ります。UIのトリガ、動作、とふるまいの詳細については、「MVVMパターンを実装する」のセクションと「高等なMVVMの筋書き」の中の「トリガとコマンドの相互作用」を参照してください。

User Interactions

ユーザーとの対話処理は、アプリケーションがユーザーに贈る相互作用です。これらの相互作用は、一般的に、ユーザーに提示されるポップアップウィンドウです。MVVMの筋書きでは、これらのユーザーとの対話処理は、Viewから、あるいは、View Modelから作成することができます。Prismは、View Modelが、ユーザーとの対話処理を要求する必要があるとき、そして、指定されたイベントが、起動されたとき、Viewが、コマンドを呼び出す必要がある時のためのInvokeCommandAction動作は、InteractionRequestsと事例のために、InteractionRequestTriggersを提供します。

ユーザー相互作用、例とそれらを使用する方法の詳細については、インタラクティブ性のクイックスタートを参照してください。

Data Binding

データ結合は、XAMLのプラットホームの最も重要なフレームワーク機能の1つです。XAMLのプラットホーム上で、うまくアプリケーションを開発するために、あなたは、データ結合をしっかりと理解する必要があります。

データ結合は、依存関係プロパティ・システムで、提供される固有の変更通知を最大限に活用します。INotifyPropertyChangedインターフェイスの共通言語ランタイム（CLR）のクラス実装と組み合わせると、変更通知は、データ結合に関与している対象とソース・オブジェクトの間に、コードなしで相互作用を有効にします。

データ結合は、1つの型を他の型に変換する値コンバータを使用して、異なる目標とソースの型をデータ結合に使用可能にします。データ結合は、あなたが、ユーザー入力を検証するために、使用することができる、そのパイプラインの中で、複数の妥当性検証フックを備えています。

あなたが、MSDNの依存関係プロパティの概要とデータ結合の概要の話題を読むことを強くお勧めします。これらの2つの話題を十分に理解することは、Microsoft XAMLプラットホーム上で、効率よくアプリケーションを開発するために、重要な意味があります。データ結合の詳細については、データ結合のMVVMパターンを実装するを参照してください。

Region Manager

RegionManagerクラスは、ホスト・コントロールのために、領域のコレクションを作成し、管理するための役割を果たします。RegionManagerは、新しい領域とホスト・コントロールを関連付けるコントロール固有のアダプタを使用します。次の図は、RegionManagerによって、領域、コントロールとアダプタの間で設定される、リレーションシップを示します。

RegionManagerは、コードやXAML内で、領域を作成することができます。RegionManager.RegionName添付プロパティは、添付プロパティをホスト・コントロールに適用することによって、XAMLで領域を作成するために使用されます。

Applicationsは、RegionManagerの１つ以上のインスタンスを含むことができます。あなたは、あなたが、領域を登録したい、RegionManagerインスタンスを指定することができます。あなたが、コントロールをビジュアル・ツリーに移動したい場合、これは役に立ちます。そして、添付プロパティの値が削除されたとき、領域をクリアする必要はありません。

RegionManagerは、その領域を共有されたデータにする、RegionContext添付プロパティを提供します。

Region Implementation

領域は、IRegionインターフェイスを実装するクラスです。領域という用語は、UIに示される動的なデータを格納することができるコンテナを表します。領域は、Prismライブラリを、UIのコンテナ内の、定義済みプレースホルダのモジュールに含まれる動的なコンテンツに配置できます。

領域は、どんなUIコンテンツの型も格納することができます。モジュールは、ユーザー・コントロール、データ・テンプレート、カスタム・コントロール、あるいは、これらのどんな組合せにでも関連付けられるデータ型として示される、UIコンテンツを含めることができます。これは、あなたが、UI領域のための外観を定義できます。そして、その次に、これらの予め定められた領域のコンテンツに配置したモジュールを持っています。

領域は、0以上項目を含めることができます。領域が管理しているホスト・コントロールの型に従い、一つ以上の項目は、表示されることがありえました。例えば、ContentControlは、一つのオブジェクトだけを表示することができます。しかしながら、それが配置される領域は、多くの項目を含めることができます。そして、UIで表示される領域で、それぞれの項目を提供するItemsControlは、複数の項目を表示することができます。

次の説明の、株トレーダーRIシェルには、4つの領域が含まれています。：MainRegion、MainToolbarRegion、ResearchRegionとActionRegion。これらの領域は、アプリケーションにおいてさまざまなモジュールに埋め込まれます。－内容は、いつでも変更することができます。

Module User Control to Region Mapping

どのようなモジュールと内容が、領域で関連付けられるか説明するために、次の図を見て下さい。それは、シェルの対応する領域に、WatchModuleとNewsModuleの関連付けを示します。

MainRegionには、WatchModuleに含まれてる、WatchListViewのユーザー・コントロールが含まれています。ResearchRegionは、同様に、NewsModuleに含まれている、ArticleViewユーザー・コントロールが含まれています。

Prismライブラリで作成されたアプリケーションでは、このようなマッピングは、設計者と開発者は、それらを、どんな内容が、特定の領域に提案されているかを決定するために使用するため、設計プロセスの一部です。これは、デザイナーが、必要な全体的な空間とどんな追加された内容が、許容される空間で見えるように、確認するために追加する必要がある項目でも決定できます。

Default Region Functionality

あなたが、それらを使用するための領域の実装を完全に理解する必要がない間、それは、コントロールと領域がどのように関連付けられ、そして、既定の領域の機能を理解するために役に立つかもしれません。：例えば、どのように、領域を配置し、そして、Viewをインスタンスかするか、 それらが、アクティブViewであるとき、Viewが、どのように通知されか、あるいは、Viewの寿命が、アクティブ化に、どのように結び付けられるか、

次のセクションでは、領域アダプタと領域のふるまいを説明します。

Region Adapter

領域としてUIコントロールを公開するために、領域アダプタを持っている必要があります。領域アダプタは、領域を作成するための、そして、それとコントロールを関連付けるための、役割を果たします。これは、あなたが、同一の方法で、UIコントロールの内容を管理するために、IRegionインターフェイスを使用できます。それぞれの領域アダプタは、UIコントロールの特定の型に合わせます。Prismライブラリは、次の3つの領域アダプタを提供します。：

• ContentControlRegionAdapter。 このアダプタは、System.Windows.Controls.ContentControl型と派生クラスのコントロールに適応させます。
• SelectorRegionAdapter。 このアダプタは、System.Windows.Controls.TabControlコントロールのような、System.Windows.Controls.Primitives.Selectorクラスから派生したコントロールに適応させます。
• ItemsControlRegionAdapter。 このアダプタは、System.Windows.Controls.ItemsControl型と派生クラスのコントロールに適応させます。

Region Behaviors

Prismライブラリは、領域ビヘイビアの概念を導入します。これらは、領域に大部分のその機能を与える、接続可能なコンポーネントです。（このトピックで後述される）領域ビヘイビアは、View発見と地域背景をサポートするために導入されました。そして、APIを作成するために、 WPFとSilverlightの両方で、一貫性があります。さらに、ふるまいは、領域の実装を拡張するための効果的な方法を提供します。

領域ビヘイビアは、領域に追加された機能を与えるために領域に添付されるクラスです。このふるまいは、領域に添付され、領域の寿命のためにアクティブなままです。例えば、AutoPopulateRegionBehaviorが、領域に添付されるとき、それは、自動的に、インスタンスを生成し、そして、その名前の領域に対して登録される、どんなViewTypesでも追加します。領域の寿命のために、それは、新しい登録のために、RegionViewRegistryを監視し続けます。それは、システム全体、あるいは、地域単位基準のどちらでも、ユーザー定義した領域ビヘイビアを追加することが、あるいは、既存のふるまいを置き換えることが簡単です。

次の項目では、自動的に、すべての領域に追加する、既定の動作を説明します。1つのふるまいとして、SelectorItemsSourceSyncBehaviorは、Selectorから派生するコントロールに添付されるだけです。

Registration Behavior

RegionManagerRegistrationBehaviorは、領域が正しいRegionManagerに登録されていることを確認するための役割を果たします。Viewやコントロールが、他のコントロールの子、あるいは、領域のとして、ビジュアル・ツリーに追加されるとき、コントロールに定義されたどんな領域でも、親のコントロールのRegionManagerで登録する必要があります。子のコントロールが削除されるとき、登録された領域は、登録されていません。

Auto-Population Behavior

View発見を実装するために、役割を果たす2つのクラスがあります。それらの一つは、AutoPopulateRegionBehaviorです。それが、領域に添付されるとき、領域という名前で登録される、すべてのView型を取得します。それは、続いて、それらのViewのインスタンスを作成し、そして、それらを領域に追加します。領域が作成されたあと、AutoPopulateRegionBehaviorは、その領域の名前のための、どんな新たに登録されたView型でも、RegionViewRegistryを監視します。

あなたが、View発見プロセスをより多く制御したい場合、IRegionViewRegistryとAutoPopulateRegionBehaviorのあなた独自の実装を作成することを考えてみてください。

Region Context Behaviors

領域コンテクストの機能は、2つのふるまいの中に含まれています。：SyncRegionContextWithHostBehaviorとBindRegionContextToDependencyObjectBehavior。これらのふるまいは、領域で作成されたコンテクストに変更を監視するための役割を与えます。そして、その次に、コンテクストとViewに添付されるコンテクスト依存関係プロパティを同期させます。

Activation Behavior

RegionActiveAwareBehaviorは、アクティブ、あるいは、非アクティブである場合、Viewに通知するための役割を果たします。Viewは、これらの変更通知を受け取るIActiveAwareを実装している必要があります。このアクティブな通知の認識は（ビヘイビアからViewに移動する）一方向性です。Viewは、IActiveAwareインターフェイスでアクティブ・プロパティを変更することによって、そのアクティブな状態に影響を及ぼすことができません。

Region Lifetime Behavior

RegionMemberLifetimeBehaviorは、非アクティブになるとき、項目が、領域から削除される場合、決定するための役割を果たします。 RegionMemberLifetimeBehaviorは、項目を発見するために、非アクティブ状態に移行する領域のActiveViewsコレクションを監視します。 ビヘイビアは、削除された上で、生きた状態で維持する必要がある場合、（その順番で）決定するための、IRegionMemberLifetime、あるいは、RegionMemberLifetimeAttributeのための削除された項目を確認します。

コレクションの項目が、System.Windows.FrameworkElementである場合、また、それは、IRegionMemberLifetimeやRegionMemberLifetimeAttributeのためのそのDataContextを確認します。

領域の項目は、以下の順序で確認されます：

• IRegionMemberLifetime.KeepAlive値
• DataContextのIRegionMemberLifetime.KeepAlive値
• RegionMemberLifetimeAttribute.KeepAlive値
• DataContextのRegionMemberLifetimeAttribute.KeepAlive値

Control-Specific Behaviors

SelectorItemsSourceSyncBehaviorは、WPFのTabコントロールのような、Selectorから派生するコントロールのために、一つたけ使用されています。それは、セレクタの項目で領域で、そして、その次に、領域内の同期するアクティブViewのセレクタの選択した項目で、Viewを同期させるための役割を果たします。

Extending the Region Implementation

Prismライブラリは、カスタマイズ可能な拡張ポイントを提供します。あるいは、提供されたAPIの既定の動作を拡張します。例えば、あなたは、ナビゲーションAPIが、URIsを解析する、あなた独自の領域アダプタ、領域ビヘイビアや変更方法を記述することができます。Prismライブラリを拡張する方法の詳細については、Prismライブラリを拡張するを参照してください。

View Discovery

View発見では、あなたは、RegionViewRegistryで、領域の名前とViewの型の間の、リレーションシップを設定します。領域が作成されるとき、領域は、領域と自動的にインスタンスを生成、そして、対応するViewを読み込みに関連する、すべてのViewTypesを探します。その結果、 View発見を使用して、あなたは、領域に一致するViewが、読み込まれ、表示される時、制御をこえて、明示する方法を持っていません。

View Injection

View注入では、あなたのコードは、領域に参照を取得し、そして、その次に、Viewが、プログラム的に追加されます。通常、これは、モジュールを初期化する時、あるいは、ユーザーの動作の結果として、実行されます。あなたのコードは、RegionManagerに名前で特定の領域を問い合わせ、そして、その次に、Viewを注入します。View注入で、あなたは、Viewが、読み込まれ、表示されるとき、より多くの制御を持っています。また、あなたは、領域から、Viewを削除するための機能を持っています。しかしながら、あなたは、View注入で、まだ作成されていない領域に、Viewを追加することができません。

Navigation

Prismライブラリ4.0には、ナビゲーションAPIが含まれています。ナビゲーションAPIは、あなたが、領域をURIに操作できるview注入プロセスを簡素化します。ナビゲーションAPIは、Viewのインスタンスを生成し、領域に、それを追加し、そして、その次に、それをアクティブ化します。さらに、ナビゲーションAPIは、領域に含まれる、以前に作成されたViewへ戻る操作ができます。ナビゲーションAPIの詳細については、ナビゲーションを参照してください。

When to Use View Discovery vs. View Injection

領域は、依存するアプリケーション要件と領域の機能を使用するために、Viewの読み込み戦略を選択します。

次に示す状況で、View発見を使用します。：

• 自動View読み込みは、要求される、あるいは、必要とされます。
• Viewの一つのインスタンスは、領域に読み込まれます。

次に示す状況で、View注入を使用します。：

• あなたのアプリケーションは、ナビゲーションAPIを使用します。
• Viewが作成され、表示される、あるいは、領域からViewを削除する必要があるとき、あなたは、明示する、あるいは、プログラムに基づいて、制御する必要があります。;例えば、アプリケーションのロジックやナビゲーションの結果として、
• あなたは、それぞれのViewインスタンスが、異なるデータに結合される領域で、同じViewの複数のインスタンスを表示する必要があります。
• あなたは、Viewが追加される領域のインスタンスを制御するために必要です。例えば、あなたは、特定の利用者の内容の領域に、顧客の内容のViewを追加することを望みます。（この筋書きは、この話題の後で説明される、実装するスコープの領域を必要とします）。

Implementing the Shell

シェルは、主要なUIコンテンツが含まれているアプリケーションのルート・オブジェクトです。Windows Presentation Foundation（WPF）アプリケーションでは、シェルは、Windowオブジェクトです。

シェルは、モジュールが表示されるViewを指定できる名前を付けた領域を含めることができます。また、それは、メインメニューとツールバーのような、特定の最上位のUI要素を定義することができます。シェルは、アプリケーションのための全体的な構造と外観を定義し、そして、ASP.NETのマスター・ページ・コントロールと類似しています。それは、シェルのレイアウトそのものに存在し表示される、スタイルと境界線を定義することができます。そして、また、それは、シェルに接続され、Viewに適用されるスタイル、テンプレートとテーマを定義できます。

あなたは、Prismライブラリを使用するために、アプリケーション・アーキテクチャの一部として、異なったシェルを持つ必要はありません。あなたが、完全に新しい複合アプリケーションを構築している場合、シェルを実装することは、明確に定義されたルート、そして、あなたのアプリケーションの中心となるUIを設定するための初期化パターンを提供します。しかしながら、あなたが、Prismライブラリの機能を既存のアプリケーションに追加している場合、あなたは、シェルを追加するアプリケーションの基本的なアーキテクチャを変更する必要はありません。その代わりに、あなたは、必要に応じてViewを引き出すことができる領域を追加するために、既存のウィンドウ定義やコントロールを変更することができます。

また、あなたにはアプリケーションに、１つ以上のシェルを持つことができます。あなたのアプリケーションが、ユーザーのために、１つ以上の最上位ウィンドウを開くための設計がされている場合、それぞれの最上位ウィンドウは、それが含まれる内容のシェルとして動作します。

Stock Trader RI Shell

WPFの株トレーダーRIには、そのメイン・ウィンドウとしてシェルを持っています。次の説明では、シェルとViewに焦点を当てます。シェルは、株トレーダーRIが開始するとき、表示されるメイン・ウィンドウです。そして、それには、すべてのViewが含まれています。それは、領域を、CFIの株トレーダー・タイトルと監視リストの切り取りバナーが含まれている、Viewと最上位のUIの項目の一組を追加するモジュールに定義します。

株トレーダーRIのシェルの実装は、Shell.xaml、その分離コード・ファイルのShell.xaml.cs、そして、そのView ModelのShellViewModel.csによって提供されています。Shell.xamlには、モジュールが、Viewを追加する領域の定義が含まれているシェルの一部であるレイアウトとUI要素が含まれています。

次のXAMLは、シェルを定義する構造と中心となるXAMLの要素を示しています。RegionNameが、プロパティを添付した4つの領域を定義するために、ウィンドウの背景画像は、シェルのための背景を提供するために使用されることに注意します。

<!--Shell.xaml (WPF) -->
<Window x:Class="StockTraderRI.Shell">

    <!--shell background -->
    <Window.Background>
        <ImageBrush ImageSource="Resources/background.png" Stretch="UniformToFill"/>
    </Window.Background>

    <Grid>

        <!-- logo -->
        <Canvas x:Name="Logo" ...>
            <TextBlock Text="CFI" ... />
            <TextBlock Text="STOCKTRADER" .../>
        </Canvas>

        <!-- main bar -->
        <ItemsControl 
            x:Name="MainToolbar"
            prism:RegionManager.RegionName="{x:Static inf:RegionNames.MainToolBarRegion}"/>

        <!-- content -->
        <Grid>
            <Controls:AnimatedTabControl
                x:Name="PositionBuySellTab"
                prism:RegionManager.RegionName="{x:Static inf:RegionNames.MainRegion}"/>
        </Grid>

        <!-- details -->
        <Grid>
            <ContentControl
                x:Name="ActionContent"
                prism:RegionManager.RegionName="{x:Static inf:RegionNames.ActionRegion}"/>
        </Grid>

        <!-- sidebar -->
        <Grid x:Name="SideGrid">
            <Controls:ResearchControl
                prism:RegionManager.RegionName="{x:Static inf:RegionNames.ResearchRegion}" />
        </Grid>

    </Grid>
</Window>

シェル・コード・ビハインド・ファイルの実装は、極めて簡単です。Shellがエクスポートされるため、ブートストラッパーが、それを作成する時、その依存関係は、拡張管理フレームワーク(MEF)で解決されます。次の例に示すように、シェルは、構築の間に注入されるShellViewModelの一つの依存関係を備えています。

// Shell.xaml.cs
[Export]
public partial class Shell : Window
{
    public Shell()
    {
        InitializeComponent();
    }

    [Import]
    ShellViewModel ViewModel
    {
        set
        {
            this.DataContext = value;
        }
    }
}

// ShellViewModel.cs
[Export]
public class ShellViewModel : BindableBase
{
    // This is where any view model logic for the shell would go.
    // ここは、シェルが進むためのView Modelロジックの場所です。
}

コード・ビハインド・ファイルの最小のコードは、複合アプリケーション・アーキテクチャの機能と単純さ、そして、シェルとその構成Viewの間の疎結合を説明します。

Defining Regions

あなたは、領域として知られている、Viewが定義したlocationsと名前を付けたレイアウトで表示される場所を定義します 。領域は、実行時に表示される１つ以上のViewのための記入子として動作します。モジュールは、どのように、そして、どこの領域に表示されるか知ることなく、内容をレイアウトに配置し、そして、追加することができます。これは、内容をレイアウトに追加するモジュールに影響を及ぼすことなく、レイアウトを変更できます。

領域は、XAML内で、先程のShell.xamlファイルやコードとして示された、WPFコントロールに領域の名前を割り当てることによって定義します。領域は、それらの領域の名前でアクセスすることができます。実行時に、Viewは、続いて、レイアウト戦略通りに、Viewが実装するViewやViewsを表示する、名前を付けたRegionコントロールに追加されます。例えば、Tabコントロールの領域は、タブ付きの配列で、その子Viewを配置します。領域は、Viewの追加や削除をサポートしています。Viewは、プログラム上で、あるいは、自動的に、領域内で作成し、そして、表示することができます。Prismライブラリでは、前者は、view注入を通して、後者は、View発見を通して達成されます。これらの2つの技術は、どのように、それぞれのViewが、アプリケーションUIの範囲内で名前を付けた領域にマッピングするかを決定します。

アプリケーションのシェルは、最高水準のアプリケーション・レイアウトを定義します。;例えば、次の図に示すように、中心となる内容とナビゲーションの内容のための場所を指定することによって、これらの高水準View内のレイアウトは、同じように定義し、全体のUIを再帰的に構成できます。

領域は、ときどき、論理的に関連がある複数のビューのための場所を定義するために使用されます。この予想される展開では、領域コントロールは、一般的に、それが実装するレイアウト戦略に従って、積み重ねられたり、タブ付きのレイアウト配置のような、Viewを表示するItemsControlから派生したコントロールです。

また、領域は、単一のViewのための場所を定義するために使用することができます。;例えば、ContentControlを使用して。この予想される展開では、領域コントロールは、たとえ１つ以上のViewが、その領域の場所にマッピングされているとしても、一度に、1つのViewだけを表示します。

株トレーダーRIのシェル領域

IRegion

public interface IRegion : INavigateAsync, INotifyPropertyChanged
{
    IViewsCollection Views { get; }
    IViewsCollection ActiveViews { get; }
    object Context { get; set; }
    string Name { get; set; }
    Comparison<object> SortComparison { get; set; }
    IRegionManager Add(object view);
    IRegionManager Add(object view, string viewName);
    IRegionManager Add(object view, string viewName, bool createRegionManagerScope);
    void Remove(object view);
    void Deactivate(object view);
    object GetView(string viewName);
    IRegionManager RegionManager { get; set; }
    IRegionBehaviorCollection Behaviors { get; }
    IRegionNavigationService NavigationService { get; set; }
}

XAMLで領域を追加する

<!-- (WPF) -->
<Controls:AnimatedTabControl 
    x:Name="PositionBuySellTab"
    prism:RegionManager.RegionName="{x:Static inf:RegionNames.MainRegion}"/>

コードを使用して、領域を追加します。

IRegionManager regionManager = ServiceLocator.Current.GetInstance<IRegionManager>();
RegionManager.SetRegionManager(this.ActionContent, regionManager);
RegionManager.SetRegionName(this.ActionContent, "ActionRegion");

Displaying Views in a Region When the Region Loads

View発見の方法で、モジュールは、特定の名前を付けた場所のために、View（Viewモデルやプレゼンテーション・モデル）を登録することができます。その場所が、実行時に表示されるとき、どんなViewでも、その場所が、自動的に、作成され、表示されるために、登録されています。

モジュールは、レジストリでViewを登録します。親のViewは、名前を付けた場所のための登録されたViewを発見するために、このレジストリを問い合わせます。それらが発見されたあと、親のViewは、それらを記入子コントロールに追加することによって、画面上のそれらのViewに配置します。

アプリケーションが読み込まれたあと、複合Viewは、レジストリに追加された新しいViewの設置を取り扱うために、通知されます。

次に示す図は、View発見アプローチを示しています。

Prismライブラリは、これらの名前を付けた場所のためのViewを登録するために、標準的なレジストリのRegionViewRegistryを定義します。

領域内に、Viewを表示するには、次のコードの例に示すように、領域マネージャーとViewを登録します。あなたは、直接、領域でView型を登録することができます。この場合、領域を格納しているコントロールが読み込まれるとき、Viewは、依存関係注入コンテナで構築され、そして、領域に追加されます。

// View discovery
this.regionManager.RegisterViewWithRegion("MainRegion", typeof(EmployeeView));

必要に応じて、あなたは、次の例で示すように、表示されているViewを返すデリゲートを提供することができます。領域マネージャーは、領域が作成されるとき、Viewを表示します。

// View discovery
this.regionManager.RegisterViewWithRegion("MainRegion", () => this.container.Resolve<EmployeeView>());

UIの構成クイックスタートは、RegisterViewWithRegionメソッドを、どのように使用するかを説明する、EmployeeModule ModuleInit.csファイルのチュートリアルを持っています。

プログラムで、領域内にViewを表示する

// View injection
IRegion region = regionManager.Regions["MainRegion"];

var ordersView = container.Resolve<OrdersView>();
region.Add(ordersView, "OrdersView");
region.Activate(ordersView);

領域ナビゲーション

this.regionManager.RequestNavigate(RegionNames.SecondaryRegion, new Uri("/NewsReaderView", UriKind.Relative));

領域内の並べ替えView

[Export]
[ViewSortHint("01")]
public partial class EmailNavigationItemView { ... }

[Export]
[ViewSortHint("02")]
public partial class CalendarNavigationItemView { ... }

[Export]
[ViewSortHint("03")]
public partial class ContactsDetailNavigationItemView { ... }

[Export]
[ViewSortHint("04")]
public partial class ContactsAvatarNavigationItemView { ... }

Sharing Data Between Multiple Regions

Prismライブラリは、あなたの筋書きに依存する、Viewの間で情報をやりとりする、複数の方法を提供します。領域マネージャーは、これらの方法の1つとして、RegionContextプロパティを提供します。

あなたが、領域に格納される親Viewと子Viewの間でコンテクストを共有したいとき、RegionContextは、役に立ちます。RegionContextは、添付プロパティです。あなたは、領域コントロール上の、コンテクストの値を設定するため、それは、領域コントロールで表示する、すべての子Viewを利用できるようにすることができます。領域コンテクストは、どんな簡単な、あるいは、複雑なオブジェクトでも、そして、データバインド値でもできます。RegionContextは、View発見やView注入のどちらでも使用することができます。

備考 WPFのDataContextプロパティは、Viewのためのローカルデータ・コンテクストを設定するために、使用されます。それは、Viewが、View Model、ローカル・プレゼンターやモデルで情報をやりとりするための、データ結合を使用できます。RegionContextは、複数のビューの間で、そして、単一のViewへのローカルではない、コンテクストを共有するために使用されています。それは、複数のビューの間で、コンテクストを共有するための、簡単な仕組みを提供します。

次のコードは、XAMLのRegionContext添付プロパティが、どのように使用されるかを表示します。

<TabControl AutomationProperties.AutomationId="DetailsTabControl" 
    prism:RegionManager.RegionName="{x:Static local:RegionNames.TabRegion}"
    prism:RegionManager.RegionContext="{Binding Path=SelectedEmployee.EmployeeId}"
...>

次の例に示すように、あなたは、また、コードのRegionContextを設定することができます。

RegionManager.Regions["Region1"].Context = employeeId;

ViewのRegionContextを取得するには、RegionContextクラスのGetObservableContext staticメソッドは、使用されます。次のコードの例に示すように、それは、パラメータとしてViewを渡して、続いて、そのValueプロパティにアクセスします。

private void GetRegionContext()
{
    this.Model.EmployeeId = (int)RegionContext.GetObservableContext(this).Value;
}

RegionContextの値は、単純に、新しい値を、そのValueプロパティに割り当てることによって、View内から変更されることができます。Viewは、GetObservableContextメソッドによって返される、ObservableObject上でPropertyChangedイベントを購読することによって、RegionContextに変更を通知することを選択することができます。それは、それらのRegionContextが変更されるとき、複数のビューを同期し続けることができます。次のコードの例は、PropertyChangedイベントを購読することを説明します。

ObservableObject<object> viewRegionContext = 
                RegionContext.GetObservableContext(this);
viewRegionContext.PropertyChanged += this.ViewRegionContext_OnPropertyChangedEvent;

private void ViewRegionContext_OnPropertyChangedEvent(object sender, 
                    PropertyChangedEventArgs args)

{
    if (args.PropertyName == "Value")
    {
        var context = (ObservableObject<object>) sender;
        int newValue = (int)context.Value;
    }
}

備考： RegionContextは、内容のオブジェクトの添付プロパティが領域で格納したので、設定されます。これは、内容のオブジェクトがDependencyObjectから、派生することを示しています。前述の例では、Viewは、最終的に、DependencyObjectから派生する、ビジュアル・コントールです。

あなたが、あなたのViewを定義するWPFのデータ・テンプレートを使うことを選択する場合、内容オブジェクトは、ViewModelやPresentationModelを表します。あなたのViewモデルやプレゼンテーション・モデルが、RegionContextを取り出すことを必要とする場合、それは、DependencyObject基底クラスから派生する必要があります。

Creating Multiple Instances of a Region

スコープの領域は、View注入でのみ利用できます。あなたは、あなたが、領域のそれ自身のインスタンスを持つために、Viewが必要な場合、それらを使用する必要があります。自動的に添付プロパティで領域を定義するViewは、それらの親のRegionManagerを継承します。通常、これは、シェルウィンドウの中で登録される、グローバルRegionManagerです。アプリケーションが、そのViewの１つ以上のインスタンスを作成する場合、それぞれのインスタンスは、親のRegionManagerでその領域を登録しようとします。RegionManagerは、一意の名前を付けた領域だけを提供します。;したがって、2回目の登録は、エラーを生じます。

その代わりに、次の図に示すように、スコープされた領域を使用するため、各々のViewは、それ自身のRegionManagerを持っており、そして、その領域は、親のRegionManagerではなく、そのRegionManagerで登録されます。

次のコードの例で説明されるように、あなたが、あなたのViewを領域に追加するとき、Viewのための、ローカルRegionManagerを作成するために、作成する必要がある、新しいRegionManagerを指定します。

IRegion detailsRegion = this.regionManager.Regions["DetailsRegion"];
View view = new View();
bool createRegionManagerScope = true;
IRegionManager detailsRegionManager = detailsRegion.Add(view, null, createRegionManagerScope);

Viewは、ローカル・スコープに更にアクセスするために、新しいRegionManagerを返すAddメソッドを保持することができます。

Creating Views

あなたのアプリケーションの視覚的な表示は、少し例を挙げれば、ユーザー・コントロール、カスタム・コントロールとデータ・テンプレートが含まれている多くのフォ－ムを取得することができます。株トレーダーRIの場合には、ユーザー・コントロールは、一般的に、メイン・ウィンドウで異なった項目を表示するために使用されますが、これは標準ではありません。あなたのアプリケーションでは、あなたは、あなたが最も使い慣れている方法を使用する必要があります。そして、それは、あなたが、デザイナーとして、どのように作業するかに合わせます。あなたのアプリケーションの優れている視覚的な表示に関係なく、あなたは、必然的に、全体的なデザインで、ユーザー・コントロール、カスタム・コントロールとデータ・テンプレートの組合せを使用します。次の図は、株トレーダーRIが、これらのさまざまな項目を使用するところを示します。また、この図は、項目の各々を説明する、以降のセクションの基準になります。

ユーザー・コントロール

ユーザー定義したコントロール

データ・テンプレート

リソース

アプリケーション・リソース

モジュール・リソース

コントロール・リソース

UI Design Guidance

この話題の目標は、PrismライブラリとWPFで、アプリケーションを構築しているXAMLの設計者と開発者にいくつかの高水準の手引きを提供することです。この話題は、UIのレイアウト、視覚的な表示、データ結合、リソースとプレゼンテーション・モデルを説明します。この話題を読んだ後に、Prism Libraryと、あなたが、複合アプリケーションの中で保守しやすいUIを作成するために役に立てる事ができるいくつかの技術に基づいて、あなたは、アプリケーションのUIの設計に、どのようにアプローチするかについての高いレベルの理解が必要です。

ユーザー・インターフェイスを設計するためのガイドライン

Prismライブラリで作成された複合アプリケーションのレイアウトは、WPFの標準原則に基づいています。－レイアウトは、関連する項目が含まれているパネルの概念を使用します。しかしながら、複合アプリケーションでは、さまざまパネル内の内容は、動的で、そして、設計時には、わかっていません。これは、別々にレイアウトに合わせるレイアウトされた内容を、そして、続いて、デザインを、それぞれの要素を含めることができる、ページ構造を作成するために、設計者と開発者に強制します。デザイナーや開発者として、これは、あなたが、Prismライブラリで、2つの中心となるレイアウトの概念について考える必要がることを示しています。：コンテナ構成と領域。

コンテナの構成

設計時の複合アプリケーションの表示

レイアウト

アニメーション

実行時の最適化

設計時の最適化

多くのXAMLリソースをもつ大規模なソリューション

XAMLの資産

ビジュアル・デザイナーと参照アセンブリ

Guidelines for Creating Designer Friendly Views

また、以下は、blendableやtool-ableとして知られている、デザイナーが親しみやすいアプリケーションの特徴のいくつかです。：

• それは、Visual StudioとBlend designersを使用して、生産的な編集経験を提供します。
• これは、ツーリングに対応しています。例えば、それは、あなたが、バインディング・ビルダーを使用できます。
• 必要な場合には、設計時のサンプルデータを提供します。
• これは、コードに、未処理の例外を発生させることなく、設計時に実行することができます。

次の動作は、編集セッションの間に何度も実行されます。デザイナーに親しみやすくないユーザー・コードは、これらの動作の一つ以上を失敗させます。このように、開発者やデザイナーの生産性と創造力を低下させます。

• デザイン画面動作：
  • オブジェクトの構築
  • オブジェクトの読み込み
  • プロパティ値の設定
  • デザイン画面のジェスチャーの実行
  • ルート要素としてコントロールを利用する
  • 他のコントロールの中にコントロールを格納する
  • XAMLファイルを開く、閉じる、そして、再び開く、ことを繰り返す
  • プロジェクトを作り直す
  • デザイナーを再読み込みする
• バインディング・ビルダーの動作：
  • DataContextを発見する
  • 利用できるデータ・ソースを一覧にする
  • データ・ソース・タイプのプロパティをリスト化する
• 設計時のサンプルデータの動作：
  • 適切にサンプルデータを表示するために、デザイン画面でコントロールを使用する

設計時のコーディング

設計時のユーザー・コードで問題を軽減する

設計時に、ユーザー・コントロール・コードが実行されるときを理解する

Design-Time Properties

組み込みの「d：」設計時のプロパティは、良好な設計時のツールでのツーリング経験への平坦な道を提供します。

私たちが解決する必要がある問題は、設計時に、バインディング・ビルダー・ツールに形状を、どのように提供するかです。この場合、形状は、バインディング・ビルダーがリフレクトを有効にできる、そして、その次に、バインディングを構築するとき、選択のために、それらのプロパティの一覧を示すインスタンス化された型です。

また、形状は、設計時にサンプルデータで、提供されます。サンプルデータは、設計時のサンプルデータのためのガイドラインの項目で取り扱われます。

次のセクションでは、d：DataContextプロパティとd：DesignInstanceマークアップ拡張機能を、どのように、使用するかを説明します。

プロパティの中の「d：」とマークアップ拡張機能は、designプロパティがメンバーであるdesign名前空間のための別名です。より詳細な情報は、MSDNトピックのWPFデザイナーの設計時の属性を参照してください。

「d：」プロパティとマークアップ拡張機能は、ユーザー・コードで、作成、あるいは、拡張できません。延長しました;それらは、XAMLでのみ使用することができます。「d：」プロパティとマークアップ拡張機能は、あなたのアプリケーションにコンパイルしません。; それらは、Visual StudioとBlendツーリングでのみ使用されます。

d：DataContextプロパティ

d：DesignInstanceマークアップ拡張機能

代表的なd:DataContextの筋書き

// PersonViewModel.cs
[Export]
public class PersonViewModel 
{
    public String FirstName { get; set; }
    public String LasName { get; set; }
}
// PersonView.xaml.cs
[Export]
public partial class PersonView : UserControl
{
    public PersonView()
    {
        InitializeComponent();
    }

    [Import]
    public PersonViewModel ViewModel
    {
        get { return this.DataContext as PersonViewModel; }
        set { this.DataContext = value; }
    }
}

<!--PersonView.xaml -->
<UserControl
    xmlns:local="clr-namespace:WpfApplication1"
    x:Class="WpfApplication1.PersonView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="300">

    <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="10" Padding="10">
        <Grid d:DataContext="{d:DesignInstance local:PersonViewModel}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Label Grid.Column="0" Grid.Row="0" Content="First Name" />
            <Label Grid.Column="0" Grid.Row="1" Content="Las Name" />

            <TextBox
                Grid.Column="1" Grid.Row="0" Width="150" MaxLength="50"
                HorizontalAlignment="Left" VerticalAlignment="Top"
                Text="{Binding Path=FirstName, Mode=TwoWay}" />
            <TextBox 
                Grid.Column="1" Grid.Row="1" Width="150" MaxLength="50"
                HorizontalAlignment="Left" VerticalAlignment="Top"
                Text="{Binding Path=LasName, Mode=TwoWay}" />
        </Grid>
    </Border>
</UserControl>

備考：添付プロパティとViewModelロケーター・ソリューション

設計時のサンプルデータのためのガイドライン

設計時のサンプルデータを使用する

サンプル・データ・ソース

Blend XMLサンプル・データ

Blend for Visual Studio 2013とVisual Studio 2013 XAMLのサンプルデータ

XAMLのリソース

コード

UI Layout Key Decisions

あなたは、複合アプリケーション・プロジェクトを開始するとき、後で変更するのが難しい、作成する必要がある幾つかのUIの設計上の決定があります。通常、これらの決定は、アプリケーションに広範囲に、そして、それらの一貫性を開発者とデザイナー生産性に支援します。

以下は、重要なUIレイアウトの結論です。：

• アプリケーションの流れを決定して、それに対応して領域を定義します。
• それぞれの領域が、使用するViewのタイプを読み込むかを決定します。
• あなたが、領域ナビゲーションAPIを使用するかどうかを決定します。
• あなたが、どのUIデザイン・パターン（MVVM、プレゼンテーション・モデル、その他）を使用するかを決定します。
• サンプルデータ戦略を決定します。