在WPF中创建分层数据的自定义图形显示的最佳实践是什么

Question

我希望能够显示网络树信息（存储在分层数据结构中），如下例所示：

在图中，我有许多主机（顶级节点） - 其中一个被认为是“主”，因此与其他顶级节点的呈现方式不同。每个节点可以有多个子节点（探测器）。节点之间的线显示连接，如果任何连接断开，则线路将如Hostname2和Probe2.3之间的变化而变化。选择的任何节点（主机或探测器）也应以不同方式呈现。

我正在使用Prism / MVVM，并且我试图保持代码尽可能干净，但我不确定显示此数据的最佳方法。

我考虑过使用TreeView，但我想不出在节点之间创建链接的简洁方法。我还考虑过创建一个自定义面板，但我不确定这是最合适的，也不知道从哪里开始。然后我想到了创建自定义ItemsControl，因为使用DataTemplate和HierarchicalDataTemplate会很好。我还可以创建一个包含画布的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的子元素。每个节点只是一个WPF UserControl，其椭圆背景被添加到RadialPanel。有向图集合然后成为节点视图模型的集合。我存储节点连接的位置，几乎就像一个链表。这使我可以轻松遍历我的图形集合，而无需迭代每个节点来查找我正在寻找的节点。

绘图中涉及一些技巧以确保布局正确，尤其是绘制连接线时。请参阅我发布的StackOverflow帖子：WPF and C# - Issue with GeneralTransform and UIElement.TransformToVisual。它有一个指向我的节点图形的链接，因此您可以比较我们的图形。

这显然不是一切，但我认为这是一个好的开始。对我来说，我无法真正覆盖任何当前的控制来完全按照我的需要行事，所以我走得很艰难。权衡代码是代码隐藏和视图模型中的大量工作，但我也控制了它如何绘制的主要方面。我这有帮助。