代码之家 › 专栏 › 技术社区 › Zeinab Ghaffarnasab

如何在形状上操作鼠标?

mouseover wpf c#

Zeinab Ghaffarnasab · 技术社区 · 8 年前

我有一个图形平台,我感兴趣的是在鼠标移动到节点上时改变节点的颜色(或者像改变不透明度来聚焦节点)。

我该怎么做?

有人能帮忙吗?

这将是中的示例节点表示。xaml。反恐精英:

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>

2 回复 | 直到 8 年前

Clemens 8 年前

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

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

然后在ItemsControl中显示几何体项,该控件的ItemTemplate中有一个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;
}

mm8 8 年前

例如,您可以处理 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;
}