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

问题描述

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

在用户测试应用程序期间。人们发现它不直观，因为他们想拖放。我找到了几个链接描述如何实现这个WPF，即不是为Windows Phone。

尝试从 msdn项目我结束了一些问题，我不能从DragEventArgs获得相同的元素信息。

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

任何帮助是赞赏。

strong> Idea>

• 在选择元素时创建一个副本，




• 设置副本的x，y坐标以匹配所选元素的位置


• CaptureMouse

当然，在Windows Phone上，应使用delta来移动它，而不是捕获鼠标。在Click事件添加后，我可以在Canvas内部拖动元素。但我似乎无法从列表拖到工作。上面的项目符号是我已经尝试的方法，但迄今为止没有任何成功。

解决方案

来完成这个。我已经联系了msdn和微软的人，没有任何成功。我试图建立一个示例，但迄今为止没有成功。

编辑

所以我做了什么来解决这个问题：第一个问题图形

在单词中将元素从列表框拖动到画布。我在我添加处理程序到列表框像这样，在视图：

  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的后面。
两个canvas之间的唯一区别是大小，否则它们具有相同的项目控件，但是具有绑定到画布的不同observablecollections。

1. 在ManipulationStarted中，我找到该元素，并向Canvas2的observablecollection添加一个新元素。此外，我将Canvas2的zindex设置为infront。


2. 然后，点击三角形事件在Canvas2上移动元素


3. 在ManipulationCompleted中检查元素是否在第一个Canvas.SetIndex（UIElement，zIndex）
/ li>

4. 根据边界检查（3.），然后将其添加到第一个画布。一切正常。

但我不使用drop功能或相关事件，因为它似乎没有帮助，因为缺少可拖动元件。但这工作原理：）

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.

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.

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.

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.

Any help is appreciated.

Idea

• create a copy of your element when it's selected,
• add the copy as a child of your canvas,
• set the copy's x,y coordinates to match the selected element's location,
• CaptureMouse() on the copy.

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.

解决方案

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.

Edit

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);

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. In ManipulationStarted I find the element and add a new one to the observablecollection of Canvas2. Furthermore I Set the zindex of Canvas2 to be infront.
2. I then tap into the delta event to move the element around on Canvas2
3. in ManipulationCompleted I check if the element is inside the bounds of the first Canvas.
4. I then delete it from Canvas2, and move Canvas2 to the back, using Canvas.SetIndex(UIElement, zIndex)
5. Depending on the bounds check in (3.) I then add it to the first canvas. And everything works.

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