canvas draw shape on MouseMove lag - wpf

Question

I have very simple scenario: there is a canvas and I need to draw a line on canvas using MouseMove. But when I move the mouse pointer, second line's point (which is set in mouse move) doesn't match current mouse position.
UPD 2:
Delta depends on speed of mouse, if speed is large - delta is large and noticeable(lag). I've noticed that this bug is more visible if you move your mouse not very fast and not very slow.
You can download sample project here.
Something like on the picture when mouse moves fast:
Some source code:
<Window x:Class="WpfApplication32.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Width="525"
Height="350">
<Canvas x:Name="MainCanvas"
MouseLeftButtonDown="MainCanvas_OnMouseLeftButtonDown"
MouseMove="MainCanvas_OnMouseMove"
Background="White"
/>
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;
namespace WpfApplication32
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
private Line _currentLine;
private bool _isDrawing;
public MainWindow()
{
InitializeComponent();
this.Loaded += OnLoaded;
}
private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
MainCanvas.Focus();
}
private void MainCanvas_OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (_isDrawing)
{
_currentLine = null;
_isDrawing = false;
return;
}
_isDrawing = true;
_currentLine = new Line(){Stroke = Brushes.Green};
var p = e.GetPosition(MainCanvas);
_currentLine.X1 = p.X;
_currentLine.Y1 = p.Y;
_currentLine.X2 = p.X;
_currentLine.Y2 = p.Y;
MainCanvas.Children.Add(_currentLine);
}
private void MainCanvas_OnMouseMove(object sender, MouseEventArgs e)
{
if (_currentLine == null)
return;
var p = e.GetPosition(MainCanvas);
_currentLine.X2 = p.X;
_currentLine.Y2 = p.Y;
}
}
}
I've tried to use CompositeTarget.Render, also timer to change second point every 20ms but it didn't help.
I have legacy project in which code depends a lot on this approach(canvas mouseMove and shapes). So I need easiest way to eliminate this lag or some ideas about a reason of this bug) Thanks.
UPD:
I've tried to record video with this problem but I'm not good at it. Here is some screen from my recorded to show the problem:
http://prntscr.com/64hueg
UPD 2:
I've tried to use OnRender of Window object to do the same without canvas. I've used DataContext to draw the line - same issue here. DataContext is considered faster than Canvas and Line (Shape). So this is not Canvas issue.
I've also tried to use WritableBitmap to draw the line - no difference.
I thought that there might be a problem with MouseMove event - I read if there is a lot of objects(not my case but still) MouseMove might fire with delays so I used Win32 WM_MOUSEMOVE but it didn't helped as well. In my case delay between MW_MOUSEMOVE and wpf MouseMove event was <1000 ticks.
The only answer I see so far is render delay. I don't know how to improve it because it is wpf internals =(.
By the way Paint.net seems to use wpf and this problem occurs there as well.

Answer 1

This cannot be fixed because this is due to WPF's internal render system. There will always be a lag even if visual tree is simple. Complex visual tree results to more delay. I've spend a lot of time trying solving this.

Answer 2

Try using MouseMove event not on main canvas but on Window itself.
I recently got same problem using MouseMove on Image and it was laggy as hell
Switching to window's event helped me a lot.
<Window x:Name="Window1" x:Class="WpfApp2.MViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp2"
mc:Ignorable="d"
Title="MViewer" Height="454.411" Width="730.515" Loaded="Window_Loaded" Closing="Window1_Closing" ContentRendered="Window1_ContentRendered" MouseMove="Window1_MouseMove">
<Grid>
<Image x:Name="Image1" MouseMove="Image1_MouseMove"/>
<Line Name="Line1" Visibility="Visible" Stroke="Red" StrokeThickness="0.75" />
<Line Name="Line2" Visibility="Visible" Stroke="Red" StrokeThickness="0.75" />
</Grid>
</Window>
and
private void Window1_MouseMove(object sender, MouseEventArgs e)
{
Line1.Visibility = Visibility.Visible;
Line1.X1 = Mouse.GetPosition(this).X;
Line1.X2 = Mouse.GetPosition(this).X;
Line1.Y1 = 0;
Line1.Y2 = Window1.Height;
Line2.Visibility = Visibility.Visible;
Line2.X1 = 0;
Line2.X2 = Window1.Width;
Line2.Y1 = Mouse.GetPosition(this).Y;
Line2.Y2 = Mouse.GetPosition(this).Y;
}