Drag and drop user controls in wpf

Question

4.00/5 (2 votes)

See more:

Hello,

i googled to check how to drag and drop usercontrols in the same form in wpf but didnt get any perfect one.

i have 3 usercontrols in the wpf form.
i want to drag and drop these usercontrols on a canvas in the same form.
Iam new to WPF and confused with these mousemove, mouseleftbuttondown,and other event handlers.

what exactly to write in these eventhandlers. how can be dataobject created and captured in drop eventhandler.

can any one help me out with a good example.plz provide me the source code so that i can understand.

thanks,

Posted 4-Jul-11 1:53am

KiranBabu M

Add a Solution

3 solutions

Solution 1

Perhaps you face a problem because you're trying to find the solution fitting your case exactly. This is not a very fruitful way because each design has its unique features; so perhaps all developers solve their own problem and share the result, no one may be solving exact your problem. In such cases, you need to start with basics.

You're not reporting any particular problem, just ask how to write this and that. This is all well known and documented, not like some other WPF aspects which can be documented obscurely.

I think there is no lack of documentation on the topic. Start from the very beginning: http://msdn.microsoft.com/en-us/library/ms742859.aspx[^].

—SA

Posted 4-Jul-11 10:03am

Sergey Alexandrovich Kryukov

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mark Salsbery · Accepted Answer · 2011-07-05T14:25:00

Solution 3

My other "solution" implements a usercontrol which can be dragged around the same canvas it's originally placed on.

If you meant you need to drag the user controls from another element on TO a Canvas, then here's an example using WPF drag and drop...

First, implement a custom Canvas class which is a drop target and a drag/drop data class to pass info from the drag/drop source to the drop target:

public class DropableCanvas : Canvas
{
    public DropableCanvas()
        : base()
    {
        this.AllowDrop = true;
        this.Drop += new DragEventHandler(DropableCanvas_Drop);
    }

    void DropableCanvas_Drop(object sender, DragEventArgs e)
    {
        if (e.Data.GetDataPresent(typeof(DropableCanvasDragDropData)))
        {
            DropableCanvasDragDropData dragdropdata = e.Data.GetData(typeof(DropableCanvasDragDropData)) as DropableCanvasDragDropData;

            // Remove usercontrol from its starting panel
            dragdropdata.SourcePanel.Children.Remove(dragdropdata.UserControl);

            // Position the usercontrol on this canvas at the drop point
            Point dropPoint = e.GetPosition(this);
            Canvas.SetLeft(dragdropdata.UserControl, dropPoint.X - dragdropdata.OffsetPoint.X);
            Canvas.SetTop(dragdropdata.UserControl, dropPoint.Y - dragdropdata.OffsetPoint.Y);

            // Add the usercontrol to this canvas
            this.Children.Add(dragdropdata.UserControl);
        }
        e.Handled = true;
    }
}

public class DropableCanvasDragDropData
{
    public DropableCanvasDragDropData(Panel srcpanel, UserControl control, Point pt)
    {
        this.SourcePanel = srcpanel;
        this.UserControl = control;
        this.OffsetPoint = pt;
    }

    public Panel SourcePanel { get; protected set; }
    public UserControl UserControl { get; protected set; }
    public Point OffsetPoint { get; protected set; }
}

Next,implement a dragable user control by making it a drag source:

public partial class DragableUserControl : UserControl
{
    public DragableUserControl()
    {
        InitializeComponent();
    }

    private void UserControl_MouseMove(object sender, MouseEventArgs e)
    {
        DragableUserControl dragableusercontrol = sender as DragableUserControl;
        if (dragableusercontrol != null && e.LeftButton == MouseButtonState.Pressed)
        {
            DragDrop.DoDragDrop(dragableusercontrol,
                            new DropableCanvasDragDropData(dragableusercontrol.Parent as Panel, dragableusercontrol, e.GetPosition(dragableusercontrol)),
                            DragDropEffects.All);
        }
    }
}

<UserControl x:Class="WPFTester.DragableUserControl"
             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" 
             MouseMove="UserControl_MouseMove"
             >
    <Grid Width="100" Height="100" >
        <Border Background="SteelBlue" />
    </Grid>
</UserControl>

And finally, test it all:

<UserControl x:Class="WPFTester.DragControlTestPage"
             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" 
             xmlns:local="clr-namespace:WPFTester"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="450"
             >
    <Grid >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <local:DropableCanvas Grid.Column="0" Background="LightSteelBlue" Height="200" Width="200" Margin="10" >
            <local:DragableUserControl Canvas.Left="10" Canvas.Top="10" />
        </local:DropableCanvas>
        <local:DropableCanvas Grid.Column="1" Background="LightSteelBlue" Height="200" Width="200" Margin="10" >
            <local:DragableUserControl Canvas.Left="10" Canvas.Top="10" />
        </local:DropableCanvas>
    </Grid>
