在Silverlight MVVM中绘制连接形状的图表

Question

我对用例diagarm中的MVVM模式有疑问。

到目前为止我所拥有的项目列表是我的形状。

ObservableCollection<ItemsViewModels> Items;

和项目连接集合

ObservableCollection<ConnectionViewModel>

每个ItemViewModel都有一个ID，ConnectionViewModel有两个ID来连接Items。

My ItemsViewModel Collection绑定到一个Itemscontrol，它是Canvas上的布局。

使用ElementMouseDragBehavior，我可以拖动我的项目。 现在来了我的大问题=） 我如何可视化我的连接，我将能够移动物品，并且物品与直线或贝塞尔线保持连接。

我不知道如何使用mvvm模式对其进行抽象。

感谢您的帮助......

Answer 1

这对您有用吗？：The SpiderWebControl for Silverlight

提供了来源，它列出了以下功能

• 添加，删除，重命名节点
• 拖动节点
• CTRL +拖动以拖动子树/分支
• CTRL +在画布上拖动以平移
• 使用VSM进行选择和悬停
• 带动画的简单自动布局

可能不完全是你所追求的，但它可能会给你一个起点。

约翰

Answer 2

有很多方法可以实现这一目标。但是，对于Silverlight，布局和绘制连接线几乎没有什么挑战。在WPF中，我会考虑使用adorner图层并以这种方式渲染线条。但是，Silverlight没有直接拥有一个装饰层，但可以模仿它（虽然在我的建议中，我建议采用另一种方法来装饰）。

这是我考虑解决问题和解决问题的一种方法。

1. MouseDragElementBehavior似乎没有任何事件可以指示元素何时移动或已移动到新位置。
   • 当拖动的对象设置为包含在画布中时，似乎还有一些主要的拖拽错误，所以我不确定我是否会使用它。
2. 我创建了自己的可拖动曲面（源自Panel）。您需要实现自己的鼠标处理，以及带有MeasureOverride和ArrangeLayout覆盖的自定义面板。有关Silverlight中布局的更多信息，请参阅this。
   • 模拟画布就像拖动体验一样相对容易，因为测量或安排确实没有太多挑战。您需要创建具有形状位置的附加属性，或者实际将位置添加到形状对象。如果将这些值直接存储在您的形状对象中是有意义的话，我可能会选择后者。
   • 为了让事情变得可拖动，你需要附加到一个形状的mousedown / up并捕获鼠标并做一些简单的拖动逻辑。
   • 可选择在拖动内容并完成拖动时添加事件。
   • 当从面板中删除控件时，请确保您取消连接的所有事件，以便在GC期间释放它们
3. 创建第二个自定义面板（或用户控件）。该面板将放置在第一个拖动面板下方。此面板的目的是绑定到您的连接对象（当然，它还需要直接或间接访问原始对象位置）。
   • 如果您将其设为面板，则可以根据对象的连接和位置添加线条。您需要连接上面提到的事件，或直接连接到形状上的X，Y属性更改事件，以便在形状移动时更新线对象。
   • 或者您可以使用usercontrol和/或writeablebitmap绘制线条。我建议看看Codeplex上的简单WriteableBitmapEx扩展类，因为它包含一个简单的线条绘制算法。每次更新形状时，您都需要使位图无效并重新绘制连接。

Answer 3

我最近完成了类似的工作，使用这篇文章作为我实现的基础：

http://www.codeproject.com/KB/WPF/BindingToElementPosition.aspx

非常直接，适合我。