c# - 当用户在 wpf 中将鼠标悬停在它上面时，我如何突出显示它？

Question

目前用户可以通过点击并拖动鼠标在 Canvas 上绘图。如何更改线条的颜色以指示用户的光标悬停在线条上？当光标位于任何给定行的 5 个像素以内以指示它们接近时，使其突出显示是理想的。

初始绘图...

当用户的光标悬停在任何给定行的正上方或 5 像素以内时。

MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Canvas  Name="paintSurface" MouseDown="Canvas_MouseDown_1" MouseMove="Canvas_MouseMove_1" >
            <Canvas.Background>
                <SolidColorBrush Color="White" Opacity="0"/>
            </Canvas.Background>
        </Canvas>
    </Grid>
</Window>

MainWindow.cs

using System.Windows;
using System.Windows.Input;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        Point currentPoint = new Point();

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Canvas_MouseDown_1(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            if (e.ButtonState == MouseButtonState.Pressed)
                currentPoint = e.GetPosition(this);
        }

        private void Canvas_MouseMove_1(object sender, System.Windows.Input.MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                Line line = new Line();

                line.Stroke = SystemColors.WindowFrameBrush;
                line.X1 = currentPoint.X;
                line.Y1 = currentPoint.Y;
                line.X2 = e.GetPosition(this).X;
                line.Y2 = e.GetPosition(this).Y;

                currentPoint = e.GetPosition(this);

                paintSurface.Children.Add(line);
            }
        }

    }
}

Answer 1

Note: There are two versions of the sample program here, new and old. Take a look at both to get an idea of what you can do.

这是一个示例应用程序，它解决了您没有意识到的问题，即您用一笔画了很多条线，而不是一条线。您应该使用折线。如果您使用 Visual Studio 2015，那么会有一个 Live Visual Tree，它会准确地向您展示我的意思；否则，您可以使用诸如 Snoop 之类的工具来查看相同的内容。它还解决了您原来的问题，即突出显示。

新版本是此处显示的第一个代码部分。它使用字典来链接基线和高亮线，以便您可以在需要时(例如当您要删除它时)找到底层基线。它还突出显示了基础，而不是突出显示高亮线，这是旧版本所做的。高亮线仅用于选择区域缓冲区。增加或减少其笔触以获得所需的选择缓冲区(您在帖子中提到了 5 个像素)。

预览:

XAML:

<Window x:Class="WpfApplication.MainWindow"
        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:WpfApplication"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas Name="paintSurface" Background="White" MouseDown="Canvas_MouseDown" 
            MouseUp="Canvas_MouseUp" MouseMove="Canvas_MouseMove"/>
</Window>

C#:

using System.Collections.Generic;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WpfApplication
{
    public partial class MainWindow : Window
    {
        Polyline _baseLine;
        Polyline _highlightLine;
        Point _currentPoint;
        bool _newLine;

        Dictionary<Polyline, Polyline> _lines = new Dictionary<Polyline, Polyline>();

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
        {
            _newLine = true;
        }

        private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
        {
            if (_highlightLine != null  && !_newline)
            {
                _highlightLine.MouseEnter += ShowHighlight;
                _highlightLine.MouseLeave += HideHighlight;
            }
        }

        private void Canvas_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                if (_newLine)
                {
                    _baseLine = new Polyline
                    {
                        Stroke = SystemColors.WindowFrameBrush,
                        StrokeThickness = 1.0
                    };
                    _highlightLine = new Polyline
                    {
                        Opacity = 0.0,
                        Stroke = SystemColors.WindowFrameBrush,
                        StrokeThickness = 10.0
                    };

                    paintSurface.Children.Add(_baseLine);
                    paintSurface.Children.Add(_highlightLine);
                    _lines.Add(_highlightLine, _baseLine);
                    _newLine = false;
                }

                _currentPoint = e.GetPosition(this);
                _baseLine.Points.Add(_currentPoint);
                _highlightLine.Points.Add(_currentPoint);
            }
        }

        private void ShowHighlight(object sender, MouseEventArgs e)
        {
            var line = sender as Polyline;
            if (line != null)
            {
                _lines[line].Stroke = new SolidColorBrush(Colors.LimeGreen);
            }
        }

        private void HideHighlight(object sender, MouseEventArgs e)
        {
            var line = sender as Polyline;
            if (line != null)
            {
                _lines[line].Stroke = SystemColors.WindowFrameBrush;
            }
        }
    }
}

