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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

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);
            }
        }

    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

B.K*_*.K. 7

注意: 这里有两个版本的示例程序,新旧版本.看看两者,了解你能做些什么.

这是一个示例应用程序,它修复了您不知道的问题,这就是您用一个笔划而不是一行绘制了大量的行.你应该使用折线.如果您使用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>

Run Code Online (Sandbox Code Playgroud)

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;
            }
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

你会注意到_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>

Run Code Online (Sandbox Code Playgroud)

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;
            }
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

其他想法:

如果你想要完整的XAML样式,你有几个选择.第一个选项是创建一个样式,突出显示IsMouseOver属性上的TargetType Polyline为true; 但是,你不会得到这个5像素的缓冲区.要完成这个5像素缓冲区,您需要创建一个自定义模板,这需要比我在此处演示的工作更多的工作.当然......如果您感觉非常冒险,总会选择从Shape派生并创建一个可突出/可选择的折线 - 与上面的代码相比,这只是很多工作.好的一面是它可以重复使用.这取决于您的情况,需求和需求.

归档时间：	10 年，2 月前
查看次数：	1342 次
最近记录：	7 年，6 月前