Question

I’m attempting to perform some simple panning on a WPF Canvas object with its RenderTransform. I expect to be able to hold a mouse button down and drag. Using the following code, there’s a strange hop right when you click. What causes that? Second, while dragging the object being dragged is “shaky” for lack of a better term. Why is that?

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace TestWpfZoom
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private Point _last;
        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
        {
            CaptureMouse();
            _last = e.GetPosition(canvas);
            base.OnMouseLeftButtonDown(e);
        }

        protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
        {
            ReleaseMouseCapture();
            base.OnMouseLeftButtonUp(e);
        }

        protected override void OnMouseMove(MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed && IsMouseCaptured)
            {
                var pos = e.GetPosition(canvas);
                var matrix = mt.Matrix; // it's a struct
                matrix.Translate(pos.X - _last.X, pos.Y - _last.Y);
                mt.Matrix = matrix;
                _last = pos;
            }
            base.OnMouseMove(e);
        }
    }
}

And the XAML:

<Window x:Class="TestWpfZoom.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">
    <Canvas Name="canvas">
        <Canvas.RenderTransform>
            <MatrixTransform x:Name="mt"/>
        </Canvas.RenderTransform>
        <Ellipse Canvas.Left="100" Canvas.Top="100" Fill="Red" Width="100" Height="100"/>
    </Canvas>
</Window>

Answer 1

This should work (with bool variable isDragged inserted) and replace

var pos = e.GetPosition(canvas);

with

var pos = e.GetPosition(this);

    protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
    {
        base.OnMouseLeftButtonDown(e);
        CaptureMouse();
        //_last = e.GetPosition(canvas);
        _last = e.GetPosition(this);

        isDragged = true;
    }

    protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
    {
        base.OnMouseLeftButtonUp(e);
        ReleaseMouseCapture();
        isDragged = false;
    }

and also

protected override void OnMouseMove(MouseEventArgs e)
    {
        if (isDragged == false)
            return;

        base.OnMouseMove(e);
        if (e.LeftButton == MouseButtonState.Pressed && IsMouseCaptured)
       {

            var pos = e.GetPosition(this);
            var matrix = mt.Matrix; // it's a struct
            matrix.Translate(pos.X - _last.X, pos.Y - _last.Y);
            mt.Matrix = matrix;
            _last = pos;

       }

    }