</UserControl>

You should be able to drag and drop the two dragable usercontrols between the two canvases.

*Edit* 7/5/2011 Removed a couple unused fields from the DragableUserControl class...oops.

*Edit* 7/6/2011 Here's an example of dropping a new usercontrol of the same type as the dragged usercontrol instead of moving the dragged control. Just change the DropableCanvas.DropableCanvas_Drop method to this:

void DropableCanvas_Drop(object sender, DragEventArgs e)
{
    if (e.Data.GetDataPresent(typeof(DropableCanvasDragDropData)))
    {
        DropableCanvasDragDropData dragdropdata = e.Data.GetData(typeof(DropableCanvasDragDropData)) as DropableCanvasDragDropData;

        //// Remove usercontrol from its starting panel
        //dragdropdata.SourcePanel.Children.Remove(dragdropdata.UserControl);

        // Make a new usercontrol to drop
        UserControl newcontrol;
        try
        {
            newcontrol = Activator.CreateInstance(dragdropdata.UserControl.GetType()) as UserControl;
        }
        catch (Exception)
        {
            //**TODO** Handle this! For now, silent fail.
            newcontrol = null;
        }

        if (newcontrol != null)
        {
            // Position the usercontrol on this canvas at the drop point
            Point dropPoint = e.GetPosition(this);
            Canvas.SetLeft(newcontrol, dropPoint.X - dragdropdata.OffsetPoint.X);
            Canvas.SetTop(newcontrol, dropPoint.Y - dragdropdata.OffsetPoint.Y);

            // Add the usercontrol to this canvas
            this.Children.Add(newcontrol);
        }
    }
    e.Handled = true;
}

Posted 5-Jul-11 14:25pm

Mark Salsbery

Updated 6-Jul-11 11:19am

v5

Comments

KiranBabu M 6-Jul-11 9:43am

Hi Mark Salsbery,
thats great..! both your solutions working perfectly.
thank u very much.
According to your solution we can able to drag and drop usercontrols between two canvases.
i just tried to remove this line
dragdropdata.SourcePanel.Children.Remove(dragdropdata.UserControl);
and changed Dragdropeffects.copy;
so that when we drag and drop it will copy the usercontrol to canvas(should not remove from source). its showing following error
" An exception of type System.invalidoperationException was thrown:\n Specified element is already the logical child of another element. Disconnect it first."
how can we drag and drop so that after drop usercontrol should be copied but not removed.

thanku once again

Mark Salsbery 6-Jul-11 17:03pm

Yes, one control can't exist as the child of more than one element, so you'll need to provide a way to create a new usercontrol object on the drop target. How you do that is up to you depending on your implementation. You can add necessary info to the DropableCanvasDragDropData class if needed. For example, you could pass the usercontrol's type, and on drop, use Activator.CreateInstance() to create a new object of that type.

Mark Salsbery 6-Jul-11 17:14pm

Actually the information is there in the example solution to create a new usercontrol easily. I've appended a modified version of the one method that needs to be changed to this solution - the drop event handler on the dropable canvas.

VK k 7-Jul-11 8:32am

I started working with wpf nearly 2 months ago. I want to drag and drop multiple video clips from one control to another control in the sme window in WPF. i dont know how to do this and there is nop perfect solution in google on drag and drop for multiple video clips,
My requirement is on one control i have a button(for importing videos through openfile dialog box and displays in the control). after importing i want to drag and drop video clips on othercontrol.if i click on any video it should be able to ply in a mediaelement in the same window.

can u help me by posting similar solution.

thanks in advance,
Venkat

Mark Salsbery 8-Jul-11 13:11pm

