创建 WPF 分割图

Creating a WPF divided diagram

所以有关于在 WPF 中创建图表的教程。 http://www.codeproject.com/Articles/24681/WPF-Diagram-Designer-Part

我已经读过了,还在研究它以完全理解它。

在本教程结束时,您基本上可以添加形状,move/rotate/scale 它们,并且由于它们是以矢量形式创建的,所以它们保持其分辨率,还有连接器可以连接每个形状与另一个。

我的目标,因为我需要创建一个模拟器来显示互联网协议是如何交付的,所以我的目标是创建一个分割图,其中 A 面与 B 面通信。它可以读取自动机并模拟图中的转换.

我正在考虑如何解决这个问题,由于我对 WPF 的了解不多,我想知道我应该用什么方式来实现它。

我应该创建 2 个不同的 Canvases 吗?或者将 1 canvas 除以两侧?

我正在处理的主要问题是,当一个形状被拖到 window 的末尾边距时,window 允许我滑动它以便我可以看到字段的其余部分,这是通过增加 Canvas 的大小来完成的,如教程第 1 部分所示。 但是,如果我的 canvas 一分为二,并且中间有一个边框,我该如何为每边创建两个滑块?

我想知道你是否可以给我任何关于如何实现这个想法的提示,因为我对 WPF 的了解仍然非常有限。

这是我的观点,但如果您能提供 more/less 应用程序的最终草图,那将非常有用。我建议使用 Telerik AppMock 但油漆也足够了 ;).

据我了解,您应该需要 3 个 canvases。 1-st 在左边 canvas。 2-nd 是右边的 canvas。 3-rd 在两个 canvases 之上。

当你想拖动一个元素时,你必须将被点击元素的不透明度设置为有点透明,并将其留在原处(第一个canvas),将被拖动元素的副本添加到第三个canvas。当你执行 leftmousebuttonup(drop dragged item) 时,你必须检查它被放在哪里,如果它在 2nd canvas 上被 droppend,你将它添加到这个 canvas。要在 canvas 上定位元素,您可以使用 Canvas.SetLeft 和相应的 SetRight 方法。

您可以将第一个和第二个 canvas 放入网格中。即使 Canvases 会更大,如果 Grid,view 将只被切割到 Grid 的大小。 此外,要允许 canvases 操作,请在其中(向网格)添加一个滚动查看器,它将 Translate Transform canvases 指定给它们的大小。 稍后,尝试使用 MVVM 模式用数据填充 Canvases。

我还建议使用可绘制对象的 ObservableCollection(您可以使用 FrameworkElement 作为基础 class)和可拖动对象。每个 Canvas 都不一样。 祝你好运!