C# WPF Drag and Drop Button within StackPanel on a Canvas

Question

This may be a basic question but I just started using WPF and I am having troubles trying to do a simple drag and drop.

I created this ToolboxButton class:

public class ToolboxButton : Button
{
    private bool _isDragging = false;
    private Point _startPoint;

    public ToolboxButton(string content)
    {
        Content = content;
        HorizontalAlignment = HorizontalAlignment.Stretch;
        Height = 30;
        Loaded += ToolboxButton_Loaded;
    }

    void ToolboxButton_Loaded(object sender, RoutedEventArgs e)
    {
        PreviewMouseLeftButtonDown += ToolboxButton_PreviewMouseLeftButtonDown;
        PreviewMouseMove += ToolboxButton_PreviewMouseMove;
    }

    void ToolboxButton_PreviewMouseMove(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed && !_isDragging)
        {
            Point position = e.GetPosition(null);

            if (Math.Abs(position.X - _startPoint.X) > SystemParameters.MinimumHorizontalDragDistance ||
                    Math.Abs(position.Y - _startPoint.Y) > SystemParameters.MinimumVerticalDragDistance)
            {
                StartDrag(e);
            }
        } 
    }

    void ToolboxButton_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        _startPoint = e.GetPosition(null);
    }

    private void StartDrag(MouseEventArgs e)
    {
        _isDragging = true;
        DataObject data = new DataObject(System.Windows.DataFormats.Text.ToString(), "abcd");
        DragDrop.DoDragDrop(e.Source as ToolboxButton, data, DragDropEffects.Move);
        _isDragging = false;
    }
}

This button is added in a stackpanel like so:

ToolboxButton btnAddButton = new ToolboxButton("Button");
_toolboxView.Children.Add(btnAddButton); // _toolboxView is a stackpanel

And I have a Canvas with the following code:

public class DesignerView : Canvas
{
    public DesignerView()
    {
        AllowDrop = true;
        DragOver += DesignerView_DragOver;
        Drop += DesignerView_Drop;
        PreviewDragOver += DesignerView_PreviewDragOver;
    }

    void DesignerView_PreviewDragOver(object sender, DragEventArgs e)
    {
        MessageBox.Show("previewdragover");
    }

    void DesignerView_DragOver(object sender, DragEventArgs e)
    {
        MessageBox.Show("dragover");
        if (!e.Data.GetDataPresent(typeof(ToolboxButton)))
        {
            e.Effects = DragDropEffects.None;
            e.Handled = true;
        }
    }

    void DesignerView_Drop(object sender, DragEventArgs e)
    {
        MessageBox.Show("drop");
        if (e.Data.GetDataPresent(typeof(ToolboxButton)))
        {
            ToolboxButton droppedThingie = e.Data.GetData(typeof(ToolboxButton)) as ToolboxButton;
            MessageBox.Show("You dropped: " + droppedThingie.Content);
        }
    }

    public UIElement GetView()
    {
        return this;
    }
}

Both Canvas and StackPanel are added in the main window like so:

Grid contentGrid = new Grid();
Content = contentGrid;
contentGrid.Children.Add(_toolboxView.GetView());
contentGrid.Children.Add(_designerView.GetView());

None of the MessageBoxes ever fire and I can't find out why. The cursor changes to the "Cannot pin", a dark circle with a diagonal line inside. Am I missing something ? I want everything to be done in the code without XML. Maybe I have to do something on the StackPanel but I tried the code of ToolboxButton there and it didn't work either.

Answer 1

As I can see you done all job, just DesignerView_drop left to correct.

use sender object to grab dragged object (in this example button)

void DesignerView_Drop(object sender, DragEventArgs e)
{
    MessageBox.Show("drop");
    Button btn = (Button)sender;

    contentGrid.Children.Add(btn);
}