The built-in drag and drop functionality I used above is pretty generic. WPF doesn't care what's being dragged and dropped (unless you're using built-in dropdata types) so you're free to use what you want. If you take the above sample and understand how it works, then you can easily pass a collection of selected media objects in the DropableCanvasDragDropData class. THe drop target can do whatever with these - create mediaelements, put them in a listbox, etc...

Also see the link SA provided... Drag and Drop Overview[^]

KiranBabu M 10-Jul-11 12:53pm

By using the above code.
I have created user controls(with content) dynamically and mousemove event for that usercontrol from code. Now when i do drag and drop of these Dynamically created user controls, drag is happening but drop is not happening. usercontrols created from design mode and dynamically from code behaves differently(r they not same).

Can u guide me in the right way..

Thanks

Mark Salsbery 10-Jul-11 13:05pm

You should be able to debug why the drop is failing. Put a breakpoint in the drop event handler and step through. Make sure you set all the same properties in code that get set in the XAML version of your usercontrol.

KiranBabu M 11-Jul-11 14:02pm

For Dynamically created user controls it is working if i use the code only when i drag and drop(i.e removing control from source).
if i tried to use the second sample for(copying source control but not remove) drag and drop, drop is not happening.
i have taken usercontrol content as button and label and tried to drag and drop(copy but not remove in source) it is not happening.
UserControl newcontrol;
newcontrol =
UserControl newcontrol;
Activator.CreateInstance(dragdropdata.UserControl.GetType()) as UserControl;
// here it is not creating instance.

Thanks

Mark Salsbery 11-Jul-11 15:30pm

Why isn't it happening? Does the drag ever get initiated? Does the drop event handler get called?

KiranBabu M 12-Jul-11 0:37am

I have used the same code except that creating dynamic usercontrols with button ,label as content in to it and Mousemove event handler.
This is the code where it is going wrong, plz guide me the right way.

// Under button click event
UserControl uc=new UserControl();
uc.Height=125;uc.Width =100;
Button b1=new Button();
b1.Height =25;b1.Width=75;
b1.Content ="Dynamic button";
Label lb1=new Label();
lb1.Height=25; lb1.Width=85;
lb1.Content="Dynamic UserControl";
StackPanel sp=new StackPanel();
sp.Children .Add (b1);
sp.Children.Add(lb1);
uc .Content =sp;
uniformgrid1 .Children .Add (uc);
uc .MouseMove +=new MouseEventHandler(uc_MouseMove);

//Code for drag
private void uc_MouseMove(object sender, MouseEventArgs e)
{
UserControl dragableusercontrol=sender as UserControl;
if(dragableusercontrol!=null && e .LeftButton == MouseButtonState.Pressed )
{
DragDrop .DoDragDrop(dragableusercontrol ,new DropableCanvasDragDropData(dragableusercontrol .Parent as Panel , dragableusercontrol ,e.GetPosition (dragableusercontrol )),
DragDropEffects.Copy);
}
}
and for drop i have not changed the code, used the same DropableCanvas code.

KiranBabu M 12-Jul-11 9:03am

I have debugged the code, it is not creating the instance of dynamically created user control.

// in the drop event handler here it is not creating insatnce.
UserControl newcontrol;
newcontrol=Activator.CreateInstance(dragdropdata.UserControl
.GetType())as UserControl;

Mark Salsbery 12-Jul-11 16:50pm

Then it should be throwing an exception....what's the exception??

KiranBabu M 13-Jul-11 7:37am

no it is not throwing any exception.
simply when i drag and drop the user control it is not dropping the user control in the drop location. but when i do drag and drop for removing the usercontrol from source and adding in drop location, it is working perfectly.
only when i want to copy the dynamic usercontrol by drag and drop in to the canvas it is not dropping.
when i debug, the newcontrol value is not null
newcontrol=system.windows.controls.usercontrol
but still it is not adding the newcontrol in drop location.

plz share me your view why it is not adding the dynamic usercontrol in drop location when i copy it and adding when i remove it from source.
give me any idea how to do this, plz

Mark Salsbery 13-Jul-11 17:07pm

My fault. I see you create the usercontrol in code, so the drop handler has no idea about the child elements in the usercontrol - it just creates an empty usercontrol. You'll need to create a usercontrol and add the child elements just like you did to create the original. I would derive a class from UserControl which adds all the child elements and sets the properties in code. Create an instance of this derived class instead of an instance of UserControl. Then the drop handler should work as shown.

For example, this works...

public class MyUserControl : UserControl
{
public MyUserControl()
{
this.Height = 125;
this.Width = 100;
Button b1 = new Button();
b1.Height = 25;
b1.Width = 75;
b1.Content = "Dynamic button";
Label lb1 = new Label();
lb1.Height = 25;
lb1.Width = 85;
lb1.Content = "Dynamic UserControl";
StackPanel sp = new StackPanel();
sp.Children.Add(b1); sp.Children.Add(lb1);
this.Content = sp;
this.MouseMove += new MouseEventHandler(MyUserControl_MouseMove);
}

void MyUserControl_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
DragDrop.DoDragDrop(this, new DropableCanvasDragDropData(this.Parent as Panel, this, e.GetPosition(this)), DragDropEffects.Copy);
}
}
}

...
MyUserControl uc = new MyUserControl();
uniformgrid1.Children.Add(uc);

KiranBabu M 14-Jul-11 9:30am

