C# Windows Forms ImageMap Control

• Download demo - 11 Kb
• Download source - 21 Kb

 

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.

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:

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

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.