Click here to Skip to main content
13,002,169 members (75,351 online)
Rate this:
Please Sign up or sign in to vote.
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..!
Posted 20-Nov-11 20:14pm
Updated 21-Nov-11 19:48pm
Shmuel Zang 21-Nov-11 3:51am
5 for the question. Interesting issue.

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

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.

MVKbgl 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).
MVKbgl 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)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170624.1 | Last Updated 22 Nov 2011
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100