Easy Drag Drop 实现 MVVM

Question

我是 MVVM 的新手，我目前正在尝试将拖放功能添加到我的应用程序中。问题是我已经在代码隐藏中开发了接口，但我现在正尝试将代码重新写入 MVVM，因为我只是在项目的开始阶段。

这里是上下文：用户将能够将框（ToggleButton，但它可能会更改）添加到网格，有点像棋盘。下面是我正在处理的视图模型：

<Page.Resources>
    <Style TargetType="{x:Type local:AirportEditionPage}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Page}">

                    <!-- The page content-->
                    <Grid>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{Binding ToolKitWidth, FallbackValue=50}" />
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="{Binding RightPanelWidth, FallbackValue=400}"/>
                        </Grid.ColumnDefinitions>

                        <!-- The airport grid where Steps and Links are displayed -->
                        <ScrollViewer Grid.ColumnSpan="4" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                            <Viewbox Height="{Binding AirportGridHeight}" Width="{Binding AirportGridWidth}" RenderOptions.BitmapScalingMode="HighQuality">
                                <ItemsControl x:Name="ChessBoard" ItemsSource="{Binding Items}">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <Canvas Width="{Binding CardQuantityRow}" Height="{Binding CardQuantityColumn}" Background="{StaticResource AirportGridBackground}"/>
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Grid Width="1" Height="1">
                                                <ToggleButton Style="{StaticResource StepCardContentStyle}"/>
                                            </Grid>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                    <ItemsControl.ItemContainerStyle>
                                        <Style>
                                            <Setter Property="Canvas.Left" Value="{Binding Pos.X}"/>
                                            <Setter Property="Canvas.Top" Value="{Binding Pos.Y}" />
                                        </Style>
                                    </ItemsControl.ItemContainerStyle>
                                </ItemsControl>
                            </Viewbox>
                        </ScrollViewer>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

项目基本上来自具有名称、图标和位置（点）的类（INotifiedPropertyChanged 的​​子级）。

现在，我试图让用户能够将框 (ToggleButton) 拖放到他/她想要的任何地方。但是，我对命令、附加属性等完全迷失了。我整天都在学习教程并尝试拖放解决方案，但由于知识贫乏，我不知道如何将所有这些应用到我的代码中。

在我的代码隐藏版本中，这很容易。当左键单击按钮时，我对网格的一个变量说“嘿，我正在被拖放”。当用户移动时，我更改了 Item 坐标，当用户松开左键（左键向上）时，dragdrop_object 变量再次变为 null。

在 MVVM 的框架中，我完全迷失了。你能给我一些曲目来帮助我度过难关吗？我本来打算放弃 MVVM 很多时间，但我知道最好跟上，即使每个小功能都需要几个小时才能实现（它应该随着时间的推移而减少......）。

如果您需要更多详细信息来回答我的问题，请不要犹豫。

Answer 1

我在这里找到了解决方案：Move items in a canvas using MVVM 和这里：Combining ItemsControl with draggable items - Element.parent always null

确切地说，这是我添加的代码：

public class DragBehavior
{
    public readonly TranslateTransform Transform = new TranslateTransform();
    private static DragBehavior _instance = new DragBehavior();
    public static DragBehavior Instance
    {
        get { return _instance; }
        set { _instance = value; }
    }

    public static bool GetDrag(DependencyObject obj)
    {
        return (bool)obj.GetValue(IsDragProperty);
    }

    public static void SetDrag(DependencyObject obj, bool value)
    {
        obj.SetValue(IsDragProperty, value);
    }

    public static readonly DependencyProperty IsDragProperty =
      DependencyProperty.RegisterAttached("Drag",
      typeof(bool), typeof(DragBehavior),
      new PropertyMetadata(false, OnDragChanged));

    private static void OnDragChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        // ignoring error checking
        var element = (UIElement)sender;
        var isDrag = (bool)(e.NewValue);

        Instance = new DragBehavior();
        ((UIElement)sender).RenderTransform = Instance.Transform;

        if (isDrag)
        {
            element.MouseLeftButtonDown += Instance.ElementOnMouseLeftButtonDown;
            element.MouseLeftButtonUp += Instance.ElementOnMouseLeftButtonUp;
            element.MouseMove += Instance.ElementOnMouseMove;
        }
        else
        {
            element.MouseLeftButtonDown -= Instance.ElementOnMouseLeftButtonDown;
            element.MouseLeftButtonUp -= Instance.ElementOnMouseLeftButtonUp;
            element.MouseMove -= Instance.ElementOnMouseMove;
        }
    }

    private void ElementOnMouseLeftButtonDown(object sender, MouseButtonEventArgs mouseButtonEventArgs)
    {
        ((UIElement)sender).CaptureMouse();
    }

    private void ElementOnMouseLeftButtonUp(object sender, MouseButtonEventArgs mouseButtonEventArgs)
    {
        ((UIElement)sender).ReleaseMouseCapture();
    }

    private void ElementOnMouseMove(object sender, MouseEventArgs mouseEventArgs)
    {
        FrameworkElement element = sender as FrameworkElement;
        Canvas parent = element.FindAncestor<Canvas>();
        var mousePos = mouseEventArgs.GetPosition(parent);
        if (!((UIElement)sender).IsMouseCaptured) return;
        if (mousePos.X < parent.Width && mousePos.Y < parent.Height && mousePos.X >= 0 && mousePos.Y >=0)
            ((sender as FrameworkElement).DataContext as Step).Pos = new System.Drawing.Point(Convert.ToInt32(Math.Floor(mousePos.X)), Convert.ToInt32((Math.Floor(mousePos.Y))));
    }


}

我的 DataTemplate 现在是：

<DataTemplate>
     <ContentControl Height="1" Width="1" local:DragBehavior.Drag="True" Style="{StaticResource StepCardContentControl}"/>
</DataTemplate>

我在一个专用文件中添加了 FindAncestor 静态类，如下所示：

public static class FindAncestorHelper
{
    public static T FindAncestor<T>(this DependencyObject obj)
    where T : DependencyObject
    {
        DependencyObject tmp = VisualTreeHelper.GetParent(obj);
        while (tmp != null && !(tmp is T))
        {
            tmp = VisualTreeHelper.GetParent(tmp);
        }
        return tmp as T;
    }
}

（我的项目现在是 ContentControls）。 由于项目在画布中的位置直接使用它们的 Pos 变量（Canvas.SetLeft 和 Canvas.SetTop 基于 Pos（Pos.X 和 Pos.Y）和绑定）进行管理，我只是根据画布中的 MousePosition 更新它.

另外，正如评论中所建议的，我会看看是否有比我正在使用的 ScrollViewer 和 Viewbox 更好的东西。