0

have I have a quesition regarding MVVM pattern in the use case diagarm.

What I have so far is a list of Items which are my Shapes.

ObservableCollection<ItemsViewModels> Items;

and a Collection of Connection of Items

ObservableCollection<ConnectionViewModel>

Each ItemViewModel has an ID and a ConnectionViewModel has two ID to connect the Items.

My ItemsViewModel Collection is bound to a Itemscontrol which is layout on a Canvas.

With the ElementMouseDragBehavior I am able to drag my Items around. Now comes my big question =) How can I visualize my connections that I will be able to move the items around and the items stay connected with a line either straign or bezier.

I don't know how to abstract that with the mvvm pattern.

Thanks for any help...

4

3 回答 3

2

这对你有用吗？：Silverlight 的 SpiderWebControl

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

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

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

约翰

于 2010-05-04T00:40:22.290 回答
0

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

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

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

于 2011-04-01T21:12:29.547 回答
0

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

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

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