简体繁体 English

在Metro（C＃/ XAML）中使用ItemsControl进行拖放

[英]Drag & Drop with ItemsControl in Metro (C#/XAML)

原文 2012-04-16 17:08:38 7 2 c#/ xaml/ drag-and-drop/ microsoft-metro

I have an app where I'm having a usercontrol consisting of an ItemsControl with squares (represented by a border and underlying controls). 我有一个应用程序，其中有一个由正方形的ItemsControl组成的用户控件（由边框和基础控件表示）。 Think of it like a chessboard. 可以把它想像成棋盘。

Since my ItemTemplate consists of a border it doesn't have native support for drag & drop like the GridView or the ListView. 由于我的ItemTemplate由边框组成，因此它没有像GridView或ListView这样的对拖放的原生支持。 I tried using both GridView and ListView for my squares Before but the GUI became too sluggish so I switched to a simple border which made it alot faster. 我以前尝试将GridView和ListView都用于我的正方形，但是GUI太迟钝了，所以我切换到简单的边框，这使它更快了。

By hooking up Manipulation events I've still managed to get a drag behavior for my border and its content (at least when it comes to the GUI). 通过连接Manipulation事件，我仍然设法获得边框及其内容的拖动行为（至少在GUI方面）。 However when I try to drag a square (border) to another square I can't seem to get the drop event to fire. 但是，当我尝试将一个正方形（边界）拖动到另一个正方形时，似乎无法触发放置事件。 I need to know which the target square is. 我需要知道目标正方形是哪个。

I understand that since I'm doing my drag&drop functionality myself I need to do something to hook into the border's drop event, but what? 我了解到，由于我自己正在执行拖放功能，因此我需要做一些事情来挂接边框的放置事件，但是那又是什么呢？

I've also tried to subscribe to the border events PointerEntered, PointerMoved etc. to find out which square the pointer is over and when the button is released i would know which the target square is. 我还尝试订阅边框事件PointerEntered，PointerMoved等，以找出指针在哪个正方形上以及何时释放按钮，我会知道目标正方形。 This only seem to work in two directions though (right and down), the Pointer events doesn't seem to fire when moved left or up, strange. 尽管这似乎仅在两个方向上起作用（向右和向下），但是当向左或向上移动时，Pointer事件似乎没有触发，这很奇怪。 I've read somwhere that the items (squares) have different ZIndex and this could affect the firing of events. 我读过某处的内容（正方形）具有不同的ZIndex，这可能会影响事件的触发。

I've struggled with this for hours now and would really appreciate some help. 我已经为此奋斗了几个小时，非常感谢您的帮助。

2 个解决方案

Create an attached property and hook it up to the parent control outside the Border, place the native drag and drop to the TargetType of the ItemTemplate. 创建一个附加属性，并将其连接到Border外部的父控件，将本机拖放到ItemTemplate的TargetType。

Hook it up to PreviewMouseUp and PreviewMouseDown Event. 将其连接到PreviewMouseUp和PreviewMouseDown事件。

More of this are found here WPF Tutorial Drag and Drop 有关更多信息，请参见WPF拖放教程。

You just need to include a Thumb object on top of whatever you want to drag & drop. 您只需要在要拖放的对象之上包括一个Thumb对象。 The Thumb object will fire the required events and you can handle whatever behavior you want from these events (you might want to move the underlying object on the canvas to simulate dragging the underlying object for example). Thumb对象将触发必需的事件，并且您可以处理这些事件中想要的任何行为（例如，您可能希望在画布上移动基础对象以模拟拖动基础对象）。

You can have a look at the MSDN page of Thumb to get you started. 您可以查看Thumb的MSDN页面以开始使用。

Then when you have Thumb notification, you get a hold of your underlying in whatever way suits you, and you call Canvas.SetLeft/Top (object, my new coordinates) . 然后，当您收到Thumb通知时，将以适合您的任何方式保留基础，然后调用Canvas.SetLeft/Top (object, my new coordinates) 。 Usually, your new coordinates will be something like Canvas.GetLeft/Top(object) + args.Horizontal/VerticalChange . 通常，您的新坐标将类似于Canvas.GetLeft/Top(object) + args.Horizontal/VerticalChange 。

As you figured out, you have to use a Canvas and place the objects by yourself instead of using a Grid or a ListView . 如您所知，您必须使用Canvas并Canvas放置对象，而不是使用Grid或ListView 。