How to draw lines with mouse in C#

Question

Im currently trying to make a pragram in visual studio WPF form, that draws lines using mouse like in paint. Currently it is drawing the same old line and continues drawing it but i want to draw a new line each time i press the left mouse button . Here's the MainWindows.xaml.cs code and what it looks like:

namespace DrawingLines
{

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private PathFigure _pathFigure = new PathFigure();
    PathFigureCollection _pathCollection = new PathFigureCollection();
    PathSegmentCollection _segments = new PathSegmentCollection();
    private PathGeometry _pathGeometry = new PathGeometry();

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        _pathFigure.Segments = _segments;
        _pathCollection.Add(_pathFigure);
        _pathGeometry.Figures = _pathCollection;
        myPath.Data = _pathGeometry;
    }

    private void Window_MouseMove(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            LineSegment segment = new LineSegment();
            segment.Point = e.GetPosition(this);
            _pathFigure.Segments.Add(segment);
        }

    }

    private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        _pathFigure.StartPoint = e.GetPosition(this);
    }

    //private void Window_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
    //{

    //}

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        this.Close();

    }
}

}

And here's the MainWindow.xmal code:

<Window x:Class="DrawingLines.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Joonistamine" Height="350" Width="525" Loaded="Window_Loaded" MouseMove="Window_MouseMove" MouseLeftButtonDown="Window_MouseLeftButtonDown" MouseRightButtonDown="Window_MouseRightButtonDown">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="53*" />
        <RowDefinition Height="258*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="124*" />
        <ColumnDefinition Width="379*" />
    </Grid.ColumnDefinitions>
    <Path Stroke="Black" StrokeThickness="1" Name="myPath" Grid.ColumnSpan="2" Grid.RowSpan="2" />
    <Button Content="Exit" Height="25" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="46" Click="button1_Click" BorderBrush="Red" Foreground="#FFFF1A1A" />
</Grid>

What am i doing wrong?

Answer 1

It seems to me that you are continually adding to the PathSegment, without clearing it when you start a new line (by clicking the left mouse button). Therefore, I would try this:

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    _pathFigure.Segments.Clear();
    _pathFigure.StartPoint = e.GetPosition(this);
}

EDIT: ... and if you want it to retain the lines and they are not necessarily connected, you need a separate Path for each line, since each Path represents a single, connected shape.

To do this, you would need to modify your code in this way:

• Remove the path from your XAML
• For every left mouse click, create a new Path and add it to the grid (myGrid.Children.Add(myPath)
• Add new points from mouse moves to the currently active path