wpf - WPF で階層データのカスタマイズされたグラフィカル表示を作成するためのベスト プラクティスは何ですか?

Question

次に示す例のように、(階層データ構造に格納された) ネットワーク ツリー情報を表示できるようにしたいと考えています。

図には、多数のホスト (最上位ノード) があります。そのうちの 1 つが「マスター」と見なされるため、他の最上位ノードとは異なる方法でレンダリングされます。各ノードは、複数のサブノード (プローブ) を持つことができます。ノード間の線は接続を示しており、いずれかの接続がダウンすると、線は Hostname2 と Probe2.3 の間のように変化します。選択したノード (ホストまたはプローブ) も、異なる方法でレンダリングする必要があります。

私は Prism/MVVM を使用しており、コードをできるだけきれいに保とうとしていますが、このデータを表示する最善の方法がわかりません。

TreeView の使用を検討しましたが、ノード間のリンクを作成するクリーンな方法が思いつきません。カスタム パネルの作成も検討しましたが、それが最適かどうかわからず、どこから始めればよいかわかりません。次に、DataTemplate と HierarchicalDataTemplate を使用するとよいので、カスタム ItemsControl を作成することを考えました。また、キャンバスを含む UserControl を作成し、コード ビハインドですべてを実行することもできますが、最善の方法とは言えません。

意見、コード例、リンク、または提案をお待ちしております。

Answer 1

幸運なことに、昨年、私は現在の仕事に非常によく似たものを書かなければなりませんでした。コードを提供することはできませんが、適切な方向に導くことはできます。

ここで利用可能な有向グラフ コレクション クラスを見つけました: http://msdn.microsoft.com/en-us/library/ms379574(v=vs.80).aspx#datastructures20_5_topic3。

MSDN で見つけたラジアル パネルも使用します: http://msdn.microsoft.com/en-us/library/ms771363(v=VS.90).aspx。これにより、複数のノードを幾何学的形状で描画できます。したがって、ノードが 3 つある場合、それらは三角形、4 つが正方形、5 つが五角形などを描きます。ノードが多いほど、レイアウトは円形になります。これはうまくいきませんが、リンクをたどると、カスタム レイアウトでカスタム パネルを作成する方法が示されます。それは有益かもしれません。

次に、Canvas をステージとして使用し、RadialPanel を Canvas の子要素として使用しました。各ノードは、RadialPanel に追加された楕円の背景を持つ単なる WPF UserControl です。有向グラフ コレクションは、ノード ビュー モデルのコレクションになります。リンクされたリストのように、ノードが接続されている場所を保存します。これにより、探しているノードを見つけるために各ノードを反復する必要なく、グラフ コレクションを簡単にトラバースできます。

特に接続線を描画する場合は、レイアウトが適切であることを確認するための描画に関連するいくつかのトリックがあります。私が作成したこの StackOverflow の投稿を参照してください: WPF と C# - GeneralTransform と UIElement.TransformToVisual の問題。ノード グラフの画像へのリンクがあるので、グラフを比較できます。

もちろんこれがすべてではありませんが、良いスタートだと思います。私にとっては、必要なことを正確に実行するために現在のコントロールを実際にオーバーライドすることはできなかったので、苦労しました。コード ビハインドとビュー モデルのトレードオフは多くの作業ですが、描画方法の主要な側面も制御します。私はこれが役立ちます。