WPF：光标位于图像特定区域时触发事件的实现方案咨询

嘿，我来帮你搞定这个WPF里的图像特定区域触发Tooltip的问题！你想通过叠加矩形来监听鼠标事件的思路完全没问题，只是需要调整一下控件的布局方式，下面给你两种实用的实现方案：

这种方法是把透明的矩形控件直接叠加在Image的目标区域上方，利用矩形的MouseEnter/MouseLeave事件或者直接绑定Tooltip，操作起来非常直观。

实现步骤： #

1. 把Image和Canvas放在同一个Grid容器里，这样Canvas可以完全覆盖在Image上方
2. 在Canvas中添加一个Rectangle，设置它的位置和大小对应你图像上的红色区域
3. 把矩形的Fill设为Transparent（这样它不会遮挡图像，但能接收鼠标事件）
4. 给矩形绑定Tooltip，或者添加鼠标事件做自定义逻辑

示例XAML代码： #

<Grid>
    <!-- 你的图像控件，注意Stretch属性如果设为Fill的话，矩形位置需要对应拉伸后的区域 -->
    <Image Source="your-image-file.jpg" Stretch="None" />
    
    <!-- 叠加在图像上的Canvas，用来放置触发区域矩形 -->
    <Canvas>
        <!-- Margin的左/上值对应矩形左上角在图像上的位置，Width/Height对应区域大小 -->
        <Rectangle Margin="100,50,0,0" Width="80" Height="60" 
                   Fill="Transparent" ToolTip="这是红色区域的提示信息">
            <Rectangle.Style>
                <Style TargetType="Rectangle">
                    <Style.Triggers>
                        <!-- 可选：鼠标悬停时显示红色边框，方便调试区域位置 -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Stroke" Value="Red" />
                            <Setter Property="StrokeThickness" Value="2" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Rectangle.Style>
        </Rectangle>
    </Canvas>
</Grid>

注意点： #

• 如果你的Image设置了Stretch="Fill"或者其他拉伸模式，需要根据图像的实际渲染尺寸调整矩形的位置和大小，或者用绑定+值转换器来自动适配
• 矩形的Fill必须设为非Null的值（透明也可以），否则无法接收鼠标事件

如果你的图像需要拉伸，或者目标区域是动态变化的，可以通过监听Image的MouseMove事件，判断鼠标坐标是否在目标区域内，来控制Tooltip的显示。

实现步骤： #

1. 给Image添加MouseMove和MouseLeave事件
2. 在事件处理方法中计算鼠标在图像上的相对坐标（如果图像拉伸了，需要转换为原始像素坐标）
3. 判断坐标是否在目标区域内，然后显示/隐藏Tooltip

示例代码： #

XAML部分：

<Image x:Name="targetImage" Source="your-image-file.jpg" 
       Stretch="Fill" MouseMove="TargetImage_MouseMove" MouseLeave="TargetImage_MouseLeave" />

C#后台代码：

private void TargetImage_MouseMove(object sender, MouseEventArgs e)
{
    var image = sender as Image;
    if (image == null || image.Source == null) return;

    // 获取鼠标在Image控件上的相对坐标
    Point mousePos = e.GetPosition(image);
    var bitmapSource = image.Source as BitmapSource;
    if (bitmapSource == null) return;

    // 如果图像有拉伸，计算原始像素坐标的比例
    double scaleX = image.ActualWidth / bitmapSource.PixelWidth;
    double scaleY = image.ActualHeight / bitmapSource.PixelHeight;
    double originalX = mousePos.X / scaleX;
    double originalY = mousePos.Y / scaleY;

    // 定义原始图像中红色区域的范围（比如X: 100-180，Y:50-110）
    bool isInRedArea = originalX >= 100 && originalX <= 180 
                     && originalY >= 50 && originalY <= 110;

    if (isInRedArea)
    {
        ToolTipService.SetToolTip(image, "这是红色区域的提示");
        // 这里也可以触发你自己的自定义事件，比如：
        // RedAreaEntered?.Invoke(this, EventArgs.Empty);
    }
    else
    {
        ToolTipService.SetToolTip(image, null);
    }
}

private void TargetImage_MouseLeave(object sender, MouseEventArgs e)
{
    var image = sender as Image;
    if (image != null)
    {
        ToolTipService.SetToolTip(image, null);
    }
}

注意点： #

• 这种方法不需要额外的叠加控件，适合处理动态区域或者图像拉伸的场景
• 如果图像没有拉伸（Stretch="None"），可以直接用mousePos的坐标来判断，不需要转换比例

内容的提问来源于stack exchange，提问作者Simon SCHÖNEGGER