Question

我需要实施this functionality in wpf. 当您转到该链接时，请注意如何拖动对象并将它们放在不同的位置。我想知道是否有可能用wpf创建它。我已经知道如何拖动对象了。有一个很好的answer in here that explains on how to do it。我需要对齐对象。使用最后一个链接只能让我拖动对象，但是在完成拖动后我需要它们对齐。

Answer 1

有很多不同的方法可以做到这一点，但这里有几个想法：

具有XOffset，YOffset和IsSnapped附加属性的自定义面板（默认为true）。当用户拖动项目时，将IsSnapped设置为false并在拖动时更新XOffset / YOffset。面板的布局逻辑可以排列具有强对齐（基于其XOffset / YOffset）的项目，除非IsSnapped为false，在这种情况下它们只显示在（XOffset，YOffset）。
使用现有的拖动行为，例如由blend提供的拖动行为，但在删除子项目后将其自己的坐标强加给子项目。 UPDATE ：这不会起作用，或者会很麻烦，因为Blend会动态修改拖动元素的RenderTransform，而不是更新一些附加属性，您可以从中进行计算。
主要在使用MVVM的视图模型中执行此操作。也就是说，在视图模型上有Top，Left，Width和Height属性，所有属性都通过行为更新（DragBehavior和SizeObserver行为）。让父视图模型公开子视图模型（每个子代表一个可拖动的项）。让父VM监视器更改为子坐标并根据需要强制执行。

我现在正在做类似的事情，已经和＃3一起走了。没有遗憾，这比你在这里尝试的要复杂得多，所以你不应该有任何阻碍。

更新：这是我的DragDrop行为：

using System.Diagnostics;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using Kent.Boogaart.HelperTrinity.Extensions;

public static class DragDrop
{
    public static readonly RoutedEvent PreviewBeginDragEvent = EventManager.RegisterRoutedEvent(
        "PreviewBeginDrag",
        RoutingStrategy.Tunnel,
        typeof(RoutedEventHandler),
        typeof(DragDrop));

    public static readonly RoutedEvent BeginDragEvent = EventManager.RegisterRoutedEvent(
        "BeginDrag",
        RoutingStrategy.Bubble,
        typeof(RoutedEventHandler),
        typeof(DragDrop));

    public static readonly RoutedEvent PreviewDragEvent = EventManager.RegisterRoutedEvent(
        "PreviewDrag",
        RoutingStrategy.Tunnel,
        typeof(RoutedEventHandler),
        typeof(DragDrop));

    public static readonly RoutedEvent DragEvent = EventManager.RegisterRoutedEvent(
        "Drag",
        RoutingStrategy.Bubble,
        typeof(RoutedEventHandler),
        typeof(DragDrop));

    public static readonly RoutedEvent PreviewEndDragEvent = EventManager.RegisterRoutedEvent(
        "PreviewEndDrag",
        RoutingStrategy.Tunnel,
        typeof(RoutedEventHandler),
        typeof(DragDrop));

    public static readonly RoutedEvent EndDragEvent = EventManager.RegisterRoutedEvent(
        "EndDrag",
        RoutingStrategy.Bubble,
        typeof(RoutedEventHandler),
        typeof(DragDrop));

    public static readonly DependencyProperty CanDragProperty = DependencyProperty.RegisterAttached(
        "CanDrag",
        typeof(bool),
        typeof(DragDrop),
        new FrameworkPropertyMetadata(OnCanDragChanged));

    public static readonly DependencyProperty IsDragInProgressProperty;

    public static readonly DependencyProperty DragParentProperty = DependencyProperty.RegisterAttached(
        "DragParent",
        typeof(FrameworkElement),
        typeof(DragDrop));

    public static readonly DependencyProperty XOffsetProperty = DependencyProperty.RegisterAttached(
        "XOffset",
        typeof(double),
        typeof(DragDrop));

    public static readonly DependencyProperty YOffsetProperty = DependencyProperty.RegisterAttached(
        "YOffset",
        typeof(double),
        typeof(DragDrop));

