Click here to Skip to main content
13,247,891 members (41,825 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


11 bookmarked
Posted 11 Mar 2011

Clickable areas in a picturebox

, 16 Mar 2011
Rate this:
Please Sign up or sign in to vote.
Like HTML images, we can have clickable areas in a picturebox of windows application
In HTML pages, many of us saw click-able HTML transparent map areas which show some tip or have a hyperlink. We can achieve the same thing in Windows application where we can handle the click and do whatever necessary.

How this can be done? Let us take the simple Panel control which has device context and fire click event. The simplicity of this control is useful. In html map complex area are defined by set of coordinate pairs. Here we can have that by using the GrpahicsPath from System.Drawing.Drawing2D. Then we can set the Region of the panel to this graphics path. Make the background color of the panel to Transparent. Now the panel is ready and we can add this to the controls collection of the picture box, position it using the location property of the panel.

Here is the code. I use a custom panel class to draw the panel in the picture box.

    class CirclePanel:Panel
        //Properties to draw circle
        float radius;
        public float Radius 
            get { return radius; }
                this.Size = new Size((int)Radius, (int)Radius);
        Point centre;
        public Point Centre
            get { return centre; }
                this.Location = Centre;           
        public string Message { get; set; }
        public CirclePanel()
            //Default Values
            this.BackColor = Color.Transparent;
            Radius = 1;
            Centre = new Point(0, 0);         
        protected override void OnPaint(PaintEventArgs e)
            //Defines a graphic path and set it as the panel's region
            //For custom region use different path's
            if (centre != null)
                GraphicsPath path = new GraphicsPath();
                path.AddEllipse(0, 0, radius, radius);
                this.Region = new Region(path);

Now how to use this class:

       private void Form2_Load(object sender, EventArgs e)
            //Create a circle panel and setting the properties
            CirclePanel panel2 = new CirclePanel();
            //The 30,30 are X and Y in the picture box coordinates
            panel2.Centre = new Point(100, 100);
            panel2.Radius = 50;
            panel2.Message = "you clicked Me";
            // Add it to picture box at the coordinates defined
            panel2.Click += new EventHandler(panel2_Click);
        protected void panel2_Click(object sender, EventArgs e)
            //Display Message
            CirclePanel panel = (CirclePanel)sender;

This example will plot a transparent click-able area at 100x, 100y point with radius of 50 pixels. The click event can be handled. This technique may be useful for fancy UI, Interactive display like maps, etc.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Albin Abel
Software Developer
India India
I am developer in .Net and GIS.

You may also be interested in...

Comments and Discussions

GeneralCool Pin
GenJerDan16-Mar-11 5:25
memberGenJerDan16-Mar-11 5:25 
GeneralRe: Cool Pin
AlbinAbel16-Mar-11 9:00
memberAlbinAbel16-Mar-11 9:00 
Hi GenjerDan,

Thanks for your comment. Tool tip is possible here. Can use a tool tip control and assign the tooltip for the this extended control. If the tooltip need to be embedded inside the class then we can go like this.

Let us have these private members in the extended class

private Lazy<tooltip> tip;
private string message;

In the constructor instantiate this tooltip

tip = new Lazy<tooltip>(() => new ToolTip());

By setting it lazy the tooltip not instantiate unless a message is assigned.

When setting the message we will set the tool tip

public string Message
get { return message; }

message = value;


Now you will be having inbuilt tool tip on mouse over apart from the click handling.
GeneralRe: Cool Pin
GenJerDan16-Mar-11 9:36
memberGenJerDan16-Mar-11 9:36 
GeneralRe: Cool Pin
AlbinAbel16-Mar-11 10:57
memberAlbinAbel16-Mar-11 10:57 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 16 Mar 2011
Article Copyright 2011 by Albin Abel
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid