Drag/Drop Button in same application throwing an exception

Question

I have a Canvas that contains a button which I want to be able to drag and drop into another canvas. I want to copy the button to the other Canvas. Here is the code I am using:

The XAML:

<Window>
    <Grid>
        <Canvas
            Height="300"
            Width="500"
            Background="Gray">
            <Canvas
                Name="cnvToolBox"
                Canvas.Left="10"
                Canvas.Top="10"
                Background="AliceBlue"
                Width="100"
                Height="200">
                <Button
                    Content="Drag Me!"
                    PreviewMouseLeftButtonDown="Button_PreviewMouseLeftButtonDown"
                    PreviewMouseMove="Button_PreviewMouseMove"></Button>
            </Canvas>
            <Rectangle 
                Canvas.Left="119"
                Canvas.Top="9"
                Width="102"
                Height="202"
                StrokeDashArray="0.5 1.0 0.3" 
                Stroke="Black" 
                StrokeThickness="2"/>
            <Canvas    
                Name="cnvButtonDropZone"
                Canvas.Left="120"
                Canvas.Top="10"
                Width="100"
                Height="200"
                Background="LightGreen"
                AllowDrop="True"
                DragEnter="Canvas_DragEnter"
                Drop="Canvas_Drop">
            </Canvas>
        </Canvas>
    </Grid> 
</Window>

Here's the Code Behind:

public partial class MainWindow : Window
{
    private Point startPoint;

    public MainWindow()
    {
        InitializeComponent();
    }

    private void Button_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        startPoint = e.GetPosition(null);
    }

    private void Button_PreviewMouseMove(object sender, MouseEventArgs e)
    {
        Point currentPosition = e.GetPosition(null);
        Vector diff = startPoint - currentPosition;

        if (e.LeftButton == MouseButtonState.Pressed &&
            (Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance ||
            Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance))
        {
            Button button = sender as Button;

            DataObject dragData = new DataObject("myFormat", button);
            DragDrop.DoDragDrop(button, dragData, DragDropEffects.Copy);
        }
    }

    private void Canvas_DragEnter(object sender, DragEventArgs e)
    {
        if (!e.Data.GetDataPresent("myFormat") || sender == e.Source)
        {
            e.Effects = DragDropEffects.None;
        }
    }

    private void Canvas_Drop(object sender, DragEventArgs e)
    {
        if (e.Data.GetDataPresent("myFormat"))
        {
            Button button = e.Data.GetData("myFormat") as Button;

            Canvas canvas = sender as Canvas;
            canvas.Children.Add(button);

        }
    }
}

When I drop the button I get the following exception when I'm adding the button to the canvas:

Specified element is already the logical child of another element. Disconnect it first.

I'm just trying to learn how to drag and drop controls and not really sure what that error means and how to resolve it. I don't know where I'm going wrong. Any suggestions would be welcome.

Thanks!

Answer 1

The button is owned by its parent cnvToolBox. You need to remove it from cnvToolBox before adding it to the canvas.

            cnvToolBox.Children.Remove(button);
            var canvas = sender as Canvas;
            canvas.Children.Add(button);

This moves the button from your toolbox to the canvas. If you actually want to clone the item you want something like:

        if (e.Data.GetDataPresent("myFormat"))
        {
            var contentControl = (ContentControl)e.Data.GetData("myFormat");

            var constructorInfo = contentControl.GetType().GetConstructor(new Type[] {});
            if (constructorInfo != null)
            {
                var newElement = (UIElement)constructorInfo.Invoke(new object[]{});

                var newContentControl = newElement as ContentControl;
                if(newContentControl != null)
                {
                    newContentControl.Content = contentControl.Content;
                }

                ((Panel)sender).Children.Add(newElement);
            }
        }

Answer 2

It's because the Button already has a parent associated with it; the previous Canvas.

You can set the parent of the Button to null; which will essentially remove it from the logical relationship.

button.Parent = null;

You will then be able to add that Button to another Canvas as you have done in your code behind.

You can also remove the Button from the Children property directly if you prefer and then add it accordingly within the new Canvas.

Canvas.Children.Remove(button);