如何处理形状上的鼠标？

Question

我有一个图形平台，我有兴趣在鼠标移到节点上时更改节点的颜色（或更改不透明度以关注节点）。

我该怎么做？

谁能帮忙？

这将是 .xaml.cs 中的示例节点表示：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WpfApp12
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Ellipse myEllipse = new Ellipse();
            //myEllipse.Fill = nodeColour;
            myEllipse.StrokeThickness = 1;
            myEllipse.Stroke = Brushes.Black;
            myEllipse.Width = 30;
            myEllipse.Height = 30;
            Canvas.SetLeft(myEllipse, 50);
            Canvas.SetTop(myEllipse, 50);
            content.Children.Add(myEllipse);
        }
    }
}

这是 xaml 代码：

<Window x:Class="WpfApp12.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:WpfApp12"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Canvas x:Name="content" HorizontalAlignment="Left" Height="299" Margin="10,10,0,0" VerticalAlignment="Top" Width="497"/>

    </Grid>
</Window>

Answer 1

您应该实现 MVVM 模式，并创建一个视图模型，其中包含代表您的形状的项目集合，例如几何形状：

public class ViewModel
{
    public ObservableCollection<Geometry> Shapes { get; }
        = new ObservableCollection<Geometry>();
}

然后在 ItemTemplate 中具有 Path 元素的 ItemsControl 中显示几何项目。 Path 的样式在其IsMouseOver 属性上声明了一个触发器，它设置了Fill 属性。

<ItemsControl ItemsSource="{Binding Shapes}">
    <ItemsControl.Resources>
        <SolidColorBrush x:Key="NormalBrush" Color="AliceBlue"/>
        <SolidColorBrush x:Key="MouseOverBrush" Color="Red"/>
        <Style x:Key="ShapeStyle" TargetType="Path">
            <Setter Property="Stroke" Value="Black"/>
            <Setter Property="Fill" Value="{StaticResource NormalBrush}"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Fill" Value="{StaticResource MouseOverBrush}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ItemsControl.Resources>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Path Style="{StaticResource ShapeStyle}" Data="{Binding}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

像这样初始化视图模型：

public MainWindow()
{
    InitializeComponent();

    var vm = new ViewModel();
    vm.Shapes.Add(new EllipseGeometry(new Point(50, 50), 15, 15));
    vm.Shapes.Add(new RectangleGeometry(new Rect(85, 85, 30, 30)));
    vm.Shapes.Add(new EllipseGeometry(new Point(150, 150), 15, 15));

    DataContext = vm;
}

Answer 2

例如，您可以处理 MouseEnter 和 MouseLeave 事件：

myEllipse.MouseEnter += (s, e) => myEllipse.Fill = Brushes.Red;
myEllipse.MouseLeave += (s, e) => myEllipse.Fill = Brushes.Transparent;

谢谢...实际上我有很多节点..我怎样才能将此方法分配给所有节点？

您可以将相同的事件处理程序连接到任意数量的元素：

public MainWindow()
{
    InitializeComponent();
    Ellipse myEllipse = new Ellipse();
    ...

    myEllipse.MouseEnter += MyEllipse_MouseEnter;
    myEllipse.MouseLeave += MyEllipse_MouseLeave;
}

private void MyEllipse_MouseLeave(object sender, MouseEventArgs e)
{
    Ellipse ellipse = sender as Ellipse;
    ellipse.Fill = Brushes.Transparent;
}

private void MyEllipse_MouseEnter(object sender, MouseEventArgs e)
{
    Ellipse ellipse = sender as Ellipse;
    ellipse.Fill = Brushes.Red;
}