Yes working Perfectly...
This is good.In your example you are Dynamically creating usercontrol and adding content in to it when window is loaded. But i want to create dynamic usercontrol(eg with image content) when we click on button which is on the window.image source will be selecetd through openfile dialog box.
eg:
private void btnselect_Click(object sender,System.Windows.RoutedEventArgs e)
{
OpenFileDialog fd1=new OpenFileDialog ();
Nullable<bool> result = fd1.ShowDialog();
if (result == true)
{
UserControl uc=new UserControl();
uc.Height=125;uc.Width =100;
Label lb1 = new Label();
lb1.Height = 25; lb1.Width = 85;
lbl.Content=fd1.SafeFileName;
Image img=new Image();
img.Height =125;img.Width=100;
BitmapImage src=new BitmapImage();
src.BeginInit ();
src.UriSource =new Uri(fd1 .FileName);
src.EndInit();
img.Source =src;
StackPanel sp=new StackPanel();
sp.Children.Add(lb1);
sp.Children .Add (img);
uc.Content =sp;
uniformgrid1.Children.Add(uc);
I tried to do this by replicating your example.
In your example usercontrol is created when window is loaded(we cant change data at runtime).
here Usercontrol and its content should be Dynamically created when we click on a button(we should change the content i.e, images at runtime by selecting through openfiledialogbox.).
I tried the whole day but not successful.
i want to create the instance of the data which is in button click.

Note:like when the window is loaded if i click on the button dialogbox will appear to select image, if i select image usercontrol should dynamically created with that image and name as content which should be displayed on the uniformgrid. now it should be copied to canvas by dragging and dropping.

Thanks

Mark Salsbery 14-Jul-11 16:23pm

If you look at the sample code and understand it, then you should be able to modify it to your needs. It's fairly simple: When a drag/drop is initiated, an arbitrary data object is created and passed to the drop handler. On drop, the data object is extracted and used for whatever purpose needed.

Passing image information to the drop target is getting a little too specific for my taste - meaning I don't like that the drop element needs to know so much about the element classes being dropped. I think I'd modify it so the dragable element makes a clone of itself when a drag/drop is initiated, and passes that clone object to the drop handler. Then the drop target only needs to add that passed object to its visual tree.

For example, change the MyUserCOntrol drag handler to make a clone of itself and pass it to the drop target...

public class MyUserControl : UserControl
{
public MyUserControl()
{
this.Height = 125;
this.Width = 100;
Button b1 = new Button();
b1.Height = 25;
b1.Width = 75;
b1.Content = "Dynamic button";
Label lb1 = new Label();
lb1.Height = 25;
lb1.Width = 85;
lb1.Content = "Dynamic UserControl";
StackPanel sp = new StackPanel();
sp.Children.Add(b1); sp.Children.Add(lb1);
this.Content = sp;
this.MouseMove += new MouseEventHandler(MyUserControl_MouseMove);
}

void MyUserControl_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
// Make a clone of ourself - we'll pass it to the drop target
MyUserControl cloned_uc = new MyUserControl();

DragDrop.DoDragDrop(this, new DropableCanvasDragDropData(this.Parent as Panel, cloned_uc, e.GetPosition(this)), DragDropEffects.Copy);
}
}
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////

Then in the DropableCanvas drop handler, just use the passed uesercontrol...

void DropableCanvas_Drop(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent(typeof(DropableCanvasDragDropData)))
{
DropableCanvasDragDropData dragdropdata = e.Data.GetData(typeof(DropableCanvasDragDropData)) as DropableCanvasDragDropData;

if (dragdropdata.UserControl != null)
{
// Position the usercontrol on this canvas at the drop point
Point dropPoint = e.GetPosition(this);
Canvas.SetLeft(dragdropdata.UserControl, dropPoint.X - dragdropdata.OffsetPoint.X);
Canvas.SetTop(dragdropdata.UserControl, dropPoint.Y - dragdropdata.OffsetPoint.Y);

// Add the usercontrol to this canvas
this.Children.Add(dragdropdata.UserControl);
}
}
e.Handled = true;
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////

I'll let you figure out how you want to clone your usercontrol. I'm not sure if two image elements can share the same source, but if not, you'll need to load the image data again for the cloned object, which means the MyUserControl class would need to know the pathname of the file.

KiranBabu M 15-Jul-11 6:06am

iam not able to clone the usercontrol.
In the above example MyUserControl content is fixed. similarly if i give MyuserControl content as static image like
Image img=new Image();
img.Height =125;img.Width=100;
BitmapImage src=new BitmapImage();
src.BeginInit ();
src.UriSource =new Uri(@"C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg");
src.EndInit();
img.Source =src;
now if i do drag and drop it is working.
But if i want to give imag path at runtime like

private void btnselect_Click(object sender, System.Windows.RoutedEventArgs e)
{
OpenFileDialog fd1=new OpenFileDialog ();
Nullable result = fd1.ShowDialog();
if (result == true)
{
UserControl uc=new UserControl();
uc.Height=125;uc.Width =100;
Label lb1 = new Label(); lb1.Height = 25;
lb1.Width = 85;
lbl.Content=fd1.SafeFileName;
Image img=new Image();
img.Height =125;img.Width=100;
BitmapImage src=new BitmapImage();
src.BeginInit ();
src.UriSource =new Uri(fd1 .FileName); src.EndInit();
img.Source =src;
StackPanel sp=new StackPanel(); sp.Children.Add(lb1); sp.Children .Add (img); uc.Content =sp;
uniformgrid1.Children.Add(uc);

if i click on a selectbutton and select image then only usercontrol must create along with that image. now there is no content in MyUserControl because i created usercontrol(with image content) in button click event.
so if i clone MyUsercontrol iam not able to give the same image path. and hence MyUserControl does not have any content to display.

I tried like this if i write the above code in MyuserControl, and
under button click:
MyUserControl cloned_uc = new MyUserControl();
now if do drag and drop, while dropping again openfiledaialog box is coming and if i select any image again the selected image is dropping in the canvas(irrespective of the dragged image).
This is the problem iam facing.

Thanks

Mark Salsbery 15-Jul-11 11:50am

Nothing about MyUserControl is "fixed". It's my class, I wrote it. It can be changed any way necessary.

This is just a functioning example - you need to change the class(es) to your needs.

Again, wrap your user control in a class derived from UserControl like the MyUserControl class example. That class can store any information it needs to clone itself - the image pathname for example.

KiranBabu M 18-Jul-11 6:18am

Yes it is working..!
Your reply's really helped me a lot..
You are Super!!!

Thanks Again.

Dalek Dave 6-Jul-11 19:11pm

Hell of an answer!

VK k 7-Jul-11 4:39am

good one Mark,
it helped me too..!

ericngando 13-Jan-12 6:29am

Very good you need to provide a little article for it , with just 10 lines...
great

Hamit Reyhani 12-Jun-12 5:50am

Hi Mark Salsbery,
thanks a lot for sharing this code. it helped me a lot but i need to make that DropableCanvas circular. Is that possible? And if it's possible how? I am trying to make a circular window and add some DragableUserControls on it.

Mark Salsbery · Accepted Answer · 2011-07-04T10:25:00

Or start from the very very beginning....learning WPF fundamentals...

Windows Presentation Foundation[^]

Here's a simple example of a usercontrol that can be dragged on a canvas...

public partial class DragableUserControl : UserControl
{
    public DragableUserControl()
    {
        InitializeComponent();
    }

    bool inDrag = false;
    Point anchorPoint;

    private void UserControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if (!inDrag)
        {
            anchorPoint = e.GetPosition(null);
            CaptureMouse();
            inDrag = true;
            e.Handled = true;
        }
    }

    private void UserControl_MouseMove(object sender, MouseEventArgs e)
    {
        if (inDrag)
        {
            Point currentPoint = e.GetPosition(null);
            Canvas.SetLeft(this, Canvas.GetLeft(this) + (currentPoint.X - anchorPoint.X));
            Canvas.SetTop(this, Canvas.GetTop(this) + (currentPoint.Y - anchorPoint.Y));
            anchorPoint = currentPoint;
            e.Handled = true;
        }
    }

    private void UserControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        if (inDrag)
        {
            ReleaseMouseCapture();
            inDrag = false;
            e.Handled = true;
        }
    }
}

<UserControl x:Class="WPFTester.DragableUserControl"
             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" 
             MouseLeftButtonDown="UserControl_MouseLeftButtonDown"
             MouseMove="UserControl_MouseMove"
             MouseLeftButtonUp="UserControl_MouseLeftButtonUp"
             >
    <Grid Width="100" Height="100" >
        <Border Background="SteelBlue" />
    </Grid>
</UserControl>

*Edit* Here's an example to test the dragable usercontrol...

<UserControl x:Class="WPFTester.DragControlTestPage"
             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" 
             xmlns:local="clr-namespace:WPFTester"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             Height="300" Width="300" >
    <Grid >
        <Canvas Background="LightSteelBlue" >
            <local:DragableUserControl Canvas.Left="10" Canvas.Top="10" />
        </Canvas>
    </Grid>
</UserControl>