    private static readonly DependencyPropertyKey isDragInProgressPropertyKey = DependencyProperty.RegisterAttachedReadOnly(
        "IsDragInProgress",
        typeof(bool),
        typeof(DragDrop),
        new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.Inherits));

    private static readonly DependencyProperty DragPointProperty = DependencyProperty.RegisterAttached(
        "DragPoint",
        typeof(Point?),
        typeof(DragDrop),
        new PropertyMetadata());

    static DragDrop()
    {
        IsDragInProgressProperty = isDragInProgressPropertyKey.DependencyProperty;
    }

    public static void AddPreviewBeginDragHandler(DependencyObject dependencyObject, RoutedEventHandler handler)
    {
        var inputElement = dependencyObject as IInputElement;

        if (inputElement != null)
        {
            inputElement.AddHandler(PreviewBeginDragEvent, handler);
        }
    }

    public static void RemovePreviewBeginDragHandler(DependencyObject dependencyObject, RoutedEventHandler handler)
    {
        var inputElement = dependencyObject as IInputElement;

        if (inputElement != null)
        {
            inputElement.RemoveHandler(PreviewBeginDragEvent, handler);
        }
    }

    public static void AddBeginDragHandler(DependencyObject dependencyObject, RoutedEventHandler handler)
    {
        var inputElement = dependencyObject as IInputElement;

        if (inputElement != null)
        {
            inputElement.AddHandler(BeginDragEvent, handler);
        }
    }

    public static void RemoveBeginDragHandler(DependencyObject dependencyObject, RoutedEventHandler handler)
    {
        var inputElement = dependencyObject as IInputElement;

        if (inputElement != null)
        {
            inputElement.RemoveHandler(BeginDragEvent, handler);
        }
    }

    public static void AddPreviewDragHandler(DependencyObject dependencyObject, RoutedEventHandler handler)
    {
        var inputElement = dependencyObject as IInputElement;

        if (inputElement != null)
        {
            inputElement.AddHandler(PreviewDragEvent, handler);
        }
    }

    public static void RemovePreviewDragHandler(DependencyObject dependencyObject, RoutedEventHandler handler)
    {
        var inputElement = dependencyObject as IInputElement;

        if (inputElement != null)
        {
            inputElement.RemoveHandler(PreviewDragEvent, handler);
        }
    }

    public static void AddDragHandler(DependencyObject dependencyObject, RoutedEventHandler handler)
    {
        var inputElement = dependencyObject as IInputElement;

        if (inputElement != null)
        {
            inputElement.AddHandler(DragEvent, handler);
        }
    }

    public static void RemoveDragHandler(DependencyObject dependencyObject, RoutedEventHandler handler)
    {
        var inputElement = dependencyObject as IInputElement;

        if (inputElement != null)
        {
            inputElement.RemoveHandler(DragEvent, handler);
        }
    }

    public static void AddPreviewEndDragHandler(DependencyObject dependencyObject, RoutedEventHandler handler)
    {
        var inputElement = dependencyObject as IInputElement;

        if (inputElement != null)
        {
            inputElement.AddHandler(PreviewEndDragEvent, handler);
        }
    }

    public static void RemovePreviewEndDragHandler(DependencyObject dependencyObject, RoutedEventHandler handler)
    {
        var inputElement = dependencyObject as IInputElement;

        if (inputElement != null)
        {
            inputElement.RemoveHandler(PreviewEndDragEvent, handler);
        }
    }

    public static void AddEndDragHandler(DependencyObject dependencyObject, RoutedEventHandler handler)
    {
        var inputElement = dependencyObject as IInputElement;

        if (inputElement != null)
        {
            inputElement.AddHandler(EndDragEvent, handler);
        }
    }

    public static void RemoveEndDragHandler(DependencyObject dependencyObject, RoutedEventHandler handler)
    {
        var inputElement = dependencyObject as IInputElement;

        if (inputElement != null)
        {
            inputElement.RemoveHandler(EndDragEvent, handler);
        }
    }

    public static bool GetCanDrag(FrameworkElement frameworkElement)
    {
        frameworkElement.AssertNotNull("frameworkElement");
        return (bool)frameworkElement.GetValue(CanDragProperty);
    }

    public static void SetCanDrag(FrameworkElement frameworkElement, bool canDrag)
    {
        frameworkElement.AssertNotNull("frameworkElement");
        frameworkElement.SetValue(CanDragProperty, canDrag);
    }

    public static FrameworkElement GetDragParent(DependencyObject dependencyObject)
    {
        dependencyObject.AssertNotNull("dependencyObject");
        return dependencyObject.GetValue(DragParentProperty) as FrameworkElement;
    }

    public static void SetDragParent(DependencyObject dependencyObject, FrameworkElement dragParent)
    {
        dependencyObject.AssertNotNull("dependencyObject");
        dependencyObject.SetValue(DragParentProperty, dragParent);
    }

    public static double GetXOffset(FrameworkElement frameworkElement)
    {
        frameworkElement.AssertNotNull("frameworkElement");
        return (double)frameworkElement.GetValue(XOffsetProperty);
    }

    public static void SetXOffset(FrameworkElement frameworkElement, double xOffset)
    {
        frameworkElement.AssertNotNull("frameworkElement");
        frameworkElement.SetValue(XOffsetProperty, xOffset);
    }

    public static double GetYOffset(FrameworkElement frameworkElement)
    {
        frameworkElement.AssertNotNull("frameworkElement");
        return (double)frameworkElement.GetValue(YOffsetProperty);
    }

    public static void SetYOffset(FrameworkElement frameworkElement, double yOffset)
    {
        frameworkElement.AssertNotNull("frameworkElement");
        frameworkElement.SetValue(YOffsetProperty, yOffset);
    }

    public static bool GetIsDragInProgress(DependencyObject dependencyObject)
    {
        dependencyObject.AssertNotNull("dependencyObject");
        return (bool)dependencyObject.GetValue(IsDragInProgressProperty);
    }

    private static void SetIsDragInProgress(DependencyObject dependencyObject, bool isDragInProgress)
    {
        dependencyObject.AssertNotNull("dependencyObject");
        dependencyObject.SetValue(isDragInProgressPropertyKey, isDragInProgress);
    }

    private static Point? GetDragPoint(FrameworkElement frameworkElement)
    {
        frameworkElement.AssertNotNull("frameworkElement");
        return (Point?)frameworkElement.GetValue(DragPointProperty);
    }

    private static void SetDragPoint(FrameworkElement frameworkElement, Point? dragPoint)
    {
        frameworkElement.AssertNotNull("frameworkElement");
        frameworkElement.SetValue(DragPointProperty, dragPoint);
    }

    private static void OnCanDragChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
    {
        var frameworkElement = (FrameworkElement)dependencyObject;

        if ((bool)e.NewValue)
        {
            frameworkElement.MouseLeftButtonDown += OnFrameworkElementMouseLeftButtonDown;
            frameworkElement.MouseMove += OnFrameworkElementMouseMove;
            frameworkElement.MouseLeftButtonUp += OnFrameworkElementMouseLeftButtonUp;

            var parent = GetDragParent<FrameworkElement>(frameworkElement);

            if (parent == null)
            {
                frameworkElement.SetCurrentValue(XOffsetProperty, 0d);
                frameworkElement.SetCurrentValue(YOffsetProperty, 0d);
            }
            else
            {
                var pointRelativeToParent = frameworkElement.TranslatePoint(new Point(0, 0), parent);
                frameworkElement.SetCurrentValue(XOffsetProperty, pointRelativeToParent.X);
                frameworkElement.SetCurrentValue(YOffsetProperty, pointRelativeToParent.Y);
            }
        }
        else
        {
            frameworkElement.MouseLeftButtonDown -= OnFrameworkElementMouseLeftButtonDown;
            frameworkElement.MouseMove -= OnFrameworkElementMouseMove;
            frameworkElement.MouseLeftButtonUp -= OnFrameworkElementMouseLeftButtonUp;
        }
    }

    private static void OnFrameworkElementMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        var frameworkElement = (FrameworkElement)sender;
        var parent = GetDragParent<FrameworkElement>(frameworkElement);

        if (parent == null)
        {
            return;
        }

        var previewBeginDragEventArgs = new RoutedEventArgs(PreviewBeginDragEvent);
        frameworkElement.RaiseEvent(previewBeginDragEventArgs);

        if (previewBeginDragEventArgs.Handled)
        {
            return;
        }

        SetIsDragInProgress(frameworkElement, true);
        SetDragPoint(frameworkElement, e.GetPosition(parent));
        frameworkElement.CaptureMouse();
        frameworkElement.RaiseEvent(new RoutedEventArgs(BeginDragEvent));
    }

    private static void OnFrameworkElementMouseMove(object sender, MouseEventArgs e)
    {
        var frameworkElement = (FrameworkElement)sender;

        if (frameworkElement.IsMouseCaptured)
        {
            var previewDragEventArgs = new RoutedEventArgs(PreviewDragEvent);
            frameworkElement.RaiseEvent(previewDragEventArgs);

            if (previewDragEventArgs.Handled)
            {
                return;
            }

            var parent = GetDragParent<FrameworkElement>(frameworkElement);

            if (parent == null)
            {
                return;
            }

            var currentPointRelativeToParent = e.GetPosition(parent);
            var dragPoint = GetDragPoint(frameworkElement);
            Debug.Assert(dragPoint.HasValue, "dragPoint should be set.");

            frameworkElement.SetCurrentValue(XOffsetProperty, GetXOffset(frameworkElement) + (currentPointRelativeToParent.X - dragPoint.Value.X));
            frameworkElement.SetCurrentValue(YOffsetProperty, GetYOffset(frameworkElement) + (currentPointRelativeToParent.Y - dragPoint.Value.Y));
            SetDragPoint(frameworkElement, currentPointRelativeToParent);
            frameworkElement.RaiseEvent(new RoutedEventArgs(DragEvent));
        }
    }

    private static void OnFrameworkElementMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        var frameworkElement = (FrameworkElement)sender;

        if (frameworkElement.IsMouseCaptured)
        {
            frameworkElement.RaiseEvent(new RoutedEventArgs(PreviewEndDragEvent));
            SetDragPoint(frameworkElement, null);
            frameworkElement.ReleaseMouseCapture();
            frameworkElement.RaiseEvent(new RoutedEventArgs(EndDragEvent));
            SetIsDragInProgress(frameworkElement, false);
        }
    }

    private static T GetDragParent<T>(DependencyObject dependencyObject)
        where T : DependencyObject
    {
        var dragParent = GetDragParent(dependencyObject) as T;

        if (dragParent != null)
        {
            return dragParent;
        }

        var parent = VisualTreeHelper.GetParent(dependencyObject);

        while (parent != null && !(parent is T))
        {
            parent = VisualTreeHelper.GetParent(parent);
        }

        return (T)parent;
    }
}

