银光。需要修复。向右拖动堆栈面板项目将其移动到其他项目下方

Question

我有一个带有自定义控件的堆栈面板。我将标准 MouseDragElementBehavior 附加到每个项目。

当我向右拖动时，该项目移动到其他项目下方。

什么是一个可行的解决方案来创造更好的用户体验 - 显示更好的视觉提示 - 项目如何移动以及它将被丢弃的位置。

Answer 1

经过一番修改后，我意识到没有任何东西可以在堆栈面板中拖动到右侧而不被其他元素覆盖..除非您拖动非常正确的项目..

我做了什么来解决它：

1. 创建了一个视觉提示（通用项目的半透明形状以在拖动操作期间表示它）
2. 使提示不可见 (width=0) 并始终将其保留为堆栈面板子项的最后一个元素
3. 将堆栈面板订阅到鼠标左键向上、向下、移动
4. 使用代码模拟拖放
5. 一旦开始拖动，我将提示变为可见并将其平移变换设置为当前鼠标坐标
6. 调整每次鼠标移动事件的平移变换
7. 在放置时，我再次隐藏提示并以我想要的方式重新排列项目。

再次强调 - 无论您做什么 - 您都必须使用 StackPanel.Children 集合中的最后一个元素进行操作....

Answer 2

如果 MouseDragElementBehavior 不能按您需要的方式工作，您总是可以从类中降级并根据您的需要对其进行自定义。例如：

public class DragBehvaior : MouseDragElementBehavior
{
    public DragBehvaior()
    {
        this.DragBegun += new MouseEventHandler(DragBehvaior_DragBegun);
    }

    void DragBehvaior_DragBegun(object sender, MouseEventArgs e)
    {
        var element = this.AssociatedObject as UIElement;
        // Calculate the correct ZIndex here.
        Canvas.SetZIndex(element, 100);
    }
}