Click here to Skip to main content
15,881,715 members
Articles / Programming Languages / C#
Article

C# Windows Forms ImageMap Control

Rate me:
Please Sign up or sign in to vote.
4.81/5 (41 votes)
31 Aug 20023 min read 278.2K   9.8K   93   35
An ImageMap control for use in Windows Forms applications

Mouse hovering on red polygon  Mouse clicked on white rectangle

Introduction

I noticed a few requests on various newsgroups for an image map control which could be used in a Windows Forms application. I had not worked much with the System.Drawing namespace, so I decided to give it a try. This control is the result.

How It Works

The control uses a standard PictureBox control internally, specifically it's ability to load and display an image as well as it's inherited MouseMove, MouseLeave, and Click events. A ToolTip component is used as well to display tooltips for defined regions. Currently, the key specified for a region is used for the tooltip text, though it would be pretty easy to allow an additional "tooltip" property to be assigned for each region.

The bulk of the logic is in the private getActiveIndexAtPoint method shown below. The method is called whenever the mouse moves within the control to determine which region, if any, the mouse is within. If the mouse is within a region, the region's index is returned by the method. This index is used to lookup the region's key, which is then used to set the text displayed by the tooltip. The cursor is also changed to a hand and the index is stored in a private property to be re-used if the mouse is clicked, avoiding the necessity to call this method again. If the method does not find a region, a -1 is returned and the cursor is set to it's default.

C#
private int getActiveIndexAtPoint(Point point)
{
    System.Drawing.Drawing2D.GraphicsPath path = new System.Drawing.Drawing2D.GraphicsPath();
    System.Drawing.Drawing2D.GraphicsPathIterator iterator = 
                new System.Drawing.Drawing2D.GraphicsPathIterator(_pathData);
    iterator.Rewind();
    for(int current=0; current < iterator.SubpathCount; current++)
    {
        iterator.NextMarker(path);
        if(path.IsVisible(point, this._graphics))
            return current;
    }
    return -1;
}

How To Use It

You can add this control to your toolbox just as you would any other .NET control. Once, added, simply drag-and-drop an instance of the control onto your form. Use the Image property to assign the desired image to the control.

Once you've added the control to your form, you can begin to call the various Add- methods to define the "hot-spots" within your image. The available methods are AddEllipse, AddRectangle, and AddPolygon. I tried to follow the conventions of HTML image maps with respect to defining the various shapes, and I overloaded the AddElipse and AddRectangle methods to accept ".NET-friendly" types such as Point and Rectangle. Since the methods follow the convention of HTML image maps, you should be able to use any existing image map generation software to determine exactly what points to specify for the desired regions within your image.

Here is the code required to define an HTML image map using the image in the first screenshot:

HTML
<!--Text BUTTON-->
   <area shape="rect" coords="140,20,280,60">

<!--Triangle BUTTON-->
   <area shape="poly" coords="100,100,180,80,200,140">

<!--Face BUTTON-->
   <area shape="circle" coords="80,100,60">

Here are the equivalent regions defined using this control:

C#
this.imageMap1.AddRectangle("Rectangle", 140, 20, 280, 60);
this.imageMap1.AddPolygon("Polygon", new Point[] {new Point(100, 100), 
                          new Point(180, 80), new Point(200, 140)});
this.imageMap1.AddElipse("Ellipse", 80, 100, 60);

The control will raise an event - RegionClick - whenever the mouse is clicked within a defined region. The event passes two values denoting the index and the key of the clicked region. You would then take whatever action you wished based on the region clicked.

That's it! I hope this meets the needs of those who had requested an image map control for use in a Windows Forms application. Comments and requests are welcome.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionHow to reinitialize the image map control Pin
Member 1318584918-Feb-19 23:40
Member 1318584918-Feb-19 23:40 
QuestionColor Regions Pin
Member 123606361-Mar-16 21:03
Member 123606361-Mar-16 21:03 
AnswerAdding RegionMouseMove and RegionChanged Events Pin
ajorani22-Jan-13 20:07
ajorani22-Jan-13 20:07 
QuestionMouse Leave on imageMap Pin
czarownica1022-Oct-12 3:02
czarownica1022-Oct-12 3:02 
QuestionCompact Framework 3.5...possible? Pin
Edward Chantos9-Aug-11 4:52
Edward Chantos9-Aug-11 4:52 
GeneralWhat nice work Pin
Edward Chantos3-Aug-11 9:24
Edward Chantos3-Aug-11 9:24 
GeneralAbout Licensing Pin
patilc26-Jan-10 18:30
patilc26-Jan-10 18:30 
GeneralRe: About Licensing Pin
Ryan LaNeve26-Jan-10 18:49
Ryan LaNeve26-Jan-10 18:49 
GeneralNeeds Work (Here is an updated version people) Pin
Member 219148521-May-09 8:22
Member 219148521-May-09 8:22 
GeneralRe: Needs Work (Here is an updated version people) Pin
Dan Troesser1-Sep-09 11:23
Dan Troesser1-Sep-09 11:23 
GeneralRe: Needs Work (Here is an updated version people) Pin
Member 23454648-Mar-12 21:43
Member 23454648-Mar-12 21:43 
GeneralRe: Needs Work (Here is an updated version people) Pin
Member 1048177322-Dec-13 2:26
Member 1048177322-Dec-13 2:26 
GeneralRe: Needs Work (Here is an updated version people) Pin
Eshan Singh9-Jan-15 20:33
Eshan Singh9-Jan-15 20:33 
GeneralI want draw more than one circle , arrow or ellipse on image Pin
sushilabhanvar26-Apr-09 19:29
sushilabhanvar26-Apr-09 19:29 
Hi friends,,

I am working on c# desktop Application in which I want image editor functionality like I have image and on it I want draw circle rectangle ,arrow and ellipse . I am able to draw it but only once at a time . if i select circle than i cant draw circle more than one and other also like rectangle ,arrow
. for this I took refrence of cropcircle test application.

on mouse down that is replacing previus value to new . how can i REMOVE THIS PROBLEM....
SUGGEST me any test application.
GeneralThanks! Pin
trempnvt19-Mar-09 0:33
trempnvt19-Mar-09 0:33 
GeneralColour in hotspots Pin
Axell14-Feb-09 0:42
Axell14-Feb-09 0:42 
GeneralWant Image Editor Source code in C# windows application whose work like MS Paint Pin
dheeraj.mittal24-Nov-08 4:20
dheeraj.mittal24-Nov-08 4:20 
GeneralNeed some inputs for GraphicsPath.IsVisible(point pt) method Pin
kritti1026-Jun-08 22:36
kritti1026-Jun-08 22:36 
GeneralGuru Pin
utehn29-Mar-07 1:06
utehn29-Mar-07 1:06 
QuestionWhat if resize? Pin
huyhk12-Feb-07 16:57
huyhk12-Feb-07 16:57 
GeneralAwesome Pin
onnadi315-Nov-06 22:10
onnadi315-Nov-06 22:10 
GeneralHi Pin
pannujagwinder6-Oct-06 10:00
pannujagwinder6-Oct-06 10:00 
QuestionWhat about hover color? Pin
mackles14-Jul-06 12:03
mackles14-Jul-06 12:03 
AnswerRe: What about hover color? Pin
onurbk2-Oct-08 4:01
onurbk2-Oct-08 4:01 
GeneralImage Mapper - Pin
chuck crego7-Jul-06 5:41
chuck crego7-Jul-06 5:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.