How to smoothly drag an image box in WPF?

Question

I'm working with WPF 4 and VB.net 2010. My project consists of full-screen windows with a 640x480 grid in the center.

In this project, I want to have various image boxes (which will have the item .png images in them), that the user can drag around and drop in various places on the grid.

In essence, I need to be able to make it possible for the item to be clicked and dragged around the grid, with the image box still visible and the same size as the user moves it around. It should never be able to leave the grid. I also need to be able to determine if the object is over another object, so when the mouse button is released, the dragged object is "dropped", and it triggers a particular block of code.

How do I do this?

abramlimpin abramlimpin · Accepted Answer · 2011-01-26T04:46:01

Something similar to your 'project', but using C#

From http://pastie.org/1498237

// XAML

<Window x:Class="MyProject.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="500" Width="500">
    <Grid>
        <Canvas x:Name="mycanv">
            <Image Width="150" x:Name="myimg" Source="some_source.png"/>
        </Canvas>
    </Grid>
</Window>

//C#

private Point mouseClick;
private double canvasLeft;
private double canvasTop;
public Window1()
{
    InitializeComponent();
    foreach (object obj in mycanv.Children)
    {
        try
        {
            Image img = (Image)obj;
            img.PreviewMouseDown += new MouseButtonEventHandler(myimg_MouseDown);
            img.PreviewMouseMove += new MouseEventHandler(myimg_MouseMove);
            img.PreviewMouseUp += new MouseButtonEventHandler(myimg_MouseUp);
            img.TextInput += new TextCompositionEventHandler(myimg_TextInput);
            img.LostMouseCapture += new MouseEventHandler(myimg_LostMouseCapture);
            img.SetValue(Canvas.LeftProperty, 0.0);
            img.SetValue(Canvas.TopProperty, 0.0);
        }
        catch
        {
            //do something
        }
    }
}

void myimg_LostMouseCapture(object sender, MouseEventArgs e)
{
    ((Image)sender).ReleaseMouseCapture();
}

void myimg_TextInput(object sender, TextCompositionEventArgs e)
{
    ((Image)sender).ReleaseMouseCapture();
}

void myimg_MouseUp(object sender, MouseButtonEventArgs e)
{
    ((Image)sender).ReleaseMouseCapture();
}

void myimg_MouseMove(object sender, MouseEventArgs e)
{
    if (((Image)sender).IsMouseCaptured)
    {
        Point mouseCurrent = e.GetPosition(null);
        double Left = mouseCurrent.X - canvasLeft;
        double Top = mouseCurrent.Y - canvasTop;
        ((Image)sender).SetValue(Canvas.LeftProperty, canvasLeft + Left);
        ((Image)sender).SetValue(Canvas.TopProperty, canvasTop + Top);
        canvasLeft = Canvas.GetLeft(((Image)sender));
        canvasTop = Canvas.GetTop(((Image)sender));
    }
}

void myimg_MouseDown(object sender, MouseButtonEventArgs e)
{
    mouseClick = e.GetPosition(null);
    canvasLeft = Canvas.GetLeft(((Image)sender));
    canvasTop = Canvas.GetTop(((Image)sender));
    ((Image)sender).CaptureMouse();
}

How to smoothly drag an image box in WPF?

1 Answers