現実的な視覚化のためにMVVMとWPFを使用

Question

現在、実際のフェリー船の位置を海上に表示し、貨物の状態を表示するフェリーシステムの視覚的表現を作成する必要があります。フェリーはトラックを含み、トラックは車を含む。実際のトラックとそのxy姿勢をデッキに表示する必要があります。フェリーが積み込まれると、トラックの姿勢が頻繁に更新され、外観がアニメーション化されます。また、私はトラックに実際の車を表示する必要があります。トラック、自動車、フェリーには、表示する必要のある州もあります。だから、私はかなり現実的な方法で視覚化する必要があるデータの階層構造を持っています。

この種のものをWPFで実装するにはどうすればよいでしょうか？ 1つのTreeViewコントロールでMVVMを使用し、SeaView、フェリー、トラック、車のHierarchicalDataTemplatesを作成し、TreeViewのControlTemplateを作成する必要がありますか？または、私はUserControlsを使用し、ViewModelの観測可能なコレクションにデータバインディングする代わりに、コードでそれらを作成して更新することをお勧めします。あなたはこれについて何か経験がありますか？あなたはどうしますか？クラス/コントロールの設定をスケッチすることはできますか？

Answer 1

ユーザーコントロールを作成するのではなく、「ルックレス」コントロールを作成することをおすすめします。私は一般的に私の見た目のコントロールのための接着剤/コンテナとしてユーザーコントロールを使用します。無意味なコントロールの例はButtonクラスです。これにはデフォルトのスタイルが含まれており、ブレンドでは好みのスタイルを変更できます。ビジュアルステートマネージャーもサポートされているため、ステートの変化時にプレゼンテーションの表示方法を変更できます。ルックレスコントロールのコードビハインドは、ミニViewModelと考えることができます。ここではokでプレゼンテーション用のものとドメインクラスを混在させています。

この同じデザインに従うと、フェリーレスレスコントロールを作成できます。このコントロールには、独自の依存プロパティー（DPのOnChangeをリッスンする可能性があります）があります。

フェリーコントロールにObservableCollection DP（ "Trucks"）がある可能性があります。

次に、Themes \ generic.xamlに、フェリーコントロールのデフォルトスタイルを作成します。あなたのデフォルトスタイルは、ItemsSource = {TemplateBinding Trucks}を持つItemsControlを持つことができます。 ItemsControlパネルのテンプレートは、トラックを整理するための独自のカスタムパネルでも、キャンバスを使用することもできます。 ItemsControlに項目テンプレートでは、このような何かを持っているでしょう：

<DataTemplate> 
    <mynamespace:TruckControl/> 
</DataTemplate> 

あなたトラックコントロール、またそれ自身のデフォルトのスタイルを持つlookless制御すること、そしてそれはあなたが直接行うことができますので、すでに設定されたデータコンテキストのでしょう{バインディングパス= xyz}。トラックコントロールでCanvas.Left/Topを設定することもできます（過去のアイテムコントロールでキャンバスを使用するように選択した場合）。カスタムパネルを作成した場合はその位置を設定しないか、またはレンダリングトランスフォームを使用して正しいX、Yに配置します）。また、トラックのテンプレートのアイテムコントロールを使用して、フェリーコントロールでトラックをレンダリングしたのと同じ方法で車をレンダリングすることもできます。 VisualStateManagerの状態を作成して、完全にブレンドできるようにすることも可能です。したがって、トラックが「問題の状態」に入ると、ブレンドしてその状態を簡単にスタイルして、たとえば赤く点滅させることができます。

私は消化するのがとても好きだと知っていますが、最終的には、MVVMモデルをサポートしているすべてのスタイルコントロールがあなたの人生を1000000x容易にします。

私はマイクロソフトのシルバーライトのツールキットを調べて、無意味なコントロールなどを行う方法を理解することをお勧めします。 DatePicker（http://silverlight.codeplex.com/SourceControl/changeset/view/25992#）のような単純なコントロールを見てみましょう.1つの注意点は、DatePicker.xamlファイルを無視していることです（これはgeneric.xamlに置かれたもののミラーに過ぎず、削除しただけでは何も起こりません）。

あなたに細心の注意を払う必要があるものは、次のとおりです。

1）クラスの属性。これらはブレンドがあなたのコントロールに対処する方法を知っています。

2.）OnApplyTemplateオーバーライド。これは、テンプレートから特定の要素を引き出すことができる場所です。これらは「パーツ」と呼ばれ、ブレンドにパーツタブが表示されます。 ＃1の属性は、テンプレート内の「部品」の種類と、そのテンプレートの種類を定義できます。

3.）DefaultStyleKey = typeof（...）コンストラクタ内。これは、Silverlightにgeneric.xamlで使用する既定のテンプレートを指定します。

4. Themes \ generic.xamlを参照してください。これは、すべての既定のテンプレートを格納する特殊なハードコードされたファイルの場所です。 DatePickerスタイルを検索すると、あなたはそのアイデアを得るでしょう:)

幸運を祈る！

Answer 2

WPFは、ビューモデルでは本当にうまく機能します。特に必要になるまでコードを遠ざけることができれば、uiをデータからはるかに簡単に分離することができます。データモデルが異なるディスプレイ間で変更されない場合は、Uiをアップグレードすることが可能になります。

Answer 3

すべての図面を1人のユーザーコントロールで処理することをお勧めします。そうしないと、オブジェクトの階層が失われる可能性があります。また、車、トラック、フェリーの人々のように、別のアイテムが追加された場合は簡単になります。

モデルが階層型の場合は、トップレベルをコントロールに渡して、コントロール自体を並べ替えることができます。

MVVMは既存のコントロールにはうまくいきますが、既存のWPFコントロールは必要なものに近いコントロールがある場合にのみ機能し、いくつかの調整が機能します。あなたが必要とするものに近いWPFの標準コントロールを考えることができないので、新しいコントロールを書くときです。

Answer 4

私は実際にそれをどのように実装したかを知りたいと思っています。このためにカスタムコントロールやUserControlを記述する必要はないことが判明しました。私がやったことは、車、船、フェリー、トラックなどのViewModelsのためのデータ型を書いていたことでした。たとえば、FerryViewModelのデータテンプレートには、Canvas型のItemsPanel（トラックを配置できるようにする）を持つItemsControlと、TruckViewModel用のDataTemplateであるItemTemplateが含まれていました。非常にシンプルで速いアプローチ。