Move rectangle with mouse without clicking any button

Question

I am writing a silverlight application, where there is a requirement, that I need to draw rectangle over image and move it along with the mouse move. I can move the rectangle by holding left mouse click, but now I need to move without clicking or holding the mouse left click.

I have seen many examples but they all implements the moving shapes and rectangle on left mouse click, which definitely is not my requirement.

I tried many ways but couldn't get it right. Below is the code what I do currently. Any suggestions would be welcomed.

XAML

    <Canvas x:Name="draw"  Grid.Column="0" Background="Transparent" 
            Margin="0,0,0,150" Grid.RowSpan="2">

        <Rectangle x:Name="SquareBlue" Width="100" Height="100" Canvas.Top="155" Canvas.Left="268" Fill="Transparent" Stroke="Black" StrokeThickness="2" />
    </Canvas>

        <Image x:Name="myImage" Height="100"/>
        <TextBox x:Name="X" Margin="0,0,110,0"></TextBox>
        <TextBox x:Name="Y" Margin="0,0,110,0"/>
        <Image x:Name="pictureBox1" Height="100"/>

Code Behind

    Boolean isMouseCaptured;
    Double mouseX;
    Double mouseY;
    Int32 zIndex = 0;

    private void Shape_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        Shape s = sender as Shape;            
        isMouseCaptured = false;            
        s.ReleaseMouseCapture();            
        mouseY = -1;            
        mouseX = -1;  
    }

    private void Shape_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        Shape s = sender as Shape;
        mouseY = e.GetPosition(null).Y;
        mouseX = e.GetPosition(null).X;
        isMouseCaptured = true;
        s.CaptureMouse();

        s.SetValue(Canvas.ZIndexProperty, zIndex);
        zIndex++;
    }

    private void Shape_MouseMove(object sender, MouseEventArgs e)
    {
        if (isMouseCaptured)
        {
            Shape s = sender as Shape; 
            double deltaY = e.GetPosition(null).Y - mouseY; 
            double deltaX = e.GetPosition(null).X - mouseX; 
            double newTop = deltaY + (double)s.GetValue(Canvas.TopProperty); 
            double newLeft = deltaX + (double)s.GetValue(Canvas.LeftProperty);

            s.SetValue(Canvas.TopProperty, newTop); 
            s.SetValue(Canvas.LeftProperty, newLeft);

            mouseY = e.GetPosition(null).Y; 
            mouseX = e.GetPosition(null).X;

            X.Text = mouseX.ToString();
            Y.Text = mouseY.ToString();
    }

Answer 1

You probably want to consider the shape captured whenever the Shape_MouseMove is fired. And then, every mouse move on the canvas/window moves the shape to be centerd around the mouse cursor. You then have to decide when to release it maybe:

1. by detecting when the mouse leaves the canvas/window.
2. using the buttons for releasing explicitly.
3. checking the time between mouseMove events. if 1 second passed, then be in a logical state where the shape is not and cannot be captured in mouseMove. only when mouse is out of the shape, return to normal state. so user will lose the move and has to cursor out and in again to capture again.
4. additionaly, when entering the state described in 3, launch a timer and then if after a second the cursor is on the shape, re-capture.