使用 MVVM 从列表拖放到 Windows 手机上的画布 [英] Drag and drop from list to canvas on windows phone with MVVM

问题描述

我有一个应用程序，用户可以在其中操作从列表中选择的元素，这是通过单击列表元素并将元素添加到画布来完成的.

I have an app where a user can manipulate around with elements chosen from a list, this is done by clicking the list element and the element is added to a canvas.

在用户测试应用期间.人们发现它不直观，因为他们想要拖放.我找到了几个描述如何为 WPF 实现此功能的链接，即不适用于 Windows Phone.

During a user testing of the app. People found it not to be intuitive since they wanted drag and drop. I have found several links describing how to implement this for WPF, i.e. not for windows Phone.

尝试从 msdn 项目 我最终遇到了一些问题，我无法从 DragEventArgs 中获取有关元素的相同信息.

Trying to replicate the code from a msdn project i ended up with problems that I cannot get the same information about the elements from DragEventArgs.

所以我想要完成的是用户可以将列表框中的元素拖到画布上.我在 Viewmodel 中尝试过，但在 DragEventArgs 中缺少信息，例如 e.Data 和 e.Source.我也在 xaml.cs 文件中尝试过，但没有成功.

So what I want to accomplish is user can drag an element in a listbox to a canvas. I have tried in the Viewmodel but missing information in DragEventArgs, like e.Data and e.Source. I have also tried in the xaml.cs file with no success.

感谢任何帮助.

想法

• 在您的元素被选中时创建它的副本，
• 将副本添加为画布的子项，
• 设置副本的 x,y 坐标以匹配所选元素的位置，
• CaptureMouse() 在副本上.

当然在 Windows Phone 上应该使用操作增量来移动它而不是捕获鼠标.通过 Click 事件添加元素后，我可以在 Canvas 内拖动元素.但我似乎无法从列表中拖累工作.上面的要点是我拥有并正在尝试但迄今为止没有任何成功的方法.

Of course on Windows Phone Manipulation delta should be used to move it instead of capture mouse. I am able to drag an element around inside the Canvas after it was added by a Click event. But I can't seem to get drag from list to work. The bullet points above is a method I have and are trying but without any success so far.

推荐答案

不存在任何示例或任何东西来完成此任务.我联系了 msdn 和 Microsoft 的人，但没有任何成功.我正在尝试构建一个示例，但目前没有成功.

There exists no samples or anything to accomplish this. I have contacted people at msdn, and Microsoft, without any success. I am trying to build a sample but so far no success.

编辑

所以我做了什么来解决这个问题:首先以图形方式解决问题

So what I did to solve this issue: first the problem graphically

用文字将元素从列表框拖动到画布.所以我做了什么，我在视图中将处理程序添加到列表框中:

In words dragging an element from listbox to a Canvas. SO what I did I added handlers to the listbox like this, in the view:

        MyLB.AddHandler(UIElement.ManipulationStartedEvent, new EventHandler<ManipulationStartedEventArgs>(MyLB_ManiStarted), true);
        MyLB.AddHandler(UIElement.ManipulationDeltaEvent, new EventHandler<ManipulationDeltaEventArgs>(MyLB_ManiDelta), true);
        MyLB.AddHandler(UIElement.ManipulationCompletedEvent, new EventHandler<ManipulationCompletedEventArgs>(MyLB_ManiCompleted), true);

此外，我添加了一个额外画布，在此之后称为 Canvas2，它延伸到 ListBox 和 Canvas 的后面.两个画布之间的唯一区别是大小，否则它们具有相同的项目控件，但绑定到画布的可观察集合不同.

Furthermore I add an extra canvas, here after referred to as Canvas2, that stretches behind the ListBox and Canvas. The only difference between the two canvas' are the size, else they have the same itemscontrol but with different observablecollections binded to the canvas'.

1. 在 ManipulationStarted 中，我找到了该元素并将一个新元素添加到 Canvas2 的 observablecollection.此外，我将 Canvas2 的 zindex 设置为前面.
2. 然后我点击 delta 事件以在 Canvas2 上移动元素
3. 在 ManipulationCompleted 中，我检查元素是否在第一个 Canvas 的边界内.
4. 然后我从 Canvas2 中删除它，并将 Canvas2 移到后面，使用 Canvas.SetIndex(UIElement, zIndex)
5. 根据边界检查 (3.) 然后我将它添加到第一个画布.一切正常.

但我不使用放置功能或相关事件，因为它似乎没有帮助，因为缺少可拖动元素.但这有效:)

But I do not use the drop feature or the related events since it did not seem to help because of the missing dragable element. But this works :)

这篇关于使用 MVVM 从列表拖放到 Windows 手机上的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！