centering cursor and object

sadas232341s

I' m building a sample in which I want to move an object. I'm not fully familiar with Blend and Xaml and the C# code behind, but I really don't understand why my cursor is far away from the object (is it canvas?... I don't know, in fact I'm shooting in the dark). Here' s my xaml:

<Grid x:Name="LayoutRoot" Background="White">
	<Canvas Height="80" HorizontalAlignment="Left" Margin="100,100,0,0" VerticalAlignment="Top" Width="80">
		<Rectangle Fill="#FF80C1E4" Height="80" Width="80" RenderTransformOrigin="0.5,0.5" MouseLeftButtonUp="CanvasUp" MouseLeftButtonDown="CanvasDown"/>
		<Rectangle Fill="#FF7AB7D8" Height="32" Width="32" Canvas.Left="24" Canvas.Top="24"/>
			<Canvas.RenderTransform>
				<TranslateTransform X="0" Y="0" x:Name="CanvasTransform"/>
			</Canvas.RenderTransform>
	</Canvas>
</Grid>

</UserControl>

Here's my C#:

protected override void OnMouseMove(MouseEventArgs e)
{
base.OnMouseMove(e);

    CanvasTransform.X = e.GetPosition(null).X;
    CanvasTransform.Y = e.GetPosition(null).Y;

}

Mark Salsbery

TCPMem wrote:

I really don't understand why my cursor is far away from the object

You are responding to all the MouseMove events for the UserControl. When you call e.GetPosition(null) you are getting the cursor position relative to the entire Silverlight plugin. Your Canvas is 100 pixels down and to the right of the plugin. The Rectangle you are moving is another 24 pixels down and to the right of the Canvas. So the cursor is always 124x124 away from the object. What are you trying to do? Do you want to be able to drag the rectangle with the mouse by clicking on it?

Mark Salsbery Microsoft MVP - Visual C++ :java:

sadas232341s

"What are you trying to do? Do you want to be able to drag the rectangle with the mouse by clicking on it?" Yes. That's exactly what I want. How can I make it?

Mark Salsbery

TCPMem wrote:

That's exactly what I want. How can I make it?

First, I misread your code so I was wrong about how far off the cursor was from the Canvas. I now see you're moving the entire canvas, not just the rectangle, which is the way I read it :) Anyway, here's a simple example that will hopefully get you going:

<Grid x:Name="LayoutRoot" Background="White">
    <Canvas Height="80" HorizontalAlignment="Left" Margin="100,100,0,0" VerticalAlignment="Top" Width="80" 
            MouseLeftButtonUp="Canvas\_MouseLeftButtonUp" 
            MouseMove="Canvas\_MouseMove" 
            MouseLeftButtonDown="Canvas\_MouseLeftButtonDown" >
        <Rectangle Fill="#FF80C1E4" Height="80" Width="80" RenderTransformOrigin="0.5,0.5" />
        <Rectangle Fill="#FF7AB7D8" Height="32" Width="32" Canvas.Left="24" Canvas.Top="24"/>
        <Canvas.RenderTransform>
            <TranslateTransform X="0" Y="0" x:Name="CanvasTransform"/>
        </Canvas.RenderTransform>
    </Canvas>
</Grid>

//protected override void OnMouseMove(MouseEventArgs e)
//{
//    base.OnMouseMove(e);

//    CanvasTransform.X = e.GetPosition(null).X;
//    CanvasTransform.Y = e.GetPosition(null).Y;
//}

Point anchorPoint;
bool isInDrag = false;

private void Canvas\_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    anchorPoint = e.GetPosition(null);
    element.CaptureMouse();
    isInDrag = true;
}

private void Canvas\_MouseMove(object sender, MouseEventArgs e)
{
    if (isInDrag)
    {
        Point currentPoint = e.GetPosition(null);
        CanvasTransform.X = CanvasTransform.X + currentPoint.X - anchorPoint.X;
        CanvasTransform.Y = CanvasTransform.Y + currentPoint.Y - anchorPoint.Y;
        anchorPoint = currentPoint;
    }
}

private void Canvas\_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    if (isInDrag)
    {
        FrameworkElement element = sender as FrameworkElement;
        element.ReleaseMouseCapture();
        isInDrag = false;
    }
}

Mark Salsbery Microsoft MVP - Visual C++ :java:

sadas232341s

I used http://msdn.microsoft.com/en-us/library/cc189066(VS.95).aspx this code to move an object only and wondered how can I do this with the entire canvas. I took a look at your code and replaced

Rectangle item = sender as Rectangle;

with yours:

FrameworkElement element = sender as FrameworkElement;

and it happened. Thanks!