如何在多个图像之间绘制线条

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

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