c# - How to drag and drop a "box" in silverlight

Question

I have a created a box like this and now i'm trying to drag and drop the box, with rectangles and other objects I did it, but with this I don't know how to do.

Here is the code of how I did the box

XAML:

<Canvas>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBox Text="{Binding Header,UpdateSourceTrigger=PropertyChanged}"
             BorderBrush="Black" BorderThickness="1" Canvas.Left="41" Canvas.Top="10" Width="97" />
        <TextBox Text="{Binding Text,UpdateSourceTrigger=PropertyChanged}"
             TextWrapping="Wrap"
             VerticalScrollBarVisibility="Auto"
             AcceptsReturn="True"
             BorderBrush="Black" BorderThickness="1" Grid.Row="1" Canvas.Left="41" Canvas.Top="39" Height="53" Width="97" />
    </Grid>
</Canvas>

The c# code:

public partial class MyBox : UserControl
{
    public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register("Header", typeof(string), typeof(MyBox),null);
    public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Content", typeof(string), typeof(MyBox),null);

    public string Header
    {
        get { return GetValue(HeaderProperty) as string; }
        set { SetValue(HeaderProperty, value); }
    }

    public string Text
    {
        get { return GetValue(TextProperty) as string; }
        set { SetValue(TextProperty, value); }
    }

    public MyBox()
    {
        InitializeComponent();
        this.DataContext = this;    
    }

And this is the code for adding another box:

private void Button_Click(object sender, RoutedEventArgs e)
{
    panel.Children.Add(new MyBox
    {
        //LayoutRoot.Children.Add(new MyBox  {
        Header = "Another box",
        Text = "...",
        //    BorderBrush = Brushes.Black,
        BorderThickness = new Thickness(1),
        Margin = new Thickness(10)
    });
}

Answer 1

Here is a sample, inspired from https://stackoverflow.com/a/1495486/145757 (thanks Corey), slightly adapted, simplified (no additional boolean) and enhanced (take margins into account) for our use-case:

First I've modified the box so that it has a dedicated drag area:

<UserControl x:Class="WpfApplication1.MyBox"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Text="Drag me" />
        <TextBox Text="{Binding Header,UpdateSourceTrigger=PropertyChanged}"
                 BorderBrush="Black" BorderThickness="1" Margin="2" Grid.Row="1" />
        <TextBox Text="{Binding Text,UpdateSourceTrigger=PropertyChanged}"
                 TextWrapping="Wrap"
                 VerticalScrollBarVisibility="Auto"
                 AcceptsReturn="True"
                 BorderBrush="Black" BorderThickness="1" Margin="2" Grid.Row="2" />
    </Grid>
</UserControl>

MainWindow XAML slightly modified:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:local="clr-namespace:WpfApplication1">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Canvas x:Name="panel">
        </Canvas>
        <Button Content="Add" Grid.Row="1" Grid.Column="0" Click="Button_Click" />
    </Grid>
</Window>

And the drag-and-drop engine is in the code-behind:

using System.Windows;
using System.Windows.Media;
using System.Windows.Input;
using System.Windows.Controls;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MyBox box = new MyBox
            {
                Header = "Another box",
                Text = "...",
                BorderBrush = Brushes.Black,
                BorderThickness = new Thickness(1),
                Margin = new Thickness(10)
            };

            box.MouseLeftButtonDown += Box_MouseLeftButtonDown;
            box.MouseLeftButtonUp += Box_MouseLeftButtonUp;
            box.MouseMove += Box_MouseMove;

            panel.Children.Add(box);
        }

        private MyBox draggedBox;
        private Point clickPosition;

        private void Box_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            draggedBox = sender as MyBox;
            clickPosition = e.GetPosition(draggedBox);
            draggedBox.CaptureMouse();
        }

        private void Box_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            draggedBox.ReleaseMouseCapture();
            draggedBox = null;
        }

        private void Box_MouseMove(object sender, MouseEventArgs e)
        {
            if (draggedBox != null)
            {
                Point currentPosition = e.GetPosition(panel);

                draggedBox.RenderTransform = draggedBox.RenderTransform ?? new TranslateTransform();

                TranslateTransform transform = draggedBox.RenderTransform as TranslateTransform;

                transform.X = currentPosition.X - clickPosition.X - draggedBox.Margin.Left;
                transform.Y = currentPosition.Y - clickPosition.Y - draggedBox.Margin.Right;
            }
        }
    }
}