Question

I have a canvas in which I have an image. I can move that image using the mouse (drag-n-drop). I want to prevent the user to move the image outside of the canvas.

Is there any way I can trap the mouse pointer so it can only move inside the canvas? So when the user tries to move the mouse outside the canvas, the cursor would remain at the edge of the canvas.

One example of this behavior would be when moving a window, you can’t move it on the taskbar. When you try to move it on the taskbar, the mouse cursor stays on the edge of the taskbar, refusing to move on top of the taskbar.

Answer 1

After more searching, I found there is a function in user32.dll called ClipCursor that does exactly what I want.

Here is an example of a sample app that traps the mouse cursor. When clicking Button1, the cursor will be constrained in a rectangle at (10,10,500,500). When pressing Button2 (or closing the app), the cursor will be free again.

XAML:

<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">
    <Grid>
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,41,0,0" Name="button2" VerticalAlignment="Top" Width="75" Click="button2_Click" />
    </Grid>
</Window>

CS:

[DllImport("user32.dll")]
static extern void ClipCursor(ref System.Drawing.Rectangle rect);

[DllImport("user32.dll")]
static extern void ClipCursor(IntPtr rect);

public MainWindow()
{
    InitializeComponent();
}

private void button1_Click(object sender, RoutedEventArgs e)
{
    System.Drawing.Rectangle r = new System.Drawing.Rectangle(10, 10, 500, 500);
    ClipCursor(ref r);
}

private void button2_Click(object sender, RoutedEventArgs e)
{
    ClipCursor(IntPtr.Zero);
}