呈现WPF网络地图/图形布局 - 手动？ PathListBox控件？别的东西？

Question

我正在编写代码以向用户显示简化的网络地图。在任何时候，地图都集中在一个特定的项目上，比如路由器或服务器。基于关注的项目，其他网络实体被分组为集合（即子网或域），然后围绕关注的项目呈现。线将代表连接，组将在矩形或椭圆内以可视方式分组。

平移和缩放是必需的功能。

可以选择一个项目以在“属性”样式窗口中显示更多信息。还可以双击一个项目以重新聚焦该项目上的整个网络地图。那时，整个地图将被重新计算。

我使用没有任何框架的MVVM，至今。假设分组项目和确定应该显示或不显示的逻辑全部到位。

我正在寻找接近UI布局的最佳方式。到目前为止，我知道以下选项：

1. 使用画布进行布局（在ScrollViewer中处理平移）。让我的ViewModel使用布局管理器类的类，它将处理分配所有布局属性（上，左等）。将我的显示项目集合绑定到ItemsControl，并使用Data Templates来处理实际的渲染。

这种方法的缺点：

• 在我的部分高度手工布局。很多计算。
• 我必须手动处理项目选择。
• 连接线的计算是手动的。

这种方法的优点：

• 我可以得出子子网之间附加行适当（手动地）。
• 其他布局管理器可以稍后添加以不同的方式呈现显示。
• 这可能会被封装成某种GraphLayout控件来重新使用。

1. 将关注的项目呈现在显示器的中心，然后使用PathListBox来布局其他项目。让我的ViewModel公开一个简单的绘制列表并将它们绑定到PathListBox。重写ListBoxItem模板以从焦点项目的边界（棘手）到绑定项目创建一个线条几何。使用DataTemplates来处理被绑定项目是子网的情况，在这种情况下，我们将使用模板中的另一个PathListBox来显示子网内的项目。

这种方法的缺点：

• 选择跨多个`PathListBox`es项目同步。一次只能选择整个图中的一个项目，但每个子项PathListBox都保留其自己的选择。另外，不能选择子网，但是可以在没有额外工作的情况下进行选择。
• 在ListBoxItem模板中绘制连接线会有点诡异，因为我需要知道要连接的焦点项目的正确一面。

这种方法的优点：

• 我可以留出布局的企业，更多的。

我在寻找任何有关遇到类似问题或者比我有更多WPF体验的人的建议或想法。我使用WPF 4，所以任何新的技巧都是合法和鼓励的。

Answer 1

我会看看开放源代码Family Show应用程序。这是一个族谱应用程序，以很像你所描述的方式描绘家庭成员之间的关系。我的猜测是，代码会让你90％的方式来做你想做的事情。