How can test if an image is onto another in WPF?

Question

I have two images, as explained in the following XAML code:

<Window x:Class="TestApplicationGestureKinect.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="768" Width="1024" ScrollViewer.VerticalScrollBarVisibility="Disabled" MinWidth="1024" MaxWidth="1024" MinHeight="768" MaxHeight="768">
    <Grid Background="Black">

        <Image x:Name="img1" HorizontalAlignment="Left" Margin="47,82,0,0" VerticalAlignment="Top"  Source="photos/01.jpg" Height="200" RenderTransformOrigin="0.5,0.5" >
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="9.577"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>

        <Image x:Name="cursorRight" HorizontalAlignment="Left" Margin="757,133,0,0" Width="48" Height="48" VerticalAlignment="Top"  Source="cursors/right_open.png" />

    </Grid>
</Window>

And the following image shows how this appear:

The result of the above XAML code

I need a way to test, from C# code, if the image called cursorRight is onto the area covered by the image called img1, after the transformation.

How could I do? I thought about some consideration on the bounding boxes of the two images, but while for the cursorRight image, could be acceptable to consider the bounding box, this doesn't seem to be a good choice for the other image......

EDIT: The following images show four examples of how I want to do:

cursor on the image:
cursor not on the image:

SOLUTION: The following code is what I used in order to solve the above problem. I considered the bounding box of the cursor rather than the exact shape of it.

    private bool isOn(Image img1, Image img2)
    {
        if (img1 == null || img1.Visibility != System.Windows.Visibility.Visible)
        {
            return false;
        }

        double img1_topLeft_X = img1.Margin.Left;
        double img1_topLeft_Y = img1.Margin.Top;
        double img1_bottomRight_X = img1_topLeft_X + img1.Width;
        double img1_bottomRight_Y = img1_topLeft_Y + img1.Height;

        Point img1_topLeft = new Point(img1_topLeft_X, img1_topLeft_Y);
        Point img1_bottomRight = new Point(img1_bottomRight_X, img1_bottomRight_Y);

        HitTestResult result_topLeft = VisualTreeHelper.HitTest(img2.Parent as Grid, img1_topLeft);
        HitTestResult result_bottomRight = VisualTreeHelper.HitTest(img2.Parent as Grid, img1_bottomRight);

        if (result_topLeft != null && result_bottomRight != null)
        {
            if (result_topLeft.VisualHit.GetType() == typeof(Image) && result_bottomRight.VisualHit.GetType() == typeof(Image) &&
                (result_topLeft.VisualHit as Image).Name.Equals(img2.Name) && (result_bottomRight.VisualHit as Image).Name.Equals(img2.Name))
            {
                return true;
            }
            else
            {
                return false;
            }
        }
        else
        {
            return false;
        }

    }

However, in this way the cursor is ONTO the image only if the bounding box of it is TOTALLY onto the image. It's not exactly what I needed, but since it works pretty well, I decided to use this method.

not sure if it would work so i add it as a comment : try firing an event on hover(IsMouseOver) if you have multiple images wire the events to the same methood — Nikola Sivkov, Apr 27 '13 at 17:45

score 1 · Answer 1 · answered Apr 27 '13 at 15:02

1

Use bounding rectangle for your cursor and a "bounding polygon" that defines the area of your larger image and then use polygon intersection algorithm (one explanation here) to solve your problem.

answered Apr 27 '13 at 15:02

dotNET

33,414
24
162
251

This could be a working solution, but I think that the method proposed by [Steve Van Treeck](http://stackoverflow.com/users/1697393/steve-van-treeck) is more simple and equivalently effective. – Vito Gentile Apr 28 '13 at 10:43

score 1 · Accepted Answer · edited Apr 27 '13 at 16:55

1

An option not quite would be to use the VisualTreeHelper.HitTest(...) methods to check if points overlapped each other. You can read more about it works here.

edited Apr 27 '13 at 16:55

Dave Clemmer

3,741
12
49
72

answered Apr 27 '13 at 16:20

Steve Van Treeck

716
5
9

This is the simplier solution ;) Thank you very much. An useful and more extended example of how to use `HitTest` can be found [here](http://stackoverflow.com/questions/4308448/is-a-usercontrol-not-in-the-hittestresult). – Vito Gentile Apr 28 '13 at 10:33

How can test if an image is onto another in WPF?

2 Answers2