WPF - Trigger event if cursor is at certain position in image - wpf

Question

I'm trying to trigger an event if the cursor is located in a certain part of an image in WPF. I thought I might try to "draw" an rectangle over the image and use a mousein/out event. I currently don't know how to accomplish this.
So for example I want to trigger a tooltip if the cursor enters the red rectangle of the image.
Currently I'm using the <Image></Image> Tag in WPF but that does not seem to work out....
Any help is appreciated!

Answer 1

I would probably utilize, that MouseEventArgs.GetPosition gives me the position relative to the object I hand over as an argument. Furthermore I would try to use the scaling of the image so that this approach is robust to later changing of the image size.
This approach would still give you a bunch of Magic Numbers in your code, but I don't think that can be avoided.
Here is a quick example showcasing what I mean.
Final result
Here is a gif showcasing the result of the approach, notice the
Yup this is an owl
appearing, when we are over a certain part of the image.
MainWindow.xaml
<Window x:Class="MousePosition.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:MousePosition"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid ShowGridLines="True" MouseMove="MousePosition">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="1" x:Name="Feedback"/>
<Image x:Name="PrettyOwl" Grid.Column="1" Grid.Row="1" Source="Images/10-dithering-opt.jpg"/>
<TextBlock Grid.Column="1" Grid.Row="2" x:Name="WeAreThere"/>
</Grid>
MainWindow.xaml.cs
using System.Windows;
using System.Windows.Input;
namespace MousePosition
{
/// <summary>
/// Interaktionslogik für MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void MousePosition(object sender, MouseEventArgs e)
{
var scale = PrettyOwl.ActualWidth / PrettyOwl.Source.Width;
Point p = e.GetPosition(PrettyOwl);
Feedback.Text = string.Format("GetPosition(Mouse): X = {0}, Y = {1}", p.X, p.Y);
if (p.X > 100*scale && p.X < 200*scale && p.Y > 100*scale && p.Y < 200*scale)
{
WeAreThere.Text = "Yup, this is an owl";
}
e.Handled = true;
}
}
}
Hope that helps!

Answer 2

I thought I might try to "draw" an rectangle over the image and use a mousein/out event. I currently don't know how to accomplish this.
You could put the Image and an invisible element (with a background of Transparent) inside the same Grid:
<Grid>
<Image Source="screen.png" />
<Grid Background="Transparent" Width="10" Height="10" Margin="-40,-40,0,0"
MouseEnter="Grid_MouseEnter"
MouseLeave="Grid_MouseLeave"/>
</Grid>
The portion of the Image to be interactive is defined using the Margin property of invisible overlay element.