Disable tap event on transparent part of image in WP7/WP8

Question

I am using some transparent images in my Windows phone project. Let Say My Origanal Image Size is 400 x 100.

After slicing images into four different parts it looks like this. First arrow is active and rest part is transparent but the image size is same 400 x 100. And I do the same for all rest three arrows. I sliced them for active part and while rest part will be transparent and size will be 400 x 100. So when I place all 4 images in grid it will show like above image.

I want to get tap event of each image. Is there any way I can just get the tap event of active part mean which have some value mean color value not transparent area or inactive part of image. Mean once I click on First image it will give me event of that image. And when I tap on second image it will give me tap event of second image. But When I click on image it gives me only 1 tap event as its taking the full width and height and other images are also in same size. Please suggest any work around for that.

Answer 1

XAML

<Grid Name="Grid1">
    <Image Tag="Image1" Source="1.png"/>
    <Image Tag="Image2" Source="2.png"/>
    <!-- more images -->
</Grid>

CS

void MouseDown(object sender, MouseButtonEventArgs args)
{
    foreach (var img in ((Panel)sender).Children.OfType<Image>())
    {
        var w = new WriteableBitmap(img, null);
        var p = args.GetPosition(img);
        if (w.Pixels[w.PixelWidth * (int)p.Y + (int)p.X] != 0)
        {
            MessageBox.Show(string.Format("You clicked {0}!", img.Tag));
            args.Handled = true;
            break;
        }
    }
}

Attach handler like this

Grid1.AddHandler(UIElement.MouseLeftButtonDownEvent,
    new MouseButtonEventHandler(MouseDown), false);

Namespaces

using System.Linq;
using System.Windows.Media.Imaging;