best way for clickable image map in wpf

Question

我在c＃WPF中有很多部分的图像我想让每个部分点击make认为我试图将图像分割成部分并在每个图像上制作事件但问题是图像的嵌套部分什么是制作图像的最佳方法地图？

Answer 1

You could overlay the image with a set of transparent shapes:

<Canvas>
    <Image Source="..."/>
    <Ellipse Canvas.Left="50" Canvas.Top="50" Width="100" Height="50"
             Fill="Transparent" MouseDown="Ellipse_MouseDown"/>
    <Path Data="..." MouseDown="Path_MouseDown"/>
</Canvas>

These shapes could be simple Rectangles or Ellipses, or more or less complex Polygons or Paths.

Answer 2

You can do it easily with Expression Design which is included in Microsoft Expression Studio. This is steps you gonna do:

1. Add image to Expression Design.
2. Then you can use PaintBrush tool for split image into parts as you want.
3. Then you must export this to xaml. In export window you can choose Xaml Silverlight 3

Canvas as format and Paths as Text.

As you understand, it automatically converts objects you draw on your image to path object with all coordinates on it.

Then you can copy exported xaml and paste it to your application.

You can download Expression Studio from Dreamspark for free.

I have just made sample and exported it to xaml:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Untitled1" Width="62" Height="62" Clip="F1 M 0,0L 62,0L 62,62L 0,62L 0,0" UseLayoutRounding="False">
    <Canvas x:Name="Layer_1" Width="62" Height="62" Canvas.Left="0" Canvas.Top="0">
        <Image x:Name="Image" Source="Untitled1_files/image0.png" Width="1920" Height="1080" Canvas.Left="0" Canvas.Top="0">
            <Image.RenderTransform>
                <TransformGroup>
                    <MatrixTransform Matrix="1,0,0,1,-929.667,-510.667"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Path x:Name="Path" Width="159.722" Height="161.743" Canvas.Left="82.757" Canvas.Top="-0.415951" Stretch="Fill" Fill="#FFE7DEDE" Data="F1 M 82.8307,30.8333C 81.8859,46.01 90.3304,60.6249 90.3304,75.831C 90.3304,88.8304 91.9427,101.93 90.3304,114.829C 89.0281,125.247 87.0101,136.367 90.3304,146.327C 95.3301,161.327 119.518,161.327 135.328,161.327C 157.018,161.327 175.778,144.86 193.825,132.828C 209.523,122.363 235.198,120.495 241.823,102.83C 243.994,97.0391 240.326,90.2367 237.323,84.8306C 230.656,72.8294 223.759,60.756 214.824,50.3323C 205.057,38.9377 205.748,18.0458 192.325,11.3342C 183.723,7.03329 173.332,8.29683 163.827,6.83447C 144.945,3.92956 125.479,-3.30947 106.83,0.834766C 94.3289,3.61269 83.6265,18.0524 82.8307,30.8333 Z "/>
    </Canvas>
</Canvas>

The exported part is Path object. You can do whatever you want on it. For example you can handle MouseClick event for this path and change background of path....

Answer 3

Its very simple. rather than go to any complicated way follow this,It's simplest 1)First declare your image in XAML

<Grid Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Image Name="imagePath" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

2)Find mouse position on image itself to get x and y co-ordinate

String[] arr = new String[2];
var mousePos = Mouse.GetPosition(imagePath);
arr = mousePos.ToString().Split(',');
double x = Double.Parse(arr[0].ToString());
double y = Double.Parse(arr[1].ToString());

3)Declare area where you wants to get clickable area or mousehover

if (x >= 10 && y >= 10 && x <= 20 && y <= 20//this declares square area with x1,y1,x2,y2
{
  //do whatever you want to do
  //don't forget to add left and top each time
  left = left +x;//x=10 i.e x1
  top = top + y;//y=20 i.e y1
}

4)Add this x1 and y1 each time you move on image

int left = 0;
int top = 0;

Entire code;ll look like this

InitializeComponent();
imagePath.MouseMove += new MouseEventHandler(myMouseMove);

private void myMouseMove(object sender, MouseEventArgs e)
    {
        String[] arr = new String[2];
        var mousePos = Mouse.GetPosition(imagePath);
        arr = mousePos.ToString().Split(',');
        double x = Double.Parse(arr[0].ToString());
        double y = Double.Parse(arr[1].ToString());
        int x = (int)xx;
        int y = (int)yy;
        int left = 0;
        int top = 0;

        Console.WriteLine("Screen Cordinate-------------------------" + x + ", " + y);

                for (int i = 0; i < n; i++)
                {
                    if (x >= x1 && y >= y1 && x <= x2 && y <= y2
                    {                            
                        Mouse.OverrideCursor = Cursors.Hand;
                        left = left + x1;
                        top = top + y1;
                        break;
                    }
                    else
                    {
                        Mouse.OverrideCursor = Cursors.Arrow;
                    }
                }

where x1,y1,x2,y2 are the cordinates on image Thats it!!!

Answer 4

I think use Adorner to implement the funtions is best way.

Here is smaple for add control on image ( image annotating ) and Adorner overview in MSDN