Click here to Skip to main content
Click here to Skip to main content

Tagged as

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; }
            set 
            { 
                radius=value;
                this.Size = new Size((int)Radius, (int)Radius);
            }
        }
 
        Point centre;
        public Point Centre
        {
            get { return centre; }
 
            set
            {
                centre=value;
                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)
        {
            base.OnPaint(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);
                path.Dispose();
            }
        }
    }
 
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
            pictureBox1.Controls.Add(panel2);
            panel2.Click += new EventHandler(panel2_Click);
        }
 
        protected void panel2_Click(object sender, EventArgs e)
        {
            //Display Message
            CirclePanel panel = (CirclePanel)sender;
            MessageBox.Show(panel.Message);
        }
 
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.

License

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

Share

About the Author

Albin Abel
Software Developer
India India
I am developer in .Net and GIS. albin_gis@yahoo.com

Comments and Discussions

 
GeneralCool PinmemberGenJerDan16-Mar-11 4:25 
GeneralRe: Cool PinmemberAlbinAbel16-Mar-11 8:00 
GeneralRe: Cool PinmemberGenJerDan16-Mar-11 8:36 
GeneralRe: Cool PinmemberAlbinAbel16-Mar-11 9:57 

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

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

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