Silverlight MVVM 中的图表 - 连接形状答案

【问题标题】：Diagramming in Silverlight MVVM- connecting shapesSilverlight MVVM 中的图表 - 连接形状
【发布时间】：2010-03-27 14:22:47
【问题描述】：

我对用例图中的 MVVM 模式有疑问吗？

到目前为止，我所拥有的是我的 Shapes 项目列表。

ObservableCollection<ItemsViewModels> Items;

以及项目连接的集合

ObservableCollection<ConnectionViewModel>

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

我的 ItemsViewModel 集合绑定到一个 Itemscontrol，它是 Canvas 上的布局。

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

我不知道如何用 mvvm 模式来抽象它。

感谢您的帮助...

【问题讨论】：

你能澄清你的问题吗？ MVVM 模式与关于连接可视化的问题有什么关系？图表布局是一个非常复杂的主题。
@WPCoder：我刚刚描述了我的方法。我想做图表和图形布局。所有解决方案和博客文章都没有利用 MVVM。此时我可以拖动我的形状，但我希望它们能够相互连接？现在没有任何线索，这就是我问的原因。也许我的整个方法都离题了。那么我很乐意有一个指向不同方向的指针......
我想看看您是否有更集中的问题，而不是开放式的设计和实现讨论。
我假设您的意思是 Blend 附带的 MouseDragElementBehavior？

标签： silverlight mvvm silverlight-4.0 mvvm-light

【解决方案1】：

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

提供了源代码并列出了以下功能

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

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

约翰

【讨论】：

【解决方案2】：

有很多方法可以做到这一点。不过，有了 Silverlight，布局和绘制连接线的挑战就更少了。在 WPF 中，我会考虑使用装饰层并以这种方式渲染线条。然而，Silverlight 没有直接的装饰层，但可以模拟它（尽管在我下面的建议中，我建议使用另一种装饰器方法）。

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

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

【讨论】：

【解决方案3】：

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

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

它非常简单，对我来说效果很好。

【讨论】：