您会注意到 _newLine 标志 bool 值。我用它来指示是否应该绘制一条新的多段线。当鼠标按下时，这表明需要创建新行。在鼠标抬起之前，我不会为线条连接 MouseEnter 和 MouseLeave 句柄，因为我不希望突出显示在线条的绘制过程中分散注意力。您必须对 _highlightLine 进行某种描边，然后将其不透明度设置为 0 以使其不可见，但仍然响应 HitTest ；否则，永远不会调用 MouseEnter 和 MouseLeave 处理程序。

OLD(程序的旧版本。仍然是值得检查的好版本。):

我在这里所做的是在基础线的顶部添加一条突出显示的多段线，并将其笔划设置为 10 而不是基础线的 1。您可以调整笔划粗细以获得所需的选择“缓冲区”区域。我真的花了大约 10-15 分钟在这上面，所以可能有改进它的方法，但这应该给你一个坚实的基础。如果您希望在突出显示的这些行上执行一些操作，例如能够删除它们，那么我建议将 _baseLine 和 _highlightLine 添加到字典中，其中 _highlightLine 是键，_baseLine 是值。这样，当您选择 _highlightLine 时，您可以访问底层的 _baseLine。

预览:

XAML:

<Window x:Class="WpfApplication.MainWindow"
        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:WpfApplication"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas Name="paintSurface" Background="White" MouseDown="Canvas_MouseDown" 
            MouseUp="Canvas_MouseUp" MouseMove="Canvas_MouseMove"/>
</Window>

C#:

using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WpfApplication
{
    public partial class MainWindow : Window
    {
        Polyline _baseLine;
        Polyline _highlightLine;
        Point _currentPoint;
        bool _newLine;

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
        {
            _newLine = true;
        }

        private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
        {
            if (_highlightLine != null && !_newline)
            {
                _highlightLine.MouseEnter += ShowHighlight;
                _highlightLine.MouseLeave += HideHighlight;
            }
        }

        private void Canvas_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                if (_newLine)
                {
                    _baseLine = new Polyline
                    {
                        Stroke = SystemColors.WindowFrameBrush,
                        StrokeThickness = 1.0
                    };
                    _highlightLine = new Polyline
                    {
                        Stroke = new SolidColorBrush(Colors.Green),
                        Opacity = 0.0,
                        StrokeThickness = 10.0
                    };

                    paintSurface.Children.Add(_baseLine);
                    paintSurface.Children.Add(_highlightLine);
                    _newLine = false;
                }

                _currentPoint = e.GetPosition(this);
                _baseLine.Points.Add(_currentPoint);
                _highlightLine.Points.Add(_currentPoint);
            }
        }

        private void ShowHighlight(object sender, MouseEventArgs e)
        {
            var line = sender as Polyline;
            if (line != null)
            {
                line.Opacity = 1.0;
            }
        }

        private void HideHighlight(object sender, MouseEventArgs e)
        {
            var line = sender as Polyline;
            if (line != null)
            {
                line.Opacity = 0.0;
            }
        }
    }
}

其他想法:

如果您想在样式方面使用完整的 XAML，您有几个选择。第一个选项是创建一个样式，突出显示 IsMouseOver 属性上的 TargetType Polyline 为真；但是，您不会用这个获得 5 像素缓冲区。要完成 5 像素缓冲区，您需要创建一个自定义模板，这需要比我在这里演示的更多的工作。当然...如果您喜欢冒险，总是可以选择从 Shape 派生并为自己创建一条可突出显示/可选择的多段线——与上述代码相比，这只是很多工作。好的一面是它可以重复使用。这仅取决于您的情况、需求和愿望。