Easy Drag Drop implementation MVVM

Question

I am new to MVVM and I am currently trying to add the drag/drop feature to my application. The thing is I already developed the interface in the code-behind but I am trying now to re-write the code into MVVM as I am only at the beginning of the project.

Here is the context: the user will be able to add boxes (ToggleButton but it may change) to a grid, a bit like a chessboard. Below is the View Model I am working on:

<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>

Items are basically from a class (child of INotifiedPropertyChanged) with a name, an icon and a position (Point).

Now, I am trying to make the user able to drag and drop the box (ToggleButton) within the grid wherever he/she wants. However, I am totally lost with Commands, AttachedProperties etc. I spent all the whole day on tutorials and tried drag/drop solutions but with my poor knowledge, I don't know how to apply all of this into my code.

On my code-behinded version of the code, it was easy. When the button is left-clicked, I say to a variable of the grid "hey, I am being dragged and dropped". While the user is moving, I changed the Item coordinates and when the user released the left button (left button up), the dragdrop_object variable comes null again.

In the frame of the MVVM, I am totally lost. Could you give me some tracks to help me trough ? I intended to give up with MVVM a lot of time, but I know that it is better to keep up even if every little feature takes litteraly hours for me to implement (it should decrease with time...).

Do not hesitate if you need further details to answer to my question.

Answer 1

I found the solution here : Move items in a canvas using MVVM and here : Combining ItemsControl with draggable items - Element.parent always null

To be precise, here is the code I added :

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))));
    }


}

And my DataTemplate is now:

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

I added the FindAncestor static class in a dedicated file like this:

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;
    }
}

(My items are now ContentControls). As the items' positions within the canvas are directly managed with their Pos variable (Canvas.SetLeft and Canvas.SetTop based on Pos (Pos.X and Pos.Y) with Binding), I just update it according to the MousePosition within the Canvas.

Also, as suggested in a commentary, I will see if there is something better than the ScrollViewer and Viewbox I'm using.