Click here to Skip to main content
15,879,239 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

 
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 

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.