使用 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 上操作 delta 应该用于移动它而不是捕获鼠标.在通过 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);

此外，我添加了一个 extra 画布，这里称为 Canvas2，它延伸到 ListBox 和 Canvas 后面.两个画布之间的唯一区别是大小，否则它们具有相同的 itemscontrol，但绑定到画布的 observablecollections 不同.

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屋！