c# - 渲染 WPF 网络 map /图形布局 - 手动？路径列表框？还有什么？

Question

我正在编写代码以向用户展示简化的网络 map 。在任何给定时间， map 都集中在特定项目上……比如路由器或服务器。基于焦点项目，其他网络实体被分组(即子网或域)，然后围绕焦点项目呈现。线将代表连接，组将在矩形或椭圆内视觉分组。

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

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

到目前为止，我正在使用没有任何框架的 MVVM。假设对项目进行分组并确定应该显示什么的逻辑已经到位。

我正在寻找处理 UI 布局的最佳方法。到目前为止，我知道以下选项:

使用 Canvas 进行布局(在 ScrollViewer 内处理平移)。让我的 ViewModel 使用 Layout Manager 类型的类，该类将处理分配所有布局属性(顶部、左侧等)。将我的一组显示项绑定(bind)到 ItemsControl 并使用数据模板来处理实际呈现。

这种方法的缺点:

我的高度手动布局。大量计算。

我必须手动处理项目选择。

连接线的计算是手动的。

这种方法的优点:

我可以酌情(手动)在子子网之间绘制额外的线。

稍后可以添加其他 LayoutManager 以不同方式呈现显示。

这可能会被封装到某种 GraphLayout 控件中以供重复使用。

在显示的中心显示焦点项目，然后使用 PathListBox 进行附加项目的布局。让我的 ViewModel 公开一个要绘制的简单列表并将它们绑定(bind)到 PathListBox。覆盖 ListBoxItem 模板以创建从焦点项(棘手)的边界到绑定(bind)项的线几何图形。使用 DataTemplates 处理被绑定(bind)的项目是子网的情况，在这种情况下，我们将使用模板中的另一个 PathListBox 来显示子网内的项目。

这种方法的缺点:

跨多个“PathListBox”的选定项同步。一次只能选择整个图形上的一项，但每个子 PathListBox 都维护自己的选择。此外，无法选择子网，但无需额外工作即可选择。

在 ListBoxItem 模板中绘制连接线会有点棘手，因为我需要知道要连接到的焦点项目的正确一侧。

这种方法的优点:

我可以远离布局业务，更多。

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

Answer 1

我会看看开源 Family Show应用。这是一个家谱应用程序，它以与您所描述的方式非常相似的方式绘制家庭成员之间的关系图。我的猜测是那里的代码会让你完成你想做的事情的 90%。