如何在多个图像之间画线

Question

我需要直观地显示从一个图像到一个或多个图像的一条线，以表示连接到一个或多个服务器的服务器。我假设 WPF 是最好的工具，我正在使用这个项目来学习和评估 WPF 并确定我们是否应该开始从 WinForms 迁移。

为了调整布局的大小和管理布局，我试图保持布局简单。所以代表源服务器的图像位于左上角，所有连接的服务器都列在右侧。我是 WPF 和 Expression Blend 的新手，一直在为如何绘制连接器而苦苦挣扎。现在我有一个网格中的图像。在一些令人沮丧的尝试使用平铺图像绘制线条之后，我开始使用带有 GradientBrush 的线条，它看起来像一个 2D 管道。这似乎是一个不错的方法。但我希望有一种适当的方法来绘制类似于我的模型的路径。

想法...

• 将线放入网格中，跨越多行多列
• 将线条放在横跨所有行和列的画布上
• 我认为行路径需要在后面的代码中确定，但我对 XAML 的所有功能印象深刻。

我只是一个 WPF 菜鸟，对 WPF 所能做的一切都有些不知所措。这似乎是以前做过很多次的事情，但我找不到任何相关的 WPF 示例，并且希望尽量减少我令人沮丧的尝试:-)

Answer 1

我会使用Canvas 而不是Grid，因为你可以使用absolute positioning with Canvas。

在CodeProject 上查看这个由 4 部分组成的系列以获得一些想法。

Answer 2

您可以尝试在图像之间使用分隔符。将分隔符放在堆栈面板中，以便您可以控制其方向为水平或垂直，还可以更改其颜色和厚度。如果您将分隔符放置在画布中，您还可以控制其位置。