Applying TranslateTranform to my canvas is very jumpy WPF - wpf

Question

I'm trying to apply a Translate transform to my Canvas using attached properties - the canvas moves as I drag it but is very jumpy and tries to jump back to the original position constantly. When I scroll out of my canvas it also completely messes up and drags the canvas off screen.
My attached property class methods:
private Point _originalMouseDownPoint;
private void AssociatedObjectOnMouseMove(object sender, MouseEventArgs mouseEventArgs) {
var pos = mouseEventArgs.GetPosition(AssociatedObject);
MouseX = pos.X;
MouseY = pos.Y;
var canvas = sender as Canvas;
if (BaseViewModel.Mode != MouseHandlingModeEnum.Panning) return;
var translateTransform = new
TranslateTransform(pos.X - _originalMouseDownPoint.X, pos.Y - _originalMouseDownPoint.Y);
canvas.RenderTransform = translateTransform;
}
private void AssociatedObjectOnMouseDown(object sender, MouseButtonEventArgs e) {
var canvas = sender as Canvas;
canvas.CaptureMouse();
canvas.Focus();
_originalMouseDownPoint = e.GetPosition(canvas);
BaseViewModel.Mode = MouseHandlingModeEnum.Panning;
}
private void AssociatedObjectOnMouseUp(object sender, MouseButtonEventArgs e) {
var canvas = sender as Canvas;
canvas.ReleaseMouseCapture();
BaseViewModel.Mode = MouseHandlingModeEnum.None;
}
And then my XAML simply sets this up through the canvas behaviours.
<i:Interaction.Behaviors>
<attachedProperties:MouseBehaviour MouseX="{Binding PanelX , Mode=OneWayToSource}"
MouseY="{Binding PanelY, Mode=OneWayToSource}" />
</i:Interaction.Behaviors>
(Ignore the Bindings, they are for a seperate functionality.
The program should smoothly pan across the canvas. I've seen some people use a matrix transform, should I try and implement that in some way?

Answer 1

I found in my experience that i like working with the Canvas.Left/Top when i only need to drag or move objects in a simple way. I use the transforms when i am doing something more complex (which is rare). It is usually easier to debug and more streamlined.
You can do something like this:
private void AssociatedObjectOnMouseMove(object sender, MouseEventArgs mouseEventArgs) {
var pos = mouseEventArgs.GetPosition(AssociatedObject);
MouseX = pos.X;
MouseY = pos.Y;
var canvas = sender as Canvas;
if (BaseViewModel.Mode != MouseHandlingModeEnum.Panning) return;
Canvas.SetLeft(AssociatedObject, MouseX - _originalMouseDownPoint.X);
Canvas.SetTop(AssociatedObject, MouseY - _originalMouseDownPoint.Y);
}
private void AssociatedObjectOnMouseDown(object sender, MouseButtonEventArgs e) {
var canvas = sender as Canvas;
canvas.CaptureMouse();
canvas.Focus();
_originalMouseDownPoint = e.GetPosition((UIElement)sender);
BaseViewModel.Mode = MouseHandlingModeEnum.Panning;
}
private void AssociatedObjectOnMouseUp(object sender, MouseButtonEventArgs e) {
var canvas = sender as Canvas;
canvas.ReleaseMouseCapture();
_originalMouseDownPoint = null;
BaseViewModel.Mode = MouseHandlingModeEnum.None;
}
I am assuming your BaseViewModel.Mode is a flag for indicating a dragging condition.
If you want to bind your VM to the dragging you could add Properties for the Position and access the DataContext directly (var vm = DataContext as AssociatedObjectViewModel) and set the new positions. Then in the XAML you can bind the Canvas.Left and Canvas.Top to these properties. However, this isnt always possible depending on how you set everything up, and sometimes it is just easier/cleaner to take care of this in Code Behind.

Answer 2

public class MouseBehaviour : Behavior<Panel> {
public static readonly DependencyProperty MouseYProperty = DependencyProperty.Register(
"MouseY", typeof(double), typeof(MouseBehaviour), new PropertyMetadata(default(double)));
public static readonly DependencyProperty MouseXProperty = DependencyProperty.Register(
"MouseX", typeof(double), typeof(MouseBehaviour), new PropertyMetadata(default(double)));
private Point _originalMouseDownPoint;
private double _hOff = 1;
private double _vOff = 1;
public double MouseY {
get => (double)GetValue(MouseYProperty);
set => SetValue(MouseYProperty, value);
}
public double MouseX {
get => (double)GetValue(MouseXProperty);
set => SetValue(MouseXProperty, value);
}
protected override void OnAttached() {
AssociatedObject.MouseUp += AssociatedObjectOnMouseUp;
AssociatedObject.MouseMove += AssociatedObjectOnMouseMove;
AssociatedObject.MouseDown += AssociatedObjectOnMouseDown;
}
protected override void OnDetaching()
{
AssociatedObject.MouseUp -= AssociatedObjectOnMouseUp;
AssociatedObject.MouseMove -= AssociatedObjectOnMouseMove;
AssociatedObject.MouseDown -= AssociatedObjectOnMouseDown;
}
/// <summary>
/// Deals with mouse movement event
/// </summary>
/// <param name="sender"></param>
/// <param name="mouseEventArgs"></param>oop
private void AssociatedObjectOnMouseMove(object sender, MouseEventArgs mouseEventArgs) {
//Keep track of position of mouse on the canvas
var canvasPosition = mouseEventArgs.GetPosition(AssociatedObject);
MouseX = canvasPosition.X;
MouseY = canvasPosition.Y;
//If we're currently panning
var canvas = sender as Canvas;
var scrollViewer = canvas.Parent as ScrollViewer;
//Position of the scroll viewer
var scrollPosition = mouseEventArgs.GetPosition(scrollViewer);
if (BaseViewModel.Mode != MouseHandlingModeEnum.Panning) return;
//Then update the scroll viewer based on our mouse movement
scrollViewer.ScrollToHorizontalOffset(
_hOff + (_originalMouseDownPoint.X - scrollPosition.X));
scrollViewer.ScrollToVerticalOffset(_vOff + (_originalMouseDownPoint.Y - scrollPosition.Y));
}
/// <summary>
/// Deals with the mouse down event on the canvas
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void AssociatedObjectOnMouseDown(object sender, MouseButtonEventArgs e)
{
var canvas = sender as Canvas;
var scrollViewer = canvas.Parent as ScrollViewer;
//Gives the current offset of the scroll viewer
_hOff = scrollViewer.HorizontalOffset;
_vOff = scrollViewer.VerticalOffset;
_originalMouseDownPoint = e.GetPosition(scrollViewer);
BaseViewModel.Mode = MouseHandlingModeEnum.Panning;
canvas.CaptureMouse();
canvas.Focus();
}
/// <summary>
/// Deals with mouse up event
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private static void AssociatedObjectOnMouseUp(object sender, MouseButtonEventArgs e)
{
var canvas = sender as Canvas;
canvas.ReleaseMouseCapture();
BaseViewModel.Mode = MouseHandlingModeEnum.None;
}
}
For future readers, I ended up using my ScrollViewer that my Canvas is wrapped in to Pan across the canvas instead, and it seems to be working quite nicely now.