Answer 2

如果您希望动态发生这种情况，那么我认为最好的解决方案是创建一个派生自WrapPanel的UniformWrapPanel，然后覆盖MeasureOverride和ArrangeOverride方法。然后在MeasureOverride方法中记下最大项目所需宽度（对于水平对齐），然后在ArrangeOverride方法中，对于扭曲排列过程中的每一行，让每个项目在一个总是移动最大值的矩形中排列自己项目所需的宽度。

如果您知道项目的大小，那么我相信它可以通过在WrapPanel上设置ItemWidth和ItemHeight属性来实现。例如：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>  
    <WrapPanel ItemWidth="150">
      <Rectangle Width="50" Height="50" Fill="Red" Margin="10" />
      <Rectangle Width="150" Height="50" Fill="Red" Margin="10" />
      <Rectangle Width="20" Height="50" Fill="Red" Margin="10" />
      <Rectangle Width="50" Height="50" Fill="Red" Margin="10" />
    </WrapPanel>
  </Grid>
</Page>

黑客解决方案可能是从WrapPanel派生，重写ArrangeOverride方法，迭代所有子节点并找到最大的大小，设置ItemWidth和ItemHeight属性，然后调用base.ArrangeOverride来完成其余的工作。 / p>

Wpf中的可排序WrapPanel

2 个答案: