How to make Scaling Images have clickable regions in WPF

Question

Using an image inside of a viewbox (inside a DockPanel), I've created a image that scales with my window in a wpf application.

<Viewbox  HorizontalAlignment="Left" Name="viewbox1" VerticalAlignment="Top" Stretch="Uniform" StretchDirection="UpOnly">

    <Image Height="438" Name="image1" Stretch="Uniform" Width="277" Source="/MyAPP;component/Images/TicTacToeBoardForExample.png" MouseDown="image1_MouseDown" />
</Viewbox>

How can I make certain regions of the picture run different code when clicked?

I'm desiring to do this in such a fashion that no matter what size the image scales (upon window resizing), the exact regions desired, scale perfectly with the image so that, when clicked, it always triggers their corresponding code-to-be-run for that region.

Answer 1

Your exact requirement is not clear, But it would be helpful if you take a look at the TranslatePoint and PointToScreen methods on the FrameworkElement.

Answer 2

Hey

i once needed to do a similar thing. What is did was put buttons over the image. Then u put their opacity to 0 or 3.0 or something, so that u don't see the buttons, but can still click them. When properly added, the buttons can resize along with the image.

Answer 3

Off memory you could do something like this:

public void image1_MouseDown(object sender, MouseEventArgs e)
{
  var pos = e.GetPosition(viewbox1);
  if (/* pos in range 1 */) DoTheThingInRange1();
  else if (/*pos in range 2*/) DoTheThingInRange2();
  else if (/*pos in range 3...*/) DoTheThingInRange3();
  //so on...
}

HTH