CODEWITHSUNDEEP
c#wpfimage
am shammout
am shammout

Reputation: 195

best way for clickable image map in wpf

I have an image with many parts in c# WPF I want make each part click make think I have tried to split the image to parts and make event on each image but the problem is the nested part of images what is the best way to make image map ?

Upvotes: 4

Views: 6703

Answers (4)

huoxudong125
huoxudong125

Reputation: 2056

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

Upvotes: 0

Rahul Saksule
Rahul Saksule

Reputation: 417

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!!!

Upvotes: 1

Clemens
Clemens

Reputation: 128061

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.

Upvotes: 2

Farhad Jabiyev
Farhad Jabiyev

Reputation: 26635

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....

Upvotes: 2

Related Questions