渲染WPF网络地图/图形布局 - 手动？ PathListBox控件？还有什么？

Question

我正在编写代码，向用户展示简化的网络地图。在任何给定时间，地图都集中在特定项目上......例如路由器或服务器。基于所关注的项目，将其他网络实体分组为集合（即子网或域），然后围绕所关注的项目进行渲染。线条将表示连接，组将在视觉上分组为矩形或椭圆形。

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

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

我正在使用没有任何框架的MVVM。假设用于分组项目和确定应该显示的内容的逻辑是全部到位的。

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

1. 使用画布进行布局（在ScrollViewer内部处理平移）。让我的ViewModel使用布局管理器类的类，它将处理分配所有布局属性（顶部，左侧等）。将我的显示项目集绑定到ItemsControl并使用数据模板来处理实际呈现。

这种方法的缺点：

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

这种方法的优点：

• 我可以适当地（手动）在子子网之间绘制额外的行。
• 稍后可以添加其他LayoutManagers以不同方式呈现显示。
• 这可能会被包含在某种GraphLayout控件中以供重用。
1. 将焦点项目显示在显示的中心，然后使用PathListBox来布局其他项目。让我的ViewModel公开一个简单的事物列表，并将它们绑定到PathListBox。重写ListBoxItem模板还可以从焦点项（非常棘手）的边框到绑定项创建线几何。使用DataTemplates来处理绑定的项目是子网的情况，在这种情况下，我们将使用模板中的另一个PathListBox来显示子网内的项目。

这种方法的缺点：

• 跨多个`PathListBox`es的选定项同步。一次只能选择整个图形上的一个项目，但每个子PathListBox都保持自己的选择。此外，无法选择子网，但无需额外工作即可选择。
• 在ListBoxItem模板中绘制连接线会有点诡计，因为我需要知道要连接的焦点项的正确一面。

这种方法的优点：

• 我不想再接受布局业务了。

我正在寻找其他遇到过类似问题或者有更多WPF经验的人的建议或想法。我正在使用WPF 4，所以任何新的技巧都是合法的并且鼓励。

Answer 1

我会看一下开源Family Show应用程序。这是一个家谱应用程序，它以与您描述的方式非常相似的方式描绘家庭成员之间的关系。我的猜测是代码可以让你获得90％的目标。