Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# WPF
Hi,
 
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.
 
code:
 
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
  if(Shapetype=="Ellipse")
{                        dc.DrawEllipse(myBrush,mypen,Position,Shapewidth,Shapeheight); 
 }
// Draw Rectangle
    if(Shapetype=="Rectangle")
     {
    Rect rect1=new Rect(startPoint.X,startPoint.Y,Shapewidth,Shapeheight);  
      dc.DrawRectangle(myBrush,mypen,rect1);
 
     }
}
 
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
Edited 21-Nov-11 19:48pm
v3
Comments
Shmuel Zang at 21-Nov-11 3:51am
   
5 for the question. Interesting issue.

1 solution

Rate this: bad
good
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);
myCanvas.Children.Add(el);

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.

  Permalink  
Comments
MVKbgl at 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 at 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 at 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 at 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
0 Nirav Prabtani 298
1 CPallini 209
2 Mika Wendelius 185
3 OriginalGriff 182
4 Sergey Alexandrovich Kryukov 176
0 Nirav Prabtani 398
1 OriginalGriff 292
2 Sergey Alexandrovich Kryukov 251
3 Mika Wendelius 185
4 Abhinav S 180


Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 22 Nov 2011
Copyright © CodeProject, 1999-2014
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