Click here to Skip to main content
15,566,394 members
Please Sign up or sign in to vote.
5.00/5 (2 votes)
See more:

How can we write Mouseleftclick or mouseRight click events for the shapes like rectangles,ellipse,pathgeometry etc. which are drawn from custom canvas OnRender method.

I have a custom canvas on the WPF window. on the canvas with the mouse events i have drawn shapes. Now i want to generate click events for the shapes.


protected override void OnRender(DrawingContext dc)
SolidColorBrush myBrush = new SolidColorBrush(Colors.Transparent);
Pen mypen=new Pen(Brushes.Black,1);			
Rect myrect=new Rect (0,0,this.Width,this.Height);  
dc.DrawRectangle(new SolidColorBrush(Colors.White),new Pen(Brushes.Black,1),myrect);
// Draw ellipse
{                        dc.DrawEllipse(myBrush,mypen,Position,Shapewidth,Shapeheight); 
// Draw Rectangle
    Rect rect1=new Rect(startPoint.X,startPoint.Y,Shapewidth,Shapeheight);  


Here iam able to draw rectangle, ellipse on the canvas, how can i generate mouse click events when i click on rectangle or ellipse shapes rendered on canvas.

Any help with an example is much appreciated..!
Updated 21-Nov-11 20:48pm
Shmuel Zang 21-Nov-11 3:51am    
5 for the question. Interesting issue.

1 solution

The mouse events are declared in the UIElement class. When we want interactive shapes in the UI we usually put elements that derive from Shape (e.g. Ellipse, Rectangle, Path etc...).

If you want an interactive shape, you can create a Shape and add it to the Children of the Canvas, as the following:

Ellipse el = new Ellipse
    Width = 100,
    Height = 50,
    Fill = Brushes.Green
Canvas.SetTop(el, 30);
Canvas.SetLeft(el, 40);

Then you can create the event-handler:

void OnEllipseMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    // ...

and, register to the shape's event:

el.MouseLeftButtonDown += OnEllipseMouseLeftButtonDown;

If you want to handle events for shapes that is drawn using DrawingContext, you can store the details of the shapes (like bounding rectangle) and, use these details in the event-handlers of the Canvas's events, in order to find which shape is clicked.

Share this answer
KiranBabu M 21-Nov-11 3:37am    
Thanks for the reply,
Here i want to handle events for shapes that is drawn using DrawingContext only.
Shmuel Zang 21-Nov-11 3:49am    
So, you can handle these shapes, using the Canvas's events, like I wrote. But, in my opinion, it is better to do that in the first way I mentioned (by adding a Shape to the Canvas's Children).
KiranBabu M 21-Nov-11 8:12am    
Here i have multiple images. i want to render image and shapes on the canvas and copy the shapes to all the images in the list. when i select the image the image and copied shapes should render on the canvas. Up to here it is O.K ,
now i want to generate events to the shapes.
This i have been trying but not successful.

Plz can u provide any example to understand.
Shmuel Zang 21-Nov-11 8:54am    
For rendering interactive shapes on the canvas, you can create shapes and add them to the canvas's children, instead of drawing the shapes in the OnRender method, like the example I gave in the solution.

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900