Image Map in C# Windows Phone 8.1 application

Question

I am making a windows phone 8.1 application using C# and XAML and I want to implement an Image map. I know how to do it in HTML using img tag's usemap attribute, but how using C# and XAML?

Answer 1

You want to do something like this:

<Canvas xmlns="http://schemas.microsoft.com/client/2007"     
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="500" Height="500">
   <Canvas.Background>
    <ImageBrush ImageSource="yourBackgroundImage.jpg" Stretch="Fill"/>
  </Canvas.Background>

  <Rectangle Width="50" Height="25" Canvas.Top="100" Canvas.Left="100" />
  <Rectangle Width="100" Height="20" Canvas.Top="200" Canvas.Left="300" />
  <!-- etc -->
</Canvas>

The Canvas with a background image is analogous to your <img> and the set of Rectangle elements are similar to your <area> tags inside your <map>. You can add events to the Rectangle for things like Tap, you could give them a Fill property to make them a given color, etc.