[C#]線を描画した後、クリックして何かする(WPFで)

目的

線を描画した後、マウスオーバーで太くしたり、クリックで太くしたままにしといたり色々したいとき。WPFで。

環境

• Microsoft Visual Studio Community 2022
• Version 17.8.3
• VisualStudio.17.Release/17.8.3+34330.188
• Windows11 Pro

コード

Grid上にCanvasを配置した上で・・・

private Line selectedLine; // 選択された線を保持する変数
bool mouseOver = false;

private void DrawLine(Point startPoint, Point endPoint, Brush brush, double thickness)
{

    Line line = new Line
    {
        X1 = startPoint.X,
        Y1 = startPoint.Y,
        X2 = endPoint.X,
        Y2 = endPoint.Y,
        Stroke = brush,
        StrokeThickness = thickness
    };

    line.MouseLeftButtonDown += Line_MouseLeftButtonDown;
    line.MouseEnter += Line_MouseEnter; // マウスオーバー時のイベントハンドラを追加
    line.MouseLeave += Line_MouseLeave; // マウスアウト時のイベントハンドラを追加

    myCanvas.Children.Add(line);
}


private void Line_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (sender is Line line)
    {
        if (selectedLine == line)
        {
            // 同じ線がクリックされた場合、元に戻す
            line.StrokeThickness = 3.0; // 元の太さに戻す例
            //line.Stroke = Brushes.Black; // 元の色に戻す例
            selectedLine = null;
        }
        else
        {
            // 選択された線以外を元に戻す
            if (selectedLine != null)
            {
                selectedLine.StrokeThickness = selectedLine.StrokeThickness - 3.0; // 元の太さに戻す例
                //selectedLine.Stroke = Brushes.Black; // 元の色に戻す例
            }
            // クリックされた線を選択状態にする
            line.StrokeThickness = 6; // 太さを増やす例
                                      //line.Stroke = Brushes.Red; // 色を変更する例
            selectedLine = line;
            mouseOver = true;
        }
    }
}

private void Line_MouseEnter(object sender, MouseEventArgs e)
{
    if (sender is Line line)
    {
        mouseOver = true;
        if (line != selectedLine)
        {
            line.StrokeThickness = 6; // 太さを増やす例
        }
    }
}

private void Line_MouseLeave(object sender, MouseEventArgs e)
{
    if (sender is Line line)
    {
        mouseOver = false;
        if (line != selectedLine)
        {
            line.StrokeThickness = 3; // 太さを元に戻す例
        }
    }
}

private void myCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Debug.WriteLine("myCanvas_MouseLeftButtonDown");
    if (mouseOver == false)
    {
        //// 他の場所をクリックした場合、選択された線を元に戻す
        if (selectedLine != null)
        {

            Debug.WriteLine(mouseOver);
            selectedLine.StrokeThickness = 3.0; // 元の太さに戻す例
            //selectedLine.Stroke = Brushes.Black; // 元の色に戻す例
            selectedLine = null;
        }

    }
}

使い方

描画したいところで

DrawLine(new Point(100, 150), new Point(30, 30), new SolidColorBrush(Colors.Red), 3);

REFERENCEs

さいごに

お疲れ様でした！