当用户在wpf中悬停时，如何突出显示行？

Question

目前，用户可以通过单击并拖动鼠标在画布上绘图。如何更改线条的颜色以指示用户的光标悬停在线上？当光标位于任何给定行的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

  

注意：此处有两个版本的示例程序，新旧版本。看看两者，了解你可以做些什么。

这是一个示例应用程序，它修复了您不知道的问题，这是您用一个笔划而不是一行绘制了多个行的事实。你应该使用折线。如果您使用Visual Studio 2015，那么就会有一个实时视觉树，它将向您显示我的意思;否则，您可以使用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标志布尔值。我用它来表明是否应绘制新的折线。当鼠标停止时，这表明需要创建新行。我没有连接线的MouseEnter和MouseLeave手柄，直到鼠标向上，因为我不希望突出显示在线的绘制过程中分散注意力。你必须给_highlightLine提供一些笔画，然后将它的不透明度设置为0以使其不可见，但仍然响应命中测试;否则，将永远不会调用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为true;但是，你不会得到这个5像素的缓冲区。要完成这个5像素缓冲区，您需要创建一个自定义模板，这需要比我在此处演示的工作更多的工作。当然......如果您感觉非常冒险，总会选择从Shape派生并创建一个可突出/可选择的折线 - 与上面的代码相比，这只是很多工作。好的一面是它可以重复使用。这取决于你的情况，需求和需求。