Draw line on run time WPF - wpf

Question

I want to draw line on run time using mouse.I have tried in below way
private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
FrameworkElement f = e.Source as FrameworkElement;
FrameworkElement pr = f.Parent as FrameworkElement;
Rect feRect = f.TransformToAncestor(pr).TransformBounds(
new Rect(0.0, 0.0, f.ActualWidth, f.ActualHeight));
Image image = sender as Image;
Point textLocation = e.GetPosition(image);
textLocation.Offset(-4, -4);
var Top = feRect.Height - textLocation.Y;
var Bottom = textLocation.Y - 1;
var Left = textLocation.X - 1;
var Right = feRect.Width-textLocation.X;
// Create an annotation where the mouse cursor is located.and add control using adorner layer
_currentAnnotations = ImageAnnotation.Create(
image,
textLocation,
feRect
);
}
private void Image_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
Image image = sender as Image;
EndPosition = e.MouseDevice.GetPosition(image);
// Draw next line and...
l.X1 = StartPosition.X;
l.X2 = EndPosition.X;
l.Y1 = StartPosition.Y;
l.Y2 = EndPosition.Y;
l.Stroke = Brushes.Red;
l.StrokeThickness = 5;
StartPosition = EndPosition;
}
if(_currentAnnotations!=null && l!=null)
_currentAnnotations.Lines = l;
}
But it doesn't give the result as expected. the line that am getting is different from the mouse location. my output should be like a pen tool. 1.what's wrong with my way?
2. Is inkCanvas the only way to draw line in wpf?if yes why so?
3.

Answer 1

1.what's wrong with my way?
You could try to set the StartPosition property in the Image_MouseLeftButtonDown event handler:
private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
FrameworkElement f = e.Source as FrameworkElement;
FrameworkElement pr = f.Parent as FrameworkElement;
Rect feRect = f.TransformToAncestor(pr).TransformBounds(
new Rect(0.0, 0.0, f.ActualWidth, f.ActualHeight));
Image image = sender as Image;
...
StartPosition = e.MouseDevice.GetPosition(image);
}
InkCanvas is the only built-in WPF control that receives and displays ink strokes. But you could for example add lines to a Canvas or perform any other kind of custom drawing action yourself.
Here is a basic sample that should give you the idea.
public partial class MainWindow : Window
{
public MainWindow ()
{
InitializeComponent();
}
Point EndPosition;
Point StartPosition;
private void canvas_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
FrameworkElement fe = sender as FrameworkElement;
EndPosition = e.MouseDevice.GetPosition(fe);
Line l = new Line();
l.X1 = StartPosition.X;
l.X2 = EndPosition.X;
l.Y1 = StartPosition.Y;
l.Y2 = EndPosition.Y;
l.Stroke = Brushes.Red;
l.StrokeThickness = 5;
StartPosition = EndPosition;
canvas.Children.Add(l);
}
}
private void canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
FrameworkElement fe = sender as FrameworkElement;
StartPosition = e.MouseDevice.GetPosition(fe);
}
}
<Canvas x:Name="canvas" Width="500" Height="500" Background="Yellow"
MouseLeftButtonDown="canvas_MouseLeftButtonDown" MouseMove="canvas_MouseMove" />