WinRT的拖放，交换两个项目，而不是插入 [英] winRT drag and drop, swap two items instead of inserting

问题描述

我是一个很长一段时间WPF用户，但新的WinRT，我想知道是否有一个内置的方式或简单的方法来整合集装箱swaping的功能，而不是插入拖放（而不是draging之间滴速2项插入，拖动并在另一个项目下降，同时拥有draged项目，它是在得到他们的位置互换）

I'm a long time WPF user but new to WinRT, i'm wondering if there's a built in way or easy way to integrate swaping functionality in containers instead of "inserting" drag and drop (instead of draging and droping between 2 items to insert, drag and drop on another item and have both the draged item and the item it's draged on get their position swapped)

比如我有1名单draged项目2 3 4 5 6 7 8，如果我的拖7 4，我想用1 2 3 7 5 6 4 8

Example i have a list with 1 2 3 4 5 6 7 8, if i drag 7 "on" 4 i want a list with 1 2 3 7 5 6 4 8

我目前使用的是与ItemsWrapGrid GridView的，因为它的容器中显示大量的照片缩略图，我需要能够与通常所需要的行动被交换到重新排序。

I'm currently using a gridview with an ItemsWrapGrid as it's container to display a lot of picture thumbnails and i need to be able to reorder them with the most commonly required action being a swap.

或者，如果有没有内置的方式，你可以暗示我什么正确方向从头开始做这将是WinRT中？我想处理随意拖动和容器，但在项目级别不下降，人工交换中的ObservableCollection的项目？

Or if there's no built in way, can you hint me at what the "proper" direction to start doing it from scratch would be in WinRT? I'm thinking handle the drag and drop not at the container but at the item level, and manually swap the items in the ObservableCollection?

推荐答案

现有答案将做交换给你，在数据层面。这里是什么可以做，使用户界面更加人性化。

Both existing answers will do the swapping for you, at the data level. Here's what can be done to make the UI more user-friendly.

恕我直言，以处理交换的最佳UX是，当您拖动一个项目，将其移到另一个，后者应的显示的拖动的项目本来是在哪里。这清楚地告诉用户究竟在何处的项目会去。就像什么显示在下面的gif图片上的。

IMHO, the best UX to handle the swapping is, when you drag an item and move it over another, the latter should appear to where the dragged item was originally at. This clearly tells the user where exactly the items will go. Just like what's shown on the gif image below.

要做到这一点，你需要创建一个图片，并使用<$ C > $ C> RenderTargetBitmap 复制下拉项的外观下拉项的拖动项目移动。拖动动作开始时当然，你需要获得的拖动项目的位置，让您知道究竟把这个图像。

To do this you will need to create an Image and use RenderTargetBitmap to copy the look of the drop item to its source, when the drag item moves over the drop item. Of course when the drag action starts, you need to get the position of the drag item so you know where exactly to put this image.

然后，一旦该项目被删除，你应该清楚，隐藏图像和进行数据交换。

Then, once the item is dropped, you should clear and hide the image and do the data exchange.

private void GridView_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
{
    // get item container, i.e. GridViewItem
    var itemContainer = (GridViewItem)this.MyGridView.ContainerFromItem(e.Items[0]);

    // get drag item index from its item container
    _dragItemIndex = this.MyGridView.IndexFromContainer(itemContainer);

    // get drag item position
    var position = itemContainer.GetRelativePosition(this.LayoutRoot);

    // set the width and height of the image
    this.DropItemImage.Width = itemContainer.ActualWidth;
    this.DropItemImage.Height = itemContainer.ActualHeight;

    // move the image to this location
    this.DropItemImage.RenderTransformOrigin = new Point(0, 0);
    this.DropItemImage.RenderTransform.Animate(null, position.X, "TranslateX", 0, 0);
    this.DropItemImage.RenderTransform.Animate(null, position.Y, "TranslateY", 0, 0);
}

private void GridView_Drop(object sender, DragEventArgs e)
{
    // first we need to reset the image
    this.DropItemImage.Source = null;

    // get the drop & drop items
    var dragItem = _groups[_dragItemIndex];
    var dropItem = _groups[_dropItemIndex];

    // then we swap their positions
    _groups.RemoveAt(_dragItemIndex);
    _groups.Insert(_dragItemIndex, dropItem);
    _groups.RemoveAt(_dropItemIndex);
    _groups.Insert(_dropItemIndex, dragItem);
}

private object _previous;
private async void ItemRoot_DragOver(object sender, DragEventArgs e)
{
    // first we get the DataContext from the drop item in order to retrieve its container
    var vm = ((Grid)sender).DataContext;

    // get the item container
    var itemContainer = (GridViewItem)this.MyGridView.ContainerFromItem(vm);

    // this is just to stop the following code to be called multiple times druing a DragOver
    if (_previous != null && _previous == itemContainer)
    {
        return;
    }
    _previous = itemContainer;

    // get drop item index from its item container
    _dropItemIndex = this.MyGridView.IndexFromContainer(itemContainer);

    // copy the look of the drop item to an image
    var bitmap = new RenderTargetBitmap();
    await bitmap.RenderAsync(itemContainer);
    this.DropItemImage.Source = bitmap;

    // animate the image to make its appearing more interesting
    this.DropItemImage.Animate(0, 0.4, "Opacity", 200, 0);
    this.DropItemImage.RenderTransformOrigin = new Point(0.5, 0.5);
    this.DropItemImage.RenderTransform.Animate(0.8, 1, "ScaleX", 200, 0, new ExponentialEase { EasingMode = EasingMode.EaseIn });
    this.DropItemImage.RenderTransform.Animate(0.8, 1, "ScaleY", 200, 0, new ExponentialEase { EasingMode = EasingMode.EaseIn });
}

我已经包含了一个小样本项目的这里，所以您可以检查出的动画如何做。请注意，交换部分的数据不包括在内。正如我所说的，其他的答案已经解释得非常好。 ：）

I have included a small sample project here just so you can check out how the animations are done. Please note that the data swapping part is not included, as I said, the other answers already explain it very well. :)

这篇关于WinRT的拖放，交换两个项目，而